onlyMobilePro

You have understood the concept and usage of Linear Layout that we mentioned in previous article, which display UI elements in a single row or column, Frame Layout is one of the common types of layout used by Android developers. Much like other layout, Frame Layout also can be defined using either XML or programmatically in the Java code.

The Basic Idea Of Android Frame Layout

The Frame Layout allow us to display only a single UI element at a time, or multiple UI elements within Frame Layout but each element will be positioned based on the top left of the screen. You can often see this layout has been used in displaying image with caption overlapping on it. For example:

This is the example using Frame Layout to organize UI elements. As you can see from above, we have placing 3 UI elements within the Frame Layout. Since Frame Layout is only able to display single UI element at a time or multiple UI elements but each of them is overlapping on each others, so you can see that, the text “This is Frame Layout!!!” and “Learn Android Development At onlyMobilePro.com” is overlapping on the onlyMobilePro logo.

Now, let’s see how can we done this using Android’s XML vocabulary.

Creating XML Layout Resources

First of all, before we start creating our XML layout, please choose an image / icon that you wish to use as a background, and place it in /res/drawable-mdpi/ project directory.

OK, please open up your main.xml file, which located at /res/layout/ and write your XML as same as shown below:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 
	android:layout_width="fill_parent" 
	android:layout_height="fill_parent" 
	xmlns:android="http://schemas.android.com/apk/res/android">
	<ImageView 
		android:src="@drawable/onlymobilepro"
		android:scaleType="fitCenter"
		android:layout_height="fill_parent"
		android:layout_width="fill_parent"/>
	<TextView
		android:text="This is Frame Layout!!!"
		android:textSize="24px"
		android:textColor="#cc0000"
		android:layout_height="fill_parent"
		android:layout_width="fill_parent"
		android:gravity="top"/>
	<TextView
		android:text="Learn Android Development At onlyMobilePro.com"
		android:textSize="24px"
		android:textColor="#00dd00"
		android:layout_height="fill_parent"
		android:layout_width="fill_parent"
		android:gravity="center"/>
</FrameLayout>

Description

• Define the layout format to “FrameLayout”.
• Place the ImageView that holds the image that you have stored under /res/drawable-mdpi/ project directory. Please change the value of “android:src” to “@drawable/<your_file_name>“.
• Place 2 TextViews elements after the ImageView, so that both of the TextViews can be overlapped on top of the ImageView.
• Please be noted that, for this case, we have defined the attribute – “android:gravity” to appear on top and center fr both of the TextView elements.

The “android:gravity” is an attribute of TextView that used to specify how to align the text by the view’s x- and/or y-axis when the text is smaller than the view. Here is the available value that you can apply to it:

Constant	Value	Description
top	0×30	Push object to the top of its container, not changing its size.
bottom	0×50	Push object to the bottom of its container, not changing its size.
left	0×03	Push object to the left of its container, not changing its size.
right	0×05	Push object to the right of its container, not changing its size.
center_vertical	0×10	Place object in the vertical center of its container, not changing its size.
fill_vertical	0×70	Grow the vertical size of the object if needed so it completely fills its container.
center_horizontal	0×01	Place object in the horizontal center of its container, not changing its size.
fill_horizontal	0×07	Grow the horizontal size of the object if needed so it completely fills its container.
center	0×11	Place the object in the center of its container in both the vertical and horizontal axis, not changing its size.
fill	0×77	Grow the horizontal and vertical size of the object if needed so it completely fills its container.
clip_vertical	0×80	Additional option that can be set to have the top and/or bottom edges of the child clipped to its container’s bounds. The clip will be based on the vertical gravity: a top gravity will clip the bottom edge, a bottom gravity will clip the top edge, and neither will clip both edges.
clip_horizontal	0×08	Additional option that can be set to have the left and/or right edges of the child clipped to its container’s bounds. The clip will be based on the horizontal gravity: a left gravity will clip the right edge, a right gravity will clip the left edge, and neither will clip both edges.
start	0×00800003	Push object to the beginning of its container, not changing its size.
end	0×00800005	Push object to the end of its container, not changing its size.

Conclusion

The Android app’s user interface – Frame layout is one of the most common and fundamental layout types used. The Frame layout allows developers to display only a single or multiple UI elements within Frame Layout but each element will be positioned based on the top left of the screen, and elements that overlap will be displayed overlapping.

Previous Post Next Post