Android FrameLayout Tutorial with Example kotlin

Android FrameLayout is easy to use and very effective to control views. Its show views on the top of other views. Its provide a Block area on the screen to display a single item (widget). On 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.


This is the ID which uniquely identifies the layout.



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 app screen form android studio.

here is code for the same UI.



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.



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

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

Step 4. Run the application, in an emulator or On your Android device
Output screenshot Android Frame Layout example :


Android FrameLayout Tutorial Example kotlin output


Download source code Android FrameLayout in kotlin


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)



Coding in Kotlin

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.