Android User Interface Design: Framework Layout

Frame layout is one of the simplest layout types to organize controls on the Android user interface.

Understanding the layout is very important for a good Android program design. In this tutorial, you will learn all about the framework layout, which is mainly used to organize special or overlapping View Controls on the screen. When used properly, many interesting Android user interfaces can be designed based on the Framework layout.

What is frame layout?

Framework layout is one of the simplest and most effective la s for Android Developers to organize View Controls. They are used less than some other la s, because they are generally only used to display a single view or overlapping view. The framework layout is often used as a container layout because it generally has only one sub-view (usually another layout, used to organize multiple views ).

Tip: in fact, you will see that the Framework layout is used as the parent layout of any layout resource you design. If you create your program in the Hierarchy Viewer tool, a useful tool for debugging your program layout, you will find that any layout resource you design is displayed in a parent Layout-a framework layout.

The framework layout is very simple, which makes them very efficient. They can be defined in the XML layout resource file or in the program using Java code. A child view in the frame layout is always drawn to the upper left corner of the screen relative to the screen. If multiple sub-views exist, they are drawn in the order of one stacked on the other. This means that the first view added to the Framework layout will be displayed at the bottom of the stack, and the last view added will be displayed at the top.

Let's look at a simple example. Let's assume that there is a frame layout size adjusted to control the entire screen (in other words, the layout_width and layout_height attributes are set to match_parent ). We need to add three child controls to the Framework layout:

An ImageView with a lake image.

A TextView displayed at the top of the screen.

A TextView displayed at the bottom of the screen (sink TextView to the bottom of the parent layout using the layout_gravity attribute.

This type of layout is displayed on the screen:

Define the framework layout in the XML resource file

The most convenient and maintainable way to design a program user interface is to create XML layout resources. This method greatly simplifies the UI design process, and moves the layout of many static creation and user interface controls, as well as the definition of control attributes, to XML to replace code writing.

XML layout resources must be stored in the/res/layout project directory. Let's take a look at the framework layout described in the previous section. Similarly, the screen is basically a frame layout with three sub-views: an image filled with the entire screen, two text controls are drawn on it, and each text control is transparent by default. The layout resource file is named/res/layout/framed. xml, as defined in XML:

 
 

  
  
xmlns:android="http://schemas.android.com/apk/res/android" 
  
  
 
  
  
android:layout_width="fill_parent" 
  
  
 
  
  
android:layout_height="fill_parent"> 
  
  
 
  
  
android:id="@+id/ImageView01" 
  
  
 
  
  
android:layout_height="fill_parent" 
  
  
 
  
  
android:layout_width="fill_parent" 
  
  
 
  
  
android:src="@drawable/lake" 
  
  
 
  
  
android:scaleType="matrix"> 
  
  
 
  
  
android:layout_width="fill_parent" 
  
  
 
  
  
android:layout_height="wrap_content" 
  
  
 
  
  
android:textColor="#000" 
  
  
 
  
  
android:textSize="40dp" 
  
  
 
  
  
android:text="@string/top_text" /> 
  
  
 
  
  
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" /> 
 
 

Recall that in Activity, you only need to add a line of code in the onCreate () method to load and display layout resources on the screen. If layout resources are stored in the/res/layout/framed. xml file, this line of code should be:

 
 

  
  
setContentView(R.layout.framed); 
 
 

Define framework layout with programs

You can also use the program to create and configure the framework layout. This is achieved by using the FrameLayout class (android. widget. FrameLayout. You will find the specific parameters in the RelativeLayout. LayoutParams class. Similarly, typical layout parameters (android. view. ViewGroup. LayoutParams), such as layout_height and layout_width, And the margin parameters (ViewGroup. MarginLayoutParams) can also be used on FrameLayout objects.

You must use Java to create screen content, and then provide the setContentView () method with a parent layout object containing all the control content to be displayed as the Child view, instead of using setContentView () directly as shown above () method To load layout resources. Here, your parent layout is the framework layout. For example, the following code shows how to use a program to recreate the same layout described above. In particular, we instantiate a FrameLayout in the activity and add an ImageView control in its onCreate () method before adding two TextView controls:

 
 

  
  
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 final screen running result is exactly the same as that shown in the preceding figure.

When to use the framework Layout

When you are free to use other powerful layout types, such as linear layout, relative layout, and table layout, you can easily forget the frame layout. The efficiency of frame layout makes it a good choice for screens with few View Controls (the main screen, the game interface with only one canvas ). In some cases, other inefficient layout designs can be simplified to a more efficient framework layout design, while other la s that are more specialized will be appropriate. When you want to stack a view, the Framework layout is a general choice.

Look at similar controls

FrameLayout is relatively simple. Because of this, many other layout types and view controls are based on it. For example, ScrollView is a frame layout with a scroll bar when the sub-content is too large to be fully displayed within the layout boundary. All the Home screen application gadgets are in a frame layout.

For all frame la S, you must note that they can set the foreground color in addition to the general background. This is implemented through the android: foreground XML Attribute. This can also be used in the view under the framework.

Summary

The Android program UI is defined by layout. The framework layout is one of the simplest and most efficient layout types. The child widget of the frame layout is drawn relative to the upper left corner of the layout. If multiple child views exist in the frame layout, they are drawn sequentially, And the last child control is drawn at the top.

Source