Understanding Frame Layout in Android

Understanding Frame Layout in Android

In today’s tutorial we are going to learn how to use Frame layout in android application development. If you are more interested in other android UI layout, you can read our extensive post on android layout here.

So what is Frame Layout in android and how to use it?

According to android documentation, “FrameLayout is designed to block out an area on the screen to display a single item. Generally, FrameLayout should be used to hold a single child view, because it can be difficult to organize child views in a way that’s scalable to different screen sizes without the children overlapping each other. You can, however, add multiple children to a FrameLayout and control their position within the FrameLayout by assigning gravity to each child, using the android:layout_gravity attribute.

Child views are drawn in a stack, with the most recently added child on top. The size of the FrameLayout is the size of its largest child (plus padding), visible or not (if the FrameLayout’s parent permits). Views that are GONE are used for sizing only if setConsiderGoneChildrenWhenMeasuring() is set to true”.

Frame layout is one of the simplest layouts in android and it is rarely use in android application development. Since it is basically created to contain one child view, it can be employed in different page that does not need complex Views like intro page of a game and home screen of applications. In addition to the above stated uses, Frame layout comes in handy when you want to overlay a View over another View. With the help of a stack Views you can create animation effect similar to sliding panel in android.

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.

Frame layout can be created in android application development by using the XML layout resource file or programmatically. We are going to exploit these two methods to demonstrate how Frame layout can be use.

Frame layout like other layouts in android has its own attributes. A list of some of the attributes is listed below.

android:foreground – Defines the drawable to draw over the content.

android:foregroundGravity – Defines the gravity to apply to the foreground drawable.

android:foregroundTint – Tint to apply to the foreground.

android:foregroundTintMode – Blending mode used to apply the foreground tint.

android:measureAllChildren – Determines whether to measure all children or just those in the VISIBLE or INVISIBLE state when measuring.

With the information we have now about Frame layout we can go ahead and create a new android project to demonstrate an example of Frame layout. The project will contain two TextView controls inside a Frame layout. We will use the android layout_gravity to position the different Views to prevent them from overlapping.

Create a new android project by following the steps listed below.

Go to file menu

Click on New menu

Click on Android Application

Enter Project name: FrameLayout

Package: com.inducesmile.framelayout

Keep other default selections

Continue to click on next button until Finish button is active

Then click on Finish Button

Once you are done with your project, head over to the resource > layout folder and open the file called activity_main.xml. In your IDE the graphical layout view will be open. Click on the TextView in your layout to select it and click on the delete button to delete the text from your layout.

Now right click on your layout and select change layout and change the current layout from Relative layout to Frame layout.

After you must have done with this your layout code will look more or less like the code shown below.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/FrameLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.inducesmile.framelayoutandroid.MainActivity" >
</FrameLayout>

With the basic xml layout in set, we will go ahead and add two TextView Controls in the XML layout resources. If you choose to use the graphical interface of your IDE, drag and drop two TextViews and set the layout_gravity to top and bottom respectively.

If you are done your code will be similar to the code below. I added margin in other to create space around the text. You can copy and paste the code below to your XML layout resource file.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/FrameLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.inducesmile.framelayoutandroid.MainActivity" >

<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
android:textStyle="bold"
android:layout_margin="20dp"
android:layout_gravity="top"
android:text="@string/text_top" />

<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
android:textStyle="bold"
android:layout_margin="20dp"
android:layout_gravity="bottom"
android:text="@string/text_bottom" />

</FrameLayout>

This xml layout will generate a user interface that looks like the image below

frame

Creating Frame Layout programmatically in android

You have seen how we created our Frame layout in XML layout resource file. This is a convenient and acceptable way to do it because it separates UI code from main application logic code. But there are occasions, that creating a Frame layout on the fly programmatically can be a better option. So let’s see how we can accomplish this task programmatically.

When creating a layout programmatically, it is important to understand the use of LayoutParams. With FrameLayout.LayoutParams class we will set the amount of space we want our View to be allocated to by its parent View Group or layout. We will prevent the    initial loading of our XML layout resource in setContentView method of the activity class.

We have to prepare all the Views we will like to display in our interface and then assign it to the method setContentView.

The code below demonstrates what I have explained above.

import android.support.v7.app.ActionBar.LayoutParams;
import android.support.v7.app.ActionBarActivity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.Gravity;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.FrameLayout;
import android.widget.TextView;

public class MainActivity extends ActionBarActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//setContentView(R.layout.activity_main);

FrameLayout layout = new FrameLayout(this);

FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);

TextView textTop = new TextView(this);
textTop.setText("This is the text at top position");
textTop.setTextSize(16);
textTop.setTextColor(Color.BLACK);
textTop.setGravity(Gravity.TOP);

TextView textBottom = new TextView(this);
textBottom.setText("This is the text at bottom position");
textBottom.setTextSize(16);
textBottom.setTextColor(Color.BLACK);
textBottom.setGravity(Gravity.BOTTOM);

layout.addView(textTop);
layout.addView(textBottom);

setContentView(layout);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}

 

When you run your code you will see a UI like the one above

This brings us to the end of this tutorial. You can run your application now. If everything works, your interface will be similar to the image displayed above.

Finally, if you have a question or suggestion kindly use our comment box. You can download the source code for this tutorial below.

One Response

Add a Comment