Android FrameLayout and AbsoluteLayout Example Tutorial

Filed Under: Android

In this tutorial we’ll dive into Android FrameLayout and Android AbsoluteLayout. This is the second tutorial in the layout series, earlier we looked into Android LinearLayout and RelativeLayout examples.

Android FrameLayout

Android FrameLayout is one of the useful layouts provided by android system, which allows User Interface widgets to be overlapped with each other. It’s used in cases such as placing a TextView over an ImageView. This becomes quite difficult to implement using LinearLayout or RelativeLayout since they place widgets adjacent to each other.

FrameLayout is designed to display a single item at a time. We can have multiple elements within a FrameLayout but each element will be positioned based on the top left of the screen. In FrameLayout, all the child views added are placed like stack. The most recent added are shown on top. Hence the order of elements in the layout is of importance.

FrameLayout Attributes

Following are the most important attributes used in this layout:

  • android:id : This is the ID which uniquely identifies the layout
  • android:foreground : This defines the drawable to draw over the content and possible values may be a color value, in the form of “#rgb”, “#argb”, “#rrggbb”, or “#aarrggbb”
  • android:foregroundGravity : Defines the gravity to apply to the foreground drawable. The gravity defaults to fill. Possible values are top, bottom, left, right, center, center_vertical, center_horizontal etc
  • android:measureAllChildren : Determines whether to measure all children or just those in the VISIBLE or INVISIBLE state when measuring. Defaults to false

Some important points to note:

  • FrameLayout can become more useful when elements are hidden and displayed programmatically
  • If the gravity is not set then the text would have appeared at the top left of the screen

The xml layout is given below:

layout_frame.xml


<FrameLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <ImageView
        android:src="@android:drawable/alert_dark_frame"
        android:scaleType="fitCenter"
        android:layout_height="fill_parent"
        android:layout_width="fill_parent"/>
    <TextView
        android:text="JournalDev.com"
        android:textSize="24sp"
        android:textColor="#ffff"
        android:layout_height="fill_parent"
        android:layout_width="fill_parent"
        android:gravity="center"/>
</FrameLayout>

Here we’ve placed a TextView over an ImageView. Isn’t it simple when compared to a RelativeLayout!

Android AbsoluteLayout

Android AbsoluteLayout is used when the UI components on screen are positioned at their absolute positions with respect to the origin at the top left corner of the layout. We need to specify the x and y coordinate position of each component on the screen. This is not recommend since it makes the UI inflexible, in fact AbsoluteLayout is deprecated now. The xml layout code below shows an AbsoluteLayout implementation.

layout_absolute.xml


<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <Button
        android:id="@+id/next"
        android:text="Next"
        android:layout_x="10px"
        android:layout_y="5px"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:layout_x="19dp"
        android:layout_y="74dp"
        android:text="First Name"
        android:textSize="18sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <EditText
        android:layout_x="140dp"
        android:layout_y="54dp"
        android:width="300px"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:layout_x="22dp"
        android:layout_y="137dp"
        android:text="Last Name"
        android:textSize="18sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <EditText
        android:layout_x="143dp"
        android:layout_y="117dp"
        android:width="300px"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</AbsoluteLayout>

Here layout_x and layout_y attributes specify the absolute positions of the components. width attribute is used to specify the EditText width.

Project Structure

android-layouts-2-project-structure

Android FrameLayout AbsoluteLayout Code

The MainActivity displays the absolute layout which consists of a Button which is used to launch the SecondActivity via intent and display a FrameLayout. There codes are given below and are self explanatory:

MainActivity.java


package com.journaldev.layoutsparttwo;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends Activity {

    Button next;

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

        next=(Button)findViewById(R.id.next);
        next.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent= new Intent(MainActivity.this,SecondActivity.class);
                startActivity(intent);
            }
        });

    }
    
    @Override
    public void onBackPressed() {
        finish();
    }
}

The MainActivity overrides the onBackPressed() method to finish the activity when back is pressed.

SecondActivity.java


package com.journaldev.layoutsparttwo;

import android.app.Activity;
import android.os.Bundle;

public class SecondActivity extends Activity {

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

    }

    @Override
    public void onBackPressed() {
        super.onBackPressed();
    }
}

In the above code onBackPressed takes us back to the most recent activity present in the stack i.e. MainActivity.

Below is our application in action in android emulator. We have displayed an absolute layout with a predefined width of EditText and then a frame layout with a TextView placed over a drawable ImageView.
android-framelayout-example

This brings an end to this tutorial. You can download the Android FrameLayout AbsoluteLayout Project from the below link.

Comments

  1. swapna says:

    so short but informative…short and superb

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages