The Frame Layout Layout Manager

The layout managers that we've discussed implement various layout strategies. In other words, each one has a specific way that it positions and orients its children on the screen. With these layout managers, you can have many controls on the screen at one time, each taking up a portion of the screen. Android also offers a layout manager that is mainly used to display a single item. This layout manager is called the FrameLayout layout manager. You mainly use this utility layout class to dynamically display a single view, but you can populate it with many items, setting one to visible while the others are nonvisible. Listing 4-35 demonstrates using a FrameLayout.

Listing 4-35. Populating a FrameLayout <?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="" android:id="@+id/frmLayout" android:layout_width="fill_parent" android:layout_height="fill_parent">

<ImageView android:id="@+id/oneImgView" android:src="@drawable/one" android:scaleType="fitCenter" android:layout_width="fill_parent" android:layout_height="fill_parent"/> <ImageView android:id="@+id/twoImgView" android:src="@drawable/two" android:scaleType="fitCenter" android:layout_width="fill_parent" android:layout_height="fill_parent" android:visibility="gone" />


^Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedlnstanceState);


ImageView one = (ImageView)this.findViewByld(; ImageView two = (ImageView)this.findViewByld(;

one.setOnClickListener(new OnClickListener(){

^Override public void onClick(View view) {

ImageView two = (ImageView)FramelayoutActivity.this.


two.setVisibility(View.VISIBLE); view.setVisibility(View.GONE);

two.setOnClickListener(new OnClickListener(){

^Override public void onClick(View view) {

ImageView one = (ImageView)FramelayoutActivity. this.findViewById(;



Listing 4-35 shows the layout file as well as the onCreate() method of the activity. The idea of the demonstration is to load two ImageView objects in the FrameLayout, with only one of the ImageView objects visible at a time. In the UI, when the user clicks the visible image, we hide one image and show the other one.

Look at Listing 4-35 more closely now, starting with the layout. You can see that we define a FrameLayout with two ImageView objects (an ImageView is a control that knows how to display images). Notice that the second ImageView's visibility is set to gone, making the control invisible. Now look at the onCreate() method. In the onCreate() method, we register listeners to click events on the ImageView objects. In the click handler, we hide one ImageView and show the other one.

As we said earlier, you generally use the FrameLayout when you need to dynamically set the content of a view to a single control. Although this is the general practice, the control will accept many children, as we demonstrated. Listing 4-35 adds two controls to the layout but has one of the controls visible at a time. The FrameLayout, however, does not force you to have only one control visible at a time. If you add many controls to the layout, the FrameLayout will simply stack the controls, one on top of the other, with the last one on top. This can create an interesting UI. For example, Figure 4-19 shows a FrameLayout with two ImageView objects that are visible. You can see that the controls are stacked, and that the top one is partially covering the image behind it.

Another interesting aspect of the FrameLayout is that if you add more than one control to the layout, the size of the layout is computed as the size of the largest item in the container. In Figure 4-19, the top image is actually much smaller than the image behind it, but because the size of the layout is computed based on the largest control, the image on top is stretched.

Also note that if you put many controls inside a FrameLayout with one or more of them invisible to start, you might want to consider using setConsiderGoneChildrenWhenMeasuring(). Because the largest child dictates the layout size, you'll have a problem if the largest child is invisible to begin with. That is, when it becomes visible, it will be only partially visible. To ensure that all items get rendered properly, call setConsiderGoneChildrenWhenMeasuring() and pass it a boolean value of true.

Figure 4-19. A FrameLayout with two ImageView objects
+1 0

Post a comment