Android Frame Layout For Absolute Beginner

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:
Frame Layout 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 0x30 Push object to the top of its container, not changing its size.
bottom 0x50 Push object to the bottom of its container, not changing its size.
left 0x03 Push object to the left of its container, not changing its size.
right 0x05 Push object to the right of its container, not changing its size.
center_vertical 0x10 Place object in the vertical center of its container, not changing its size.
fill_vertical 0x70 Grow the vertical size of the object if needed so it completely fills its container.
center_horizontal 0x01 Place object in the horizontal center of its container, not changing its size.
fill_horizontal 0x07 Grow the horizontal size of the object if needed so it completely fills its container.
center 0x11 Place the object in the center of its container in both the vertical and horizontal axis, not changing its size.
fill 0x77 Grow the horizontal and vertical size of the object if needed so it completely fills its container.
clip_vertical 0x80 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 0x08 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 0x00800003 Push object to the beginning of its container, not changing its size.
end 0x00800005 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.

Comments

Popular posts from this blog

HOW TO REGISTER FOR SAFETOKEN

How To Get Help In MMM Nigeria - Mavrodi Mondial Moneybox