Layout - Android User Interface

Layout is a container to the view. Every Layout has its own nature. Other View such as Button, TextView etc. are nested in Layout and arrange its position according to their parent layout. We can nest one layout within another. There are different type of layout, each have their own method of arrangement of their child.

LinearLayout is most usually utilized design in Android. It is utilized to adjust its child either horizontally or vertically. The horizontal or vertical placement can be determined using its attribute android:orientation=”vertical” or android:orientation=”horizontal”. By default the orientation is horizontal.

<LinearLayout

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

   android:layout_width="match_parent"

   android:layout_height="match_parent"

   android:orientation="vertical">

   <TextView

       android:layout_width="match_parent"

       android:layout_height="wrap_content"

       android:layout_weight="1"

       android:background="#ef3131"

       android:gravity="center"

       android:text="Akif"

       android:textSize="30sp" />

   <TextView

       android:layout_width="match_parent"

       android:layout_height="wrap_content"

       android:layout_weight="1"

       android:background="#4994ce"

       android:gravity="center"

       android:text="Asif"

       android:textSize="30sp" />

   <TextView

       android:layout_width="match_parent"

       android:layout_height="wrap_content"

       android:layout_weight="1"

       android:background="#31ef37"

       android:gravity="center"

       android:text="Huzaif"

       android:textSize="30sp" />

</LinearLayout>

<LinearLayout 

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

   android:layout_width="match_parent"

   android:layout_height="match_parent"

   android:orientation="horizontal">

   <TextView

       android:layout_width="match_parent"

       android:layout_height="wrap_content"

       android:layout_weight="1"

       android:background="#ef3131"

       android:gravity="center"

       android:text="Akif"

       android:textSize="30sp" />

   <TextView

       android:layout_width="match_parent"

       android:layout_height="wrap_content"

       android:layout_weight="1"

       android:background="#4994ce"

       android:gravity="center"

       android:text="Asif"

       android:textSize="30sp" />

   <TextView

       android:layout_width="match_parent"

       android:layout_height="wrap_content"

       android:layout_weight="1"

       android:background="#31ef37"

       android:gravity="center"

       android:text="Huzaif"

       android:textSize="30sp" />

</LinearLayout>

RelativeLayout arrange its child according to some reference. Relative Layout is adjust its child Views relative with parent or with each other. Like at top, at bottom,in center, Left or right etc.On left of some other view, or below etc.

Some common use attributes of Relative Layout child’s w.r.t parent reference are

<android:layout_centerVertical="true" 
android:layout_centerHorizontal="true" 
android:layout_alignParentBottom="true" 
android:layout_alignParentRight="true" 
android:layout_alignParentLeft="true" 
android:layout_alignParentTop="true">

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

<RelativeLayout

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

   android:layout_width="match_parent"

   android:layout_height="match_parent">

   <Button

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

       android:layout_centerHorizontal="true"

       android:text="CH T" />

   <Button

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

       android:layout_centerHorizontal="true"

       android:layout_centerVertical="true"

       android:text="CH CV" />

   <Button

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

       android:layout_alignParentBottom="true"

       android:layout_centerHorizontal="true"

       android:text="B CH" />

   <Button

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

       android:layout_alignParentRight="true"

       android:layout_alignParentBottom="true"

       android:text="B R" />

   <Button

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

       android:layout_alignParentLeft="true"

       android:layout_alignParentBottom="true"

       android:text="B L" />

   <Button

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

       android:layout_alignParentLeft="true"

       android:layout_centerVertical="true"

       android:text="CV L" />

   <Button

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

       android:layout_alignParentRight="true"

       android:layout_centerVertical="true"

       android:text="CV R" />

   <Button

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

       android:layout_alignParentTop="true"

       android:layout_alignParentRight="true"

       android:text="T R" />

   <Button

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

       android:layout_alignParentLeft="true"

       android:layout_alignParentTop="true"

       android:text="L T" />

</RelativeLayout>

Relative Layout is adjust its child Views relative with parent or with each other. Like at top, at bottom,in center, Left or right etc.On left of some other view, or below etc. Some common use attributes of Relative Layout child’s w.r.t parent reference are

android:layout_below="@+id/five"
android:layout_above="@+id/five"
android:layout_toRightOf="@+id/five"
android:layout_toLeftOf="@+id/five"

Where "@+id/five" is the ID refference of other view w.r.t which you want to place it.

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

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

   android:layout_width="match_parent"

   android:layout_height="match_parent">

   <Button

       android:id="@+id/one"

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

       android:layout_alignParentLeft="true"

       android:layout_alignParentTop="true"

       android:text="01" />

   <Button

       android:id="@+id/two"

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

       android:layout_alignParentTop="true"

       android:layout_centerHorizontal="true"

       android:text="02" />

   <Button

       android:id="@+id/three"

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

       android:layout_alignParentTop="true"

       android:layout_alignParentRight="true"

       android:text="03" />

   <Button

       android:id="@+id/four"

       android:layout_width="50dp"

       android:layout_height="wrap_content"

       android:layout_alignParentLeft="true"

       android:layout_centerVertical="true"

       android:text="04" />

   <Button

       android:id="@+id/five"

       android:layout_width="50dp"

       android:layout_height="50dp"

       android:layout_centerHorizontal="true"

       android:layout_centerVertical="true"

       android:text="05" />

   <Button

       android:id="@+id/six"

       android:layout_width="50dp"

       android:layout_height="50dp"

       android:layout_alignParentRight="true"

       android:layout_centerVertical="true"

       android:text="06" />

   <Button

       android:id="@+id/seven"

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

       android:layout_alignParentLeft="true"

       android:layout_alignParentBottom="true"

       android:text="07" />

   <Button

       android:id="@+id/eight"

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

       android:layout_alignParentBottom="true"

       android:layout_centerHorizontal="true"

       android:text="08" />

   <Button

       android:id="@+id/nine"

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

       android:layout_alignParentRight="true"

       android:layout_alignParentBottom="true"

       android:text="09" />

   <Button

       android:id="@+id/ten"

       android:layout_width="50dp"

       android:layout_height="50dp"

       android:layout_below="@+id/five"

       android:layout_centerHorizontal="true"

       android:text="10" />

   <Button

       android:id="@+id/eleven"

       android:layout_width="50dp"

       android:layout_height="50dp"

       android:layout_above="@+id/five"

       android:layout_centerHorizontal="true"

       android:text="11" />

   <Button

       android:id="@+id/twelow"

       android:layout_width="50dp"

       android:layout_height="50dp"

       android:layout_centerVertical="true"

       android:layout_toLeftOf="@+id/five"

       android:text="12" />

   <Button

       android:id="@+id/thirteen"

       android:layout_width="50dp"

       android:layout_height="50dp"

       android:layout_centerVertical="true"

       android:layout_toRightOf="@+id/five"

       android:text="13" />

</RelativeLayout>