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 Advanced Layouts in Android

This Article explains about the all the advanced layouts of android widget placement.

As of now we have learned how to implement basic layouts in Android. In this article I have mention all the advanced layouts in android. Following are the advanced layouts of android:

  • Frame Layout
  • Relative Layout
  • Absolute Layout
  • Nested Layout

Using Frame Layout

This layout is used to add views in a stack format, one item over another. The position of items is set using android:gravityattribute. The size of the layout depends upon the size of the largest view. The most recently placed view is placed over older views.

For example, the Android UI shown in the following figure is created using the frame layout:

Figure 1 : The Frame Layout Containing Images

In the preceding figure, there are three images lying one over another. The following markup can be used to create the preceding UI:

  <FrameLayout xmlns:android="http:// schemas.android.com/apk/res/android" android:id="@+id/frameLayout1" android:layout_width="fill_parent" android:layout_height="fill_parent" > 
  <ImageView android:src="@drawable/map" android:id="@+id/imageView1" android:layout_height="wrap_content" android:layout_width="match_parent"> </ImageView> 
  <ImageView android:layout_width="wrap_content" android:src="@drawable/android" android:id="@+id/imageView1" android:layout_height="wrap_content" android:layout_gravity="bottom"> </ImageView>
   <ImageView android:layout_width="wrap_content" android:src="@drawable/images" android:id="@+id/imageView3" android:layout_height="wrap_content" android:layout_gravity="center"> </ImageView> 
  </FrameLayout>

In the preceding markup, three image views are added to the frame layout. To position the images android:layout_gravity default, the images are positioned at the top left of the layout. To position the second image at the bottom of the layout, the attribute, android:layout_gravity="bottom",has been used. In a frame layout, the last added item is always at the top of other items.

Using Relative Layout

In this layout, views are positioned relatively to their neighbors or parent. Views are added to the layout in positions around the parent or other views. In addition, relative layout is the default layout for an app. For example, consider the UI shown in the following figure:

Figure 2 : The Form Designed in Relative Layout

In the preceding figure, there are four widgets added in positions relative to one another. The following markup can be used to create the preceding UI:

  <RelativeLayout xmlns:android="http:// schemas.android.com/apk/res/android" android:id="@+id/relativeLayout1" android:layout_width="fill_parent" android:layout_height="fill_parent"> 
  <TextView android:id="@+id/textView1" android:layout_height="wrap_content" android:text="@string/name" android:textSize="20sp" android:layout_alignParentLeft="true" android:layout_width="match_parent"> </TextView> 
  <EditText android:layout_height="wrap_content" android:id="@+id/editText1" android:layout_below="@+id/textView1" android:layout_alignLeft="@+id/ textView1" android:layout_alignRight="@+id/ textView1" android:layout_width="match_parent" android:hint="@string/reminder"> </EditText>
   <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/button1" android:text="@string/Save" android:layout_below="@+id/editText1" android:layout_alignRight="@+id/ editText1"> </Button> 
  <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/button2" android:text="@string/Cancel" android:layout_toLeftOf="@+id/button1" android:layout_alignTop="@+id/button1" android:layout_alignBottom="@+id/ button1"> </Button> 
  </RelativeLayout>

The EditText widget is added at the bottom of the TextView widget, as specified by the following attribute: android:layout_below="@+id/textView1", Also, the left and right edges of the EditText widget are aligned with the left and right edges of the TextView widget, as specified by the following attributes: android:layout_alignLeft="@+id/ textView1" android:layout_alignRight="@+id/ textView1"

Similarly, the Save button is added at the bottom right of EditText widget with its right edge aligned with the EditText widget, as specified by the following attributes:

android:layout_below="@+id/ editText1"android:layout_alignRight="@ +id/editText1"

Similarly, the Cance lbutton is added to the left of the Save button with its top and bottom edges aligned with those of the Savebutton, as specified by the following attributes:

android:layout_toLeftOf="@+id/ button1"android:layout_alignTop="@+id/ button1", android:layout_alignBottom="@+id/ button1"

Using Absolute Layout

If you want to specify the exact position of views on a layout, you can use the absolute layout. Absolute layout is not recommended because you may not want to develop an application for a specific screen resolution and size. This layout is the least flexible among all the available layouts. For example, consider the UI in the following figure.

Figure 3 : The Absolute Layout Containing Some Widgets

In the preceding figure, there are four widgets added in absolute positions. The following markup can be used to create the preceding UI:

  <AbsoluteLayout android:id="@+id/ absoluteLayout1" android:layout_width="fill_parent"android:layout_height="fill_parent"xmlns:android="http://schemas.android.com/apk/res/android">
  <Button android:id="@+id/button1"android:layout_width="wrap_content"android:text="Button 1"android:layout_height="wrap_content"android:layout_x="117dp"android:layout_y="195dp">
  </Button> 
  <TextView android:layout_width="wrap_content"android:id="@+id/textView1"android:text="Simple Text"android:layout_x="44dp"android:layout_height="wrap_content"android:layout_y="69dp">
  </TextView>
  <Button android:id="@+id/button2"android:layout_width="wrap_content"android:text="Button 2"android:layout_x="175dp" android:layout_height="wrap_content"android:layout_y="282dp"></Button>
  <Button android:id="@+id/button3"android:layout_width="wrap_content"android:text="Button 3"android:layout_x="37dp"android:layout_height="wrap_content"android:layout_y="354dp">
  </Button>
  </AbsoluteLayout>

In the preceding markup, the TextView widget is added at position specified by the android:layout_x="44dp"and android:layout_y="69dp" attributes where 44dpand 69dpare the positions of top left corner of the TextView widget.

Similarly, all other elements are placed in absolute positions using the android:layout_x and android:layout_y attributes.

Using Nested Layouts

Consider the UI shown in the following figure:

Figure 4 : The User Login Activity UI

To create this kind of UI, you need to use different layouts for different parts of the interface. These layouts can then be nested inside another layout.

The following markup can be used to create the preceding UI:

  <LinearLayout xmlns:android="http:// schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical">
   <LinearLayout android:layout_height="wrap_content" android:id="@+id/linearLayout1" android:layout_width="match_parent" android:orientation="horizontal">
   <TextView android:text="@string/User" android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content"> </TextView> 
  <EditText android:layout_height="wrap_content" android:id="@+id/editText1"android:layout_width="match_parent"android:hint="@string/UserName"></EditText> 
  </LinearLayout> 
   
  <LinearLayout android:layout_height="wrap_content" android:id="@+id/linearLayout2" android:layout_width="match_parent" android:orientation="horizontal">
   <TextView android:id="@+id/textView2" android:text="@string/UserType"android:layout_width="wrap_content"android:layout_weight=".5"android:layout_height="match_parent"android:gravity="center|left"> </TextView>
   <RadioGroup android:layout_height="wrap_content" android:layout_width="wrap_content"android:id="@+id/radioGroup1"android:layout_weight="1">
  <RadioButton android:text="@string/ WebMaster" android:id="@+id/radio0"android:layout_height="wrap_conten t" android:layout_width="wrap_content " android:checked="true">
  </ RadioButton>
   <RadioButton android:text="@string/ WebsiteAdmin" android:id="@+id/radio1"android:layout_height="wrap_conten t" android:layout_width="wrap_content "> 
  </RadioButton> 
  </RadioGroup>
  </LinearLayout>
   <LinearLayout android:layout_height="wrap_content" android:id="@+id/linearLayout3" android:layout_width="match_parent" android:orientation="horizontal"> 
  <TextView android:text="@string/ Password" android:id="@+id/textView3"android:layout_width="wrap_content"android:layout_height="wrap_content" > </TextView>
   <EditText android:layout_height="wrap_content" android:id="@+id/editText2"android:layout_width="match_parent"android:inputType="textPassword"> </EditText> 
  </LinearLayout> 
  <LinearLayout android:layout_height="wrap_content" android:background="#686464" android:id="@+id/linearLayout4" android:layout_width="match_parent" android:orientation="horizontal"> 
  <Button android:layout_height="wrap_content" android:layout_weight="1" android:id="@+id/button1" android:layout_width="wrap_content"android:text="@string/Login"> </Button> 
  <Button android:layout_height="wrap_content" android:layout_weight="1" android:id="@+id/button2" android:layout_width="wrap_content"android:text="@string/Exit"> </Button>
   </LinearLayout>
   </LinearLayout>

Conclusion

This is all about the layouts of androids. All together androids have Frame Layout, Relative Layout, Absolute Layout, Nested Layout, Linear layout & Table layout. My next article will come up with more interesting implementation of androids.



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