Relaytive layout

We commonly used LinearLayout, if we arrange view inside horizonal, it look like this

But sometime we want a comlex layout. It has two textViews at line 1, one textView below and two another at the bottom. The layout has border around.

We will use RelativeLayout to do this.

<RelativeLayout

        android:layout_width="250dp"

        android:layout_height="120dp"

        android:layout_gravity="center"

        android:background="@drawable/line2" >

        <TextView

            android:id="@+id/textViewa1"

            android:layout_width="120dp"

            android:layout_height="40dp"

            android:layout_alignParentTop="true"

            android:gravity="center"

            android:ellipsize="none"

            android:singleLine="true"

            android:text="Text 1"

            android:textColor="#00F"

            android:textSize="18sp"

            android:textStyle="bold" />

        <TextView

            android:id="@+id/textViewa2"

            android:layout_width="120dp"

            android:layout_height="40dp"

           android:layout_alignParentTop="true"

            android:gravity="center"

            android:layout_toRightOf="@+id/textViewa1"

            android:ellipsize="none"

            android:text="Text 2"

            android:textColor="#00F"

            android:textSize="18sp"

            android:textStyle="bold" />

        <TextView

            android:id="@+id/c1"

            android:layout_width="match_parent"

            android:layout_height="40dp"

            android:layout_below="@+id/textViewa1"

            android:gravity="center"

            android:ellipsize="none"

            android:textColor="#00F"

            android:text="Text 3"

            android:textSize="18sp" />

        <TextView

            android:id="@+id/textViewc9"

            android:layout_width="120dp"

            android:layout_height="40dp"

            android:layout_below="@+id/c1"

            android:gravity="center"

            android:singleLine="true"

            android:text="Text 4"

            android:textColor="#00F"

            android:textSize="18sp" />

        <TextView

            android:id="@+id/textViewc10"

            android:layout_width="120dp"

            android:layout_height="40dp"

            android:layout_below="@+id/c1"

            android:gravity="center"

            android:layout_toRightOf="@+id/textViewc9"

            android:singleLine="true"

            android:text="Text 5"

            android:textColor="#00F"

            android:textSize="18sp" />
 </RelativeLayout>
Run to see the result.

If use LinearLayout, we have to use many layouts inside each other.

When set gravity for view, android:layout_gravity="center"  will move whole view to center screen, android:gravity="center"  will move text inside view to center of view. They are different.

The border with background of RelaytiveLayout, file line2.xml has code as below.

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android">

<stroke

android:width="1dip"

 android:color="#4b5320" />

<solid

android:color="#ccffff" />

</shape>