Android FrameLayout Tutorial with Example kotlin

Android FrameLayout is easy to use and very effective to control views. It shows views on top of other views. It provides a Block area on the screen to display a single item (widget). On a common scenario, FrameLayout should use only to hold a single child view. We can also use multiple children to Android FrameLayout but its position control by only assigning gravity (android:layout_gravityattribute) to each child.

Android FrameLayout Attributes :

Here is some important attribute of FrameLayout in Android.

android:id

This is the ID which uniquely identifies the layout.

android:id="@+id/frame_layout"

android:foreground

Foreground defines the drawable to draw over the content. This may be a color value in the form of “#rgb”, “#argb”, “#rrggbb”, or “#aarrggbb”.

On the above Image can see define an android:foreground hides the TextView and ImageView. This image is the blueprint of the app screen from android studio.

here is code for the same UI.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/frame_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:foreground="@color/colorPrimary">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        app:srcCompat="@mipmap/flight_image" />

    <TextView
        android:id="@+id/textview1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="10dp"
        android:gravity="center_horizontal"
        android:text="Hello World!"
        android:textColor="@color/white"
        android:textSize="40sp" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="80dp"
        android:text="Go Book" />
</FrameLayout>

android:foregroundGravity

The foregroundGravity to apply to the foreground drawable and the default value is fill. You can set values in the form of “top”, ”center_vertical” , ”fill_vertical”, ”center_horizontal”, ”fill_horizontal”, ”center”,  ”fill”, ”clip_vertical”, ”clip_horizontal”, ”bottom”, ”left” or ”right”.

You can also set multiple values by using “|”. Ex: fill_horizontal|top .Both the fill_horizontal and top gravity are set to FrameLayout.

android:measureAllChildren

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

Complete Example of Android FrameLayout :

Here we are using FrameLayout as a base layout and ImageView widget will fill the screen. TextView is 2nd level top view then Button is top of TextView. You can see it’s little hard to main multiple UI on FrameLayout.

Step 1. Create a new project “Build Your First Android App in Kotlin“

Step 2. Add the following code in the activity_main.xml resource file

Here is base container FrameLayout then the top of it is <ImageView> then the top of its <TextView>

You can add your own image or download “flight_image” and add in mipmap

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/frame_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:foreground="@color/colorPrimary">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        app:srcCompat="@mipmap/flight_image" />

    <TextView
        android:id="@+id/textview1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="10dp"
        android:gravity="center_horizontal"
        android:text="Hello World!"
        android:textColor="@color/white"
        android:textSize="40sp" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="80dp"
        android:text="Go Book" />
</FrameLayout>

Step 3. setContentView res layout file in “MainActivity.kt”

package `in`.eyehunt.androidframelayout

import android.support.v7.app.AppCompatActivity
import android.os.Bundle

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

Step 4. Run the application, in an emulator or On your Android device

Output screenshot Android Frame Layout example :

Download source code Android FrameLayout in kotlin

https://github.com/EyeHunts/AndroidFrameLayout

Note: This example (Project) is developed in Android Studio 3.1.3. Tested on Android 9 ( Android-P), compile SDK version API 26: Android 8.0 (Oreo)

MinSdkVersion=”15″

TargetSdkVersion=”27″

Coding in Kotlin