FrameLayout in Android

Introduction

Framelayout in Android is a ViewGroup subclass. It is used to specify the position of View instances it contains on the top of each other to display only single View inside the FrameLayout. It is designed to block out an area on the screen to display a single item. Multiple children can be added to FrameLayout. To control position within the FrameLayout, assign 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. Size of the FrameLayout is the size of its largest child (plus padding).

XML Attributes

Attributes supported by FrameLayout class for child view are

• android:foregroundGravity : Defines gravity to apply to the foreground drawable. Defaults gravity is set to fill.
• android:measureAllChildren : Measure all children or just those in the VISIBLE or INVISIBLE state if set. Defaults value is set to false.

Example

Below example shows FrameLayout with different controls in android application. Create a layout(activity_main.xml) with FrameLayout as root view.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <ImageView
        android:id="@+id/imgvw1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop"
        android:src="@drawable/flimg" />
    <TextView
        android:id="@+id/txtvw1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="40dp"
        android:background="#4C374A"
        android:padding="10dp"
        android:text="Grand Palace, Bangkok"
        android:textColor="#FFFFFF"
        android:textSize="20sp" />
    <TextView
        android:id="@+id/txtvw2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right|bottom"
        android:background="#AA000000"
        android:padding="10dp"
        android:text="21/Aug/2017"
        android:textColor="#FFFFFF"
        android:textSize="18sp" />
</FrameLayout>

Load the XML layout resource from activity(MainActivity.java) onCreate() callback method.

import android.os.Bundle;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

setContentView() loads the layout xml file activity_main.xml.

FrameLayout can also be used with other layout. Below layout show nested layout having LinearLayout as child of FrameLayout.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/adapter_flParent"
    android:elevation="@dimen/ten_dp"
    android:orientation="vertical"
    android:layout_margin="10dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:background="@drawable/white_corner_radius_background"
            android:elevation="5dp"
            android:weightSum="1"
           android:orientation="horizontal"
            android:layout_marginBottom="20dp">


            <LinearLayout
                android:layout_weight="0.75"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:gravity="center_vertical">

                <TextView
                    android:id="@+id/adapter_Title"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:paddingStart="@dimen/ten_dp"
                    android:paddingEnd="@dimen/ten_dp"
                    android:text="Regional Snooker"
                    />

                <TextView
                    android:id="@+id/adapter_org"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:paddingStart="@dimen/ten_dp"
                    android:paddingEnd="@dimen/ten_dp"
                    android:text="Concered Authority"/>

            </LinearLayout>

            
            <TextView
                android:id="@+id/adapter_data"
                android:layout_weight="0.25"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:gravity="center"
                android:textColor="@color/white"
                android:background="@drawable/test_blue_bg"
                android:layout_gravity="right|center"
                android:text="PASSED"/>

        </LinearLayout>

        <ImageView
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_marginEnd="@dimen/ten_dp"
            android:layout_gravity="end|bottom"
            android:elevation="10dp"
            android:background="@drawable/ic_round_favorite_unfilled" />

    </FrameLayout>

Comparison

FrameLayout is used to load child one above another, like cards inside a frame, we can place one above another or anywhere inside the frame. While other layout are used for

• LinearLayout is used to align views one by one (vertically/ horizontally). It arranges its children in a single column or a single row.
• RelativeLayout align the view based on relation of views from its parents and other views. It displays child views in relative positions.
• ConstraintLayout is similar to a RelativeLayout in that it uses relations to position and size widgets. It has additional flexibility and is easier to use in the Layout Editor.
• WebView is used to load html, static or dynamic pages.