Advertisement
Android SDK

Android User Interface Design: Frame Layouts

by

Frame layouts are one of the simplest layout types used to organize controls within the user interface of an Android application.

Understanding layouts is important for good Android application design. In this tutorial, you learn all about frame layouts, which are primarily used to organize individual or overlapping view controls on the screen. When used correctly, frame layouts can be the fundamental layout upon which many interesting Android application user interfaces can be designed.

What Is A Frame Layout?

Frame layouts are one of the simplest and most efficient types of layouts used by Android developers to organize view controls. They are used less often than some other layouts, simply because they are generally used to display only one view, or views which overlap. The frame layout is often used as a container layout, as it generally only has a single child view (often another layout, used to organize more than one view).

TIP: In fact, one place you’ll see frame layouts used is as the parent layout of any layout resource you design. If you pull up your application in the Hierarchy Viewer tool (a useful tool for debugging your application layouts), you’ll see that any layout resources you design are displayed within a parent view-a frame layout.

Frame layouts are very simple, which makes them very efficient. They can be defined within XML layout resources or programmatically in the application's Java code. A child view within a frame layout is always drawn relative to the top left-hand corner of the screen. If multiple child views exist, then they are drawn, in order, one atop the other. This means that the first view added to the frame layout will display on the bottom of the stack, and the last view added will display on top.

Let’s look at a simple example. Let’s say we have a frame layout that is sized to control the entire screen (in other words, layout_width and layout_height attributes are both set to match_parent). We could then add three child controls to this frame layout:

  • An ImageView with a picture of a lake.
  • A TextView with some text to display towards the top of the screen.
  • A TextView with some text to display towards the bottom of the screen (Simply use the layout_gravity attribute to have the TextView “sink” to the bottom of the parent).

The following figure shows what this sort of layout would look like on the screen.

Frame Layout Figure 1

Defining an XML Layout Resource with a Frame Layout

The most convenient and maintainable way to design application user interfaces is by creating XML layout resources. This method greatly simplifies the UI design process, moving much of the static creation and layout of user interface controls and definition of control attributes, to the XML, instead of littering the code.

XML layout resources must be stored in the /res/layout project directory hierarchy. Let’s take a look at the simple frame layout introduced in the previous section. Again, this screen is basically a frame layout with three child views: an image that fills the entire screen, upon which two text controls are drawn, each with the default, transparent background. This layout resource file, named /res/layout/framed.xml, is defined in XML as follows:

 
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <ImageView
        android:id="@+id/ImageView01"
        android:layout_height="fill_parent"
        android:layout_width="fill_parent"
        android:src="@drawable/lake"
        android:scaleType="matrix"></ImageView>
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textColor="#000"
        android:textSize="40dp"
        android:text="@string/top_text" />
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/bottom_text"
        android:layout_gravity="bottom"
        android:gravity="right"
        android:textColor="#fff"
        android:textSize="50dp" />
</FrameLayout>

Recall that, from within the Activity, only a single line of code within the onCreate() method is necessary to load and display a layout resource on the screen. If the layout resource was stored in the /res/layout/framed.xml file, that line of code would be:

 
setContentView(R.layout.framed);

Defining a Frame Layout Programmatically

You can also programmatically create and configure frame layouts. This is done using the FrameLayout class (android.widget.FrameLayout). You’ll find the frame-specific parameters in the FrameLayout.LayoutParams class. Also, the typical layout parameters (android.view.ViewGroup.LayoutParams), such as layout_height and layout_width, as well as margin parameters (ViewGroup.MarginLayoutParams), still apply to FrameLayout objects.
Instead of loading a layout resource directly using the setContentView() method as shown earlier, you must instead build up the screen contents in Java and then supply a parent layout object which contains all the control contents to display as child views to the setContentView() method. In this case, your parent layout would be the frame layout.
For example, the following code illustrates how to reproduce the same layout described earlier programmatically. Specifically, we have an Activity instantiate a FrameLayout and place one ImageView control followed by two TextView controls within it in its onCreate() method:

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    TextView tv1 = new TextView(this);
    tv1.setText(R.string.top_text);
    tv1.setTextSize(40);
    tv1.setTextColor(Color.BLACK);

    TextView tv2 = new TextView(this);
    tv2.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT, Gravity.BOTTOM));
    tv2.setTextSize(50);
    tv2.setGravity(Gravity.RIGHT);
    tv2.setText(R.string.bottom_text);
    tv2.setTextColor(Color.WHITE);

    ImageView iv1 = new ImageView(this);
    iv1.setImageResource(R.drawable.lake);
    iv1.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
    iv1.setScaleType(ScaleType.MATRIX);

    FrameLayout fl = new FrameLayout(this);
    fl.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
    fl.addView(iv1);
    fl.addView(tv1);
    fl.addView(tv2);
    setContentView(fl);
}

The resulting screen looks exactly the same as the figure shown previously.

When to Use Frame Layouts

With other powerful layout types like linear layouts, relative layouts, and table layouts at your disposal, it’s easy to forget about frame layout. The efficiency of a frame layout makes it a good choice for screens containing few view controls (home screens, game screens with a single canvas, and the like). Sometimes other inefficient layout designs can be reduced to a frame layout design that is more efficient, while other times a more specialized layout type is appropriate. Frame layouts are the normal layout of choice when you want to overlap views.

Looking at Similar Controls

FrameLayout is relatively simple. Because of this, numerous other layout types and view controls are based upon it. For instance, ScrollView is simply a FrameLayout that has scrollbars when the child content is too large to draw within the bounds of the layout. All Home screen app widgets reside within a FrameLayout.
One notable addition to all FrameLayouts is that they can take a foreground drawable in addition to the normal background. This is done via the android:foreground XML attribute. This could be used for, quite literally, a frame around the underlying views.

Conclusion

Android application user interfaces are defined using layouts, and frame layouts are one of the simplest and most efficient layout types available. The child control(s) of a frame layout are drawn relative to the top left-hand corner of the layout. If multiple child views exist within the frame layout, they are drawn in order, with the last child view on top.

About the Authors

Mobile developers Lauren Darcey and Shane Conder have coauthored several books on Android development: an in-depth programming book entitled Android Wireless Application Development and Sams TeachYourself Android Application Development in 24 Hours. When not writing, they spend their time developing mobile software at their company and providing consulting services. They can be reached at via email to androidwirelessdev+mt@gmail.com, via their blog at androidbook.blogspot.com, and on Twitter @androidwireless.

Need More Help Writing Android Apps? Check out our Latest Books and Resources!

Buy Android Wireless Application Development, 2nd Edition  Buy Sam's Teach Yourself Android Application Development in 24 Hours  Mamlambo code at Code Canyon

Related Posts
  • Code
    Android SDK
    Create a Music Player on Android: Project Setup0d63m preview image@2x
    The Android platform provides resources for handling media playback, which your apps can use to create an interface between the user and their music files. In this tutorial series, we will create a basic music player application for Android. The app will present a list of songs on the user device, so that the user can select songs to play. The app will also present controls for interacting with playback and will continue playing when the user moves away from the app, with a notification displayed while playback elapses.Read More…
  • Code
    Android SDK
    Using the Accelerometer on Android06lom preview image@2x
    In this tutorial, we are going to explore how to use the accelerometer, one of the many hardware sensors of modern smartphones, in an Android application. I'll explain what an accelerometer is and why it may be something you want to take advantage of in your Android applications.Read More…
  • Code
    Android SDK
    Create a Hangman Game: User InterfaceAndroid hangman game preview retina
    In this series, we are creating a Hangman game for the Android platform. In the first tutorial, we set the application up to present two screens to the user and we also made a start with the user interface elements, the images and shape drawables to be precise. In the second tutorial, we will zoom in on the game's layout.Read More…
  • Code
    Android SDK
    Create a Hangman Game: Project SetupAndroid hangman game preview retina
    In this series, I will show you how to create a simple Hangman game for Android. In every tutorial, you'll learn a number of fundamental skills for creating Android applications. The application will consist of two screens, include user interaction involving adapters, contain dialogs and an action bar, and leverage XML for data storage. Let's get started.Read More…
  • Code
    Android SDK
    Android SDK: Detecting GesturesAndroid preview@2x
    The Android SDK supports a variety of gestures you can detect, allowing you to tailor the ways in which users interact with your applications. In this tutorial, we will look at the framework that allows developers to add gesture detection to a simple application, working through the process of supporting the fling gesture and outlining how to support other gestures. Once you've completed the development for a basic fling function, you'll be able to add additional gestures to the application yourself.Read More…
  • Code
    Android SDK
    Android SDK: User Interface DesignAndroid preview@2x
    In this series we're learning about Android SDK development from scratch! In this tutorial, we will build a simple user interface layout with a few visual elements.Read More…