Katerina Zamani

About Katerina Zamani

Katerina has graduated from the Department of Informatics and Telecommunications in National and Kapodistrian University of Athens (NKUA) and she attends MSc courses in Advanced Information Systems at the same department. Currently, her main academic interests focus on web applications, mobile development, software engineering, databases and telecommunications.

Android FrameLayout Example

FrameLayout represents a simple layout for the user interface of Android applications. It is usually used for displaying single Views at a specific area on the screen or overlapping its child views.

In our example we are going to show how you can add and handle FrameLayout in your application.

For this tutorial, we will use the following tools in a Windows 64-bit platform:
 
 
 
 

  1. JDK 1.7
  2. Eclipse 4.2 Juno
  3. Android SDK 4.1
Tip
You may skip project creation and jump directly to the beginning of the example below.

1. Create a New Android Application Project

Open Eclipse IDE and go to File → New → Project → Android Application Project.

Specify the name of the application, the project and the package and then click Next.

Figure 1. Create a new Android application

Figure 1. Create a new Android application

In the next window, the “Create Activity” option should be checked. The new created activity will be the main activity of your project. Then press Next button.

Figure 2. Configure the project

Figure 2. Configure the project

In “Configure Launcher Icon” window you should choose the icon you want to have in your app. We will use the default icon of android, so click Next button.

Figure 3. Configure the launcher icon

Figure 3. Configure the launcher icon

Select the “Blank Activity” option and press Next.

Figure 4. Create the activity and select its type

Figure 4. Create the activity and select its type

You have to specify a name for the new Activity and a name for the layout description of your app. The .xml file for the layout will automatically be created in the res/layout folder. Finally, press Finish.

Figure 5. Create a new blank activity

Figure 5. Create a new blank activity

Now you can see the final structure of the project in the following image.

Figure 6. The final structure of the project

Figure 6. The final structure of the project

2. Create the layout of the Main Activity

Now we are going to add FrameLayout component to our XML layout file. Open res/layout/activity_main.xml, go to the respective tab and paste the following code.

activity_main.xml:

<?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"
	android:id="@+id/framelayout" >
	    
	<ImageView 
		android:id="@+id/frameImage"
		android:layout_width="200dp"
		android:layout_height="300dp"
		android:src="@drawable/ic_launcher"
		android:layout_gravity="center"
		android:clickable="true" />
	    
	<TextView
		android:id="@+id/frameText"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="This is a text"
		android:textSize="15sp"
		android:textStyle="bold" 
		android:visibility="gone"
		android:layout_gravity="center" />
	    
</FrameLayout>

In this example, we include two different Views inside the content of the FrameLayout and we make them to overlap. The important thing we should mention, is that FrameLayout give us the capability to control child element’s position through layout_gravity attribute.

If we want to display only one drawable to the layout, we can use the following XML attributes that FrameLayout offers us:

  • android:foreground: it is usually used as an overlay and it defines the drawable of the content. The drawable can be specified via a color or as a reference to another resource.
  • android:foregroundGravity: specifies the gravity of the foreground drawable.

3. Code the Main Activity

We can also define and set the FrameLayout or its child elements through the source code, as you can see in the code below.

Open src/com.javacodegeeks.android.framelayouttest/MainActivity.java and paste the following code.

MainActivity.java:

package com.javacodegeeks.android.framelayouttest;

import android.os.Bundle;
import android.app.Activity;
import android.graphics.Color;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends Activity {

	private ImageView image;
	private TextView text;
	private FrameLayout frame;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		frame = (FrameLayout) findViewById(R.id.framelayout);
		text = (TextView) findViewById(R.id.frameText);
		image = (ImageView) findViewById(R.id.frameImage);

		// add a new element to the FrameLayout
		TextView newText = new TextView(this);
		newText.setText("Java Code Geeks!");
		newText.setTextColor(Color.CYAN);
		newText.setTextSize(20);
		frame.addView(newText);
		
		image.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				// change the visibility mode of the TextView
				if(text.getVisibility() == View.GONE) {
					text.setVisibility(View.VISIBLE);
					frame.setBackgroundColor(Color.MAGENTA);
				} else {
					text.setVisibility(View.GONE);
				}
				
			}
		});
	}

}

The code above is very simple. We can add a new View by calling addView function. Also we configure the values of some components (depending on the visibility of the frameText), when the image is pressed. Of course Android system provides us a more dynamic way of changing and handling the attributes of application views. As a prerequisite is to map every view with the unique id component of the XML. This can be done via findViewById() method.

4. Run the application

To run our application, right click on our project → Run as → Android Application. The AVD will appear with the app loaded.

Figure 7: The Android app is loaded

Figure 7: The Android app is loaded

As you can see the frameText is not displayed on the screen because we configured its visibility to gone. But you can notice that another TextView is appeared, although we didn’t define it at the XML layout file. This is happening because we add a new TextView element to the FrameLayout at the source code.

Now click the image. You can notice that the frameText is displayed and it overlaps the image. Also the background color of the FrameLayout has changed, as we set it to the MainActivity.java file.

Figure 8: The text overlaps (first image click)

Figure 8: The text overlaps (first image click)

When we click the image again, the frameLayout disappears because its visibility is set to GONE again.

Figure 9: The text is not visible any more (second image click)

Figure 9: The text is not visible any more (second image click)

Download the Eclipse Project

This was an example of FrameLayout in Android.

Download
You can download the full source code of this example here : FrameLayoutTest.zip

Do you want to know how to develop your skillset to become a Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you two of our best selling eBooks for FREE!

JPA Mini Book

Learn how to leverage the power of JPA in order to create robust and flexible Java applications. With this Mini Book, you will get introduced to JPA and smoothly transition to more advanced concepts.

JVM Troubleshooting Guide

The Java virtual machine is really the foundation of any Java EE platform. Learn how to master it with this advanced guide!

Given email address is already subscribed, thank you!
Oops. Something went wrong. Please try again later.
Please provide a valid email address.
Thank you, your sign-up request was successful! Please check your e-mail inbox.
Please complete the CAPTCHA.
Please fill in the required fields.
Examples Java Code Geeks and all content copyright © 2010-2014, Exelixis Media Ltd | Terms of Use | Privacy Policy
All trademarks and registered trademarks appearing on Examples Java Code Geeks are the property of their respective owners.
Java is a trademark or registered trademark of Oracle Corporation in the United States and other countries.
Examples Java Code Geeks is not connected to Oracle Corporation and is not sponsored by Oracle Corporation.
Do you want to know how to develop your skillset and become a ...
Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you two of our best selling eBooks for FREE!

Get ready to Rock!
You can download the complementary eBooks using the links below:
Close