Android UI Tutorial: Layouts - SpartaCode

SpartaCode

Make your development faster and easier !

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


No comments:

Post a Comment

Get Amazing Traffic to your Site

Traffic Exchange

Post Bottom Ad

Responsive Ads Here