• Have Any Question?
  • contact@eitworld.com

Types of Android Layout





There are several layouts available to develop the android application. Android layouts are as follows:

Absolute Layout:

    • It is used place the elements or controls at an absolute position.
    • In this layout, we have to specify the x coordinate and y coordinate values for the each control.
    • In android development, it is not recommended to use because this layout uses the absolute position to place the elements so that it creates the very flexible user interface which is more difficult to manage or maintain and we have to shift each control if we are placing the new control.
    • Below is the demo example of the absolute layout:
<AbsoluteLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”>

<Button
android:layout_width=”100dp”
android:layout_height=”wrap_content”
android:text=”OK”
android:layout_x=”50px”
android:layout_y=”361px” />
<Button
android:layout_width=”100dp”
android:layout_height=”wrap_content”
android:text=”Cancel”
android:layout_x=”225px”
android:layout_y=”361px” />

<TextView
android:id=”@+id/textView1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_x=”51dp”
android:layout_y=”106dp”
android:text=”this is absolute layout”
android:textAppearance=”?android:attr/textAppearanceLarge” />

</AbsoluteLayout>

    • The screen looks like as follows:

android-layout

Frame Layout:

    • In android, frame layout is used to place a single item at a time on the screen.
    • We can have more than one items within the frame layout but in this case, each element will be positioned based on the top lest on the screen.
    • In some case, elements can be overlapped then when application launch then it also displayed as overlapped.
    • Below is the example of the frame layout:
<FrameLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”>

<TextView
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:gravity=”left”
android:text=”Example of Fremelayout”
android:textSize=”30px”
android:textStyle=”bold” />

<ImageView
android:layout_width=”250px”
android:layout_height=”250px”
android:scaleType=”fitEnd”
android:src=”@drawable/ic_launcher”
android:layout_marginTop=”50dp”
android:layout_marginLeft=”50dp” />
</FrameLayout>

    • The activity or screen looks like as follows:

android-layout

  • This layout is very useful when the controls are hidden and we want to display the controls dynamically on the screen.
  • We can use the android:visibility attribute to hide the particular control.
  • We can perform this thing by code just calling the setVsisbility.
  • There are three availability : visible, invisible means it does not display on screen but take place in layout, and gone means it does not display and does not take place in layout.

Linear Layout:

    • Linear layout is used to organize the elements along a single line.
    • We can define the line either horizontal or vertical using the android:orientation attribute.
    • In simple words, linear layout is used to place the elements in one direction either vertical or horizontal.
    • If direction of layout is vertical then one column can have only one element.
    • If direction of layout is horizontal then one row can have only one element.
    • We can set the priority for the particular element, it is called as weight and it is defined by the android:layout_weight attribute.
    • If any element has weight then that element will cover the space on screen according to given space.
    • Below is the simple demo example of the linear layout:
    • <LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
      xmlns:tools=”http://schemas.android.com/tools”
      android:layout_width=”match_parent”
      android:layout_height=”match_parent”
      android:orientation=”vertical”
      tools:context=”.LinearLayout” >

      <Button
      android:text=”BUTTON”
      android:layout_width=”wrap_content”
      android:layout_height=”wrap_content”
      />

      <TextView
      android:layout_width=”wrap_content”
      android:layout_height=”wrap_content”
      android:text=”Text 1″
      android:paddingTop=”10px”/>

      <TextView
      android:layout_width=”wrap_content”
      android:layout_height=”wrap_content”
      android:text=”Text 2″
      android:paddingTop=”10px”/>

      <TextView
      android:layout_width=”wrap_content”
      android:layout_height=”wrap_content”
      android:text=”Text 3″
      android:paddingTop=”10px”/>

      </LinearLayout>

    • It looks like as follows:

android-layout

    • the mixed example means horizontal and vertical both as follows:
<LinearLayout 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”
android:layout_gravity=”center”
android:orientation=”vertical”
tools:context=”.LinearLayout” >

<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_gravity=”center”
android:paddingLeft=”10px”
android:paddingTop=”20px”
android:text=”LOGIN” />
<LinearLayout
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:orientation=”horizontal”
android:paddingTop=”20px”>

<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:paddingLeft=”10px”
android:paddingTop=”20px”
android:text=”Username” />

<EditText
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_weight=”0.50″
android:layout_marginLeft=”40px”
android:paddingTop=”20px” />

</LinearLayout>

<LinearLayout
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:orientation=”horizontal”
android:paddingTop=”20px”
>
<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Password”
android:paddingTop=”20px”
android:paddingLeft=”10px”/>

<EditText
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_gravity=”center_horizontal”
android:layout_marginLeft=”40px”
android:layout_weight=”0.50″
android:paddingTop=”20px” />

</LinearLayout>

<Button
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_gravity=”center”
android:paddingLeft=”20px”
android:paddingTop=”10px”
android:text=”BUTTON” />

</LinearLayout>

    • It looks like as follows:

android-layout

Relative layout:

    • It is used to display the view elements at the relative position.
    • Each view element can be place based on the relationship with another and its parent container.
    • We can define the position of new view in the relation of the current view.
    • Relative layout provides the several attributes to set the position of the elements on the screen.
    • Android:layout_alignParentTop: if its value is true then that element will placed on the top of the screen.
    • Android:layout_centerVertical: if its value is true then that element is display vertically center on the screen.
    • Android:layout_below: it places the element below the specified element.
    • Example of this as follows:
<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”
xmlns:tools=”http://schemas.android.com/tools”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:paddingBottom=”@dimen/activity_vertical_margin”
android:paddingLeft=”@dimen/activity_horizontal_margin”
android:paddingRight=”@dimen/activity_horizontal_margin”
android:paddingTop=”@dimen/activity_vertical_margin”
tools:context=”.MainActivity” >

<Button
android:id=”@+id/button1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_below=”@+id/textView1″
android:layout_centerHorizontal=”true”
android:layout_marginTop=”124dp”
android:text=”Button” />

<TextView
android:id=”@+id/textView1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_alignParentTop=”true”
android:layout_alignRight=”@+id/button1″
android:layout_marginTop=”18dp”
android:text=”eitworld.com” />

</RelativeLayout>

    • It looks like as follows:

android-layout

Table layout:

    • It is used to organize the content in the form of row and column.
    • The rows are defined in the android layout XML and the columns are defined by the android system automatically.
    • For example, if we had a row with two elements and a row with five elements then we would have the layout of two rows and five columns.
    • One element can occupy more than one column with the help of android_layout_span attribute.
    • In android, each element is placed in unused column in the row.
    • Example is shown below:
<TableLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”>

<TableRow
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”>
</TableRow>
<TableRow>

<TextView android:text=”First Name”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_column=”1″ />
<EditText
android:width=”200px”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content” />
</TableRow>

<TableRow>

<TextView
android:text=”Last Name”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_column=”1″ />
<EditText
android:width=”100px”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content” />
</TableRow>
<TableRow
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”>
</TableRow>

<TableRow
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”/>

<TableRow
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”>

<Button
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Submit”
android:id=”@+id/button”
android:layout_column=”2″ />
</TableRow>

</TableLayout>

    • It looks like as follows:

android-layout



Real Time Web Analytics