Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Implementing Different Basic Layouts in Android

In this article we will see the basic two layouts of android development. One is Liner Layout and the other is basic layout.

While creating a UI, you need a container to hold the views. These containers in Android are called view groups. View groups are views that have the ability to hold other views (child views) or view groups. The ViewGroup class is a subclass of the View class. It is the base class for all classes that are collectively called layouts. Layouts in Android provide a container to hold widgets in a specific manner. Android provides various layouts that can be used in an app. You have the flexibility to use several layouts in a tree structure that enables you to create a powerful UI.

Android Layouts have two categories: basic layout and advanced layout.

Android provides the following basic layouts:

  • Linear layout
  • Table layout

Each layout has certain attributes that you can use to customize the layout according to your requirements. Some common attributes of layouts are listed in the following table:

Attribute Name

Associated Methods

Description

Android:layout_width


Specifies the width of the layout with respect to its parents

Android:layout_height


Specifies the height of the layout with respect to its parents

Android:orientation

setGravity(int)

Specify the placement of a widget within the parent container. Some values that this attribute can take are: center, horizontal, top and bottom. For example, layout gravity bottom will place the widgets inside the layout at the bottom.

Using Linear Layout

The linear layout allows you to arrange widgets in a single row. The row can be horizontal or vertical; you can set the orientation manually using the android:orientation attribute. The default orientation of linear layout is horizontal. You can use linear layout in a hierarchal manner implementing nested layouts.

For example, you can create a UI similar to the one shown in the following figure using the linear layout:

Figure 1: The Linear Layout with Horizontal Orientation

In the preceding figure, there are four text views of different colors arranged horizontally in a single row. To create this UI, you need to use the linear layout, as shown in the following markup:

<LinearLayout xmlns:android="http:// schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:text="@string/red" android:textColor="#ffffff" android:textStyle="bold" android:gravity="center_horizontal" android:background="#aa0000" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_weight="1"/> 
  <TextView android:text="@string/green" android:textColor="#ffffff" android:textStyle="bold" android:gravity="center_horizontal" android:background="#00aa00" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_weight="1"/> 
  <TextView android:text="@string/blue" android:textColor="#ffffff" android:textStyle="bold" android:gravity="center_horizontal" android:background="#0000aa" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_weight="1"/> 
  <TextView android:text="@string/yellow" android:textColor="#ffffff" android:textStyle="bold" android:gravity="center_horizontal" android:background="#aaaa00" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_weight="1"/> 
  </LinearLayout>

Similarly, you can use the linear layout to create a UI similar to the one shown in the following figure:

Figure 2: The LinearLayout with Vertical Orientation

In the preceding figure, there are four text views of different colors arranged vertically one below the other.

In order to create the above UI, you can use the almost same markup that was used to create the linear layout in horizontal orientation. However, you need to make the few changes to this markup:

Change the value of the android: orientation attribute from horizontal to vertical.

Change the value of the android:width attribute from wrap_content to match_parent.

Change the value of the android:height attribute from match_parent to wrap_content.

The complete markup for vertical orientation is given bellow

<LinearLayout xmlns:android="http:// schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> 
  <TextView android:text="@string/red" android:textColor="#ffffff" android:textStyle="bold" android:gravity="center_horizontal" android:background="#aa0000" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1"/> 
  <TextView android:text="@string/green" android:textColor="#ffffff" android:textStyle="bold" android:gravity="center_horizontal" android:background="#00aa00" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1"/> 
  <TextView android:text="@string/blue" android:textColor="#ffffff" android:textStyle="bold" android:gravity="center_horizontal" android:background="#0000aa" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1"/> 
  <TextView android:text="@string/yellow" android:textColor="#ffffff" android:textStyle="bold" android:gravity="center_horizontal" android:background="#aaaa00" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1"/> 
  </LinearLayout>

Using Table Layout

This layout arranges its child views in rows and columns. Table row objects create rows that can hold widgets. The maximum number of columns in a table layout depends on a row sliced with maximum number of columns. For example, if in a table layout you have three rows and the first row has two columns, the second row has three columns, and the third row has four columns, the table layout will set the number of columns for all rows to four. Hence, all the rows in the table layout will now have four columns.

A table can leave columns empty. However, you can set a column as stretchable or shrinkable, which will shrink the table into its parent object or it will stretch it to fit any extra spaces. Also, to hide a column you can use the setColumnCollapsed()method.

For example, consider the UI for the menu activity as shown in the following figure:

Figure 3: The Table Layout in Menu Activity

In the preceding figure, there are six table rows acting as menu items. To create this UI, you need to use the table layout. The following markup can be used to create the preceding UI:

  <TableLayout xmlns:android="http:// schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:stretchColumns="1"> 
  <TableRow> <TextViewandroid:layout_column="1"android:text="@string/SoftDrink"android:padding="3dip" />
  <TextViewandroid:text="@string/LichyJuice"android:gravity="right"android:padding="3dip" /> 
  </TableRow>
   
   <TableRow> <TextViewandroid:layout_column="1"android:text="@string/HardDrink"android:padding="3dip" />
  <TextViewandroid:text="@string/RedWine"android:gravity="right"android:padding="3dip" /> 
  </TableRow> 
   
  <TableRow> <TextViewandroid:layout_column="1"android:text="@string/Sweets"android:padding="3dip" />
  <TextViewandroid:text="@string/IceCreams"android:gravity="right"android:padding="3dip" />
   </TableRow>
   <View android:layout_height="2dip"android:background="#FF909090" /> 
  <TableRow>
   <TextViewandroid:text="@string/Chocs"android:padding="3dip" />
  <TextViewandroid:text="@string/MilkyDairy"android:padding="3dip" />
  <TextViewandroid:text="@string/CreamyDairy"android:gravity="right"android:padding="3dip" /> 
  </TableRow>
   
   <TableRow>
   <TextViewandroid:text="@string/Fruits"android:padding="3dip" />
  <TextViewandroid:text="@string/Orange" android:padding="3dip" />
  <TextViewandroid:text="@string/Apple"android:gravity="right"android:padding="3dip" /> 
  </TableRow>
   <View android:layout_height="2dip"android:background="#FF909090" /> 
  <TableRow> <TextViewandroid:layout_column="1"android:text="@string/Exit"android:padding="3dip" />
   </TableRow> 
  </TableLayout> 

In the preceding markup, the <TableLayout>element contains the <TableRow>element and within the <TableRow>element the <TextView>elements are added that fill the columns. The <View>element adds a line of height 2dip, which acts as a separator. The android:gravityattribute is used to position the text (shortcut keys) specified with each menu item to the right of the screen.

Conclusion

Above two layouts are most commonly used layouts in android. Apart from these two layouts android also provides few advanced layouts. These layouts are Frame layout, Relative layout and Absolute layout.



Certified Trainer for Windows 8 Mobile App Development, IBM CE Project Trainer With IBM DB2, RAD, RSA, Certified Trainer for ZEND (PHP), Certified PHP and MySql trainer, Certified trainer of Diploma in Oracle 10g (DBA) as per Orac...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login