Android UI Tutorial: Layouts

Layouts

• LinearLayout
• RelativeLayout

Linear Layout

We can start basically with a linear layout on the top, which is a container for everything. And then we put an ImageView on the top of the LinearLayout, in which it has an option to lay its children horizontally or vertically so you can specify and attribute. Then we can put two text views, one below each other, inside a linear layout with a vertical orientation.

One of the best practices to make a layout is to minimize the number of views it has, especially if it’s something that’s going to appear over and over again. We want it to make the hierarchy as shallow as possible.

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" android:layout_height="fill_parent"
    android:orientation="vertical">
    <TextView android:text="RED" android:id="@+id/TextView01"
        android:layout_height="wrap_content" android:background="#f00"
        android:layout_width="fill_parent" android:layout_weight=".14"
        android:gravity="center" android:textColor="#000"></TextView>
    <TextView android:text="ORANGE" android:id="@+id/TextView02"
        android:layout_height="wrap_content" android:layout_width="fill_parent"
        android:layout_weight=".15" android:background="#ffa500"
        android:gravity="center" android:textColor="#000"></TextView>
    <TextView android:text="YELLOW" android:id="@+id/TextView03"
        android:layout_height="wrap_content" android:layout_width="fill_parent"
        android:layout_weight=".14" android:background="#ffff00"
        android:gravity="center" android:textColor="#000"></TextView>
    <TextView android:text="GREEN" android:id="@+id/TextView04"
        android:layout_height="wrap_content" android:layout_width="fill_parent"
        android:layout_weight=".15" android:background="#0f0" android:gravity="center"
        android:textColor="#000"></TextView>
    <TextView android:text="BLUE" android:id="@+id/TextView05"
        android:layout_height="wrap_content" android:layout_width="fill_parent"
        android:layout_weight=".14" android:background="#00f" android:gravity="center"
        android:textColor="#fff"></TextView>
    <TextView android:text="INDIGO" android:id="@+id/TextView06"
        android:layout_height="wrap_content" android:layout_width="fill_parent"
        android:layout_weight=".14" android:background="#4b0082"
        android:gravity="center" android:textColor="#fff"></TextView>
    <TextView android:text="VIOLET" android:id="@+id/TextView07"
        android:layout_height="wrap_content" android:layout_width="fill_parent"
        android:layout_weight=".14" android:background="#ee82ee"
        android:gravity="center" android:textColor="#000"></TextView>
</LinearLayout>

OUTPUT

Relative Layout

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

            xmlns:tools="http://schemas.android.com/tools"

            android:layout_width="fill_parent"

            android:layout_height="fill_parent"

            tools:context=".RelativeLayoutAndroidExample" >

        

                    <TextView

                        android:id="@+id/text1"

                        android:layout_width="wrap_content"

                        android:layout_height="wrap_content"

                        android:layout_centerHorizontal="true"

                        android:layout_centerInParent="false"

                        android:text="LOGIN"

                        android:layout_marginTop="14dp"

                        android:textAppearance="?android:attr/textAppearanceLarge"

                        />

                 

                     <TextView

                         android:id="@+id/textView1"

                         android:layout_width="wrap_content"

                         android:layout_height="wrap_content"

                         android:layout_below="@+id/text1"

                         android:layout_marginTop="20dp"

                         android:text="Username :"

                         android:textAppearance="?android:attr/textAppearanceLarge" />

                 

                     <EditText

                         android:id="@+id/editText1"

                         android:layout_width="wrap_content"

                         android:layout_height="wrap_content"

                         android:layout_alignParentRight="true"

                         android:layout_alignTop="@+id/textView1"

                         android:layout_toRightOf="@+id/textView1"

                         />

                     

                     <TextView

                         android:id="@+id/textView2"

                         android:layout_width="wrap_content"

                         android:layout_height="wrap_content"

                         android:layout_below="@+id/textView1"

                         android:layout_marginTop="20dp"

                         

                         android:text="Password :"

                         android:textAppearance="?android:attr/textAppearanceLarge" />

                 

                     <EditText

                         android:id="@+id/editText2"

                         android:layout_width="wrap_content"

                         android:layout_height="wrap_content"

                         android:layout_alignParentRight="true"

                         android:layout_alignTop="@+id/textView2"

                         android:layout_toRightOf="@+id/textView2"

                         android:inputType="textPassword"

                         />

                 

                     <Button

                         android:id="@+id/btnSubmit"

                         android:layout_width="wrap_content"

                         android:layout_height="wrap_content"

                         android:layout_alignParentLeft="false"

                         android:layout_below="@+id/editText2"

                         android:layout_centerInParent="true"

                         android:text="Submit" />

                         

                         

                       <Button

                         android:layout_width="wrap_content"

                         android:layout_height="wrap_content"

                         android:layout_alignParentBottom="true"

                         android:text="SIGNUP"

                         android:layout_centerHorizontal="true"/>

        

</RelativeLayout>

OUTPUT