Android ViewGroup: FrameLayout

Filed Under: Android

In this tutorial, we’ll be discussing FrameLayout which is a part of the ViewGroup class that is used as containers for our child views.

Android FrameLayout

As per the documentation: FrameLayout is used to block a part of the screen for a particular view to display. Child Views are stacked on top of each other with the most recent item added on the top.
In XML, an attribute android:layout_gravity can be used to set the gravity of the child view. By default, the gravity is top-left.

Following XML code in the layout file contains a FrameLayout.


<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/frameLayout"
    android:layout_width="match_parent"
    android:layout_gravity="center"
    android:layout_height="match_parent">

    <View
        android:id="@+id/view"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:layout_gravity="center"
        android:background="#ff8800" />


    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src="@mipmap/ic_launcher" />


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textSize="22sp"
        android:textColor="@android:color/black"
        android:text="This is drawn on top of ImageView which is on top of view" />

</FrameLayout>

ImageView is present in the middle layer. The TextView is present in the topmost.

android-kotlin-framelayout-xml

Every element added in the Framelayout container would be stacked one layer above the previous element.
You can set a foreground color that’ll be set over the topmost layer in the layout using the attribute android:foreground on the FrameLayout tag.

Note: It’s recommended to have fewer child views inside your FrameLayout.
Using setVisibility() you can toggle the visibility of child views inside the FrameLayout.
In your MainActivity.kt do the following inside the onCreate function.


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

        frameLayout.imageView.visibility = View.GONE //Hides the ImageView
        frameLayout.view.bringToFront()
    }

frameLayout.view.bringToFront() would bring the View to the front and thus hide the TextView.
Hence you need to be careful that while creating a FrameLayout you do not hide views.

Views can be added inside the FrameLayout programmatically using addView().
Though with FrameLayout it doesn’t always keep the layout params and the order intact when child views are created programmatically since the layout was already been laid in setContentView() invocation.

This brings an end to this quick tutorial on FrameLayouts in Android.

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