What Is FrameLayout in Android? Simple Explanation with Example

FrameLayout in Android with Example

FrameLayout is one of the simplest and most commonly used layout containers in Android. It is designed to block out an area of the screen to display a single view, but it can also stack multiple views on top of each other. Because of this, FrameLayout is perfect for overlays, image banners, fragments, and simple containers.

This article explains the basics of FrameLayout, when to use it, and walks you through a practical example using XML and Kotlin (or Java) so you can easily use it in your own Android apps.

What Is FrameLayout in Android?

FrameLayout is a subclass of ViewGroup. It behaves like a simple frame or an empty box on the screen, into which you can place one or more child views. By default, all child views are positioned at the top‑left corner unless you change their position using gravity or margins.

The most recent child view you add will be drawn on top of the previous ones. This stacking behavior makes FrameLayout very useful when you want to overlap views, such as placing text on top of an image or adding a loading spinner over existing content.

Common Use Cases of FrameLayout

• Container for a single child view, such as a Fragment host.
• Displaying an image with text or buttons overlaid on top.
• Creating simple splash screens or banners.
• Showing a loading indicator or error view on top of actual content.
• Acting as a placeholder that can dynamically swap different views or fragments.

In many project templates, you will see FrameLayout used as a container for fragments, especially in navigation setups.

Key Characteristics of FrameLayout

• Simple structure: No complex row/column logic like LinearLayout or ConstraintLayout.
• Stacking behavior: Children are drawn in order, with later ones on top of earlier ones.
• Typically one main child: Best practice is often to keep one primary child and maybe a few small overlay views.
• Supports gravity: You can control the position of children using android:layout_gravity (e.g., center, bottom, right).

Basic FrameLayout Syntax

A very simple FrameLayout in XML looks like this:

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Child views go here -->

</FrameLayout>

You can place one or multiple child views inside this FrameLayout depending on your UI requirement.

Practical Example: Image with Text and Button Overlay

Let’s create a simple screen where:

• An image is shown as a background.
• A title text is displayed on top of the image.
• A button is placed at the bottom center, overlaying the image.

Step 1: Layout XML (activity_main.xml)

In your res/layout/activity_main.xml, define a FrameLayout with an ImageView, a TextView, and a Button stacked on top of each other:

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

    <ImageView
        android:id="@+id/bannerImage"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/sample_banner" />

    <TextView
        android:id="@+id/bannerTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top|center_horizontal"
        android:layout_marginTop="32dp"
        android:background="#80000000"
        android:padding="12dp"
        android:text="Welcome to FrameLayout"
        android:textColor="@android:color/white"
        android:textSize="20sp"
        android:textStyle="bold" />

    <Button
        android:id="@+id/bannerButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center_horizontal"
        android:layout_marginBottom="32dp"
        android:backgroundTint="@color/colorPrimary"
        android:text="Get Started"
        android:textColor="@android:color/white" />

</FrameLayout>

In this layout:

• The ImageView fills the entire FrameLayout and serves as the background.
• The TextView appears at the top center, thanks to android:layout_gravity="top|center_horizontal".
• The Button is placed at the bottom center with android:layout_gravity="bottom|center_horizontal".

All three views are part of the same FrameLayout but are stacked visually to create a clean banner-style UI.

Step 2: Activity Code (Kotlin Example)

Now, hook up the layout in your Activity. In MainActivity.kt:

package com.example.framelayoutdemo

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.TextView
import android.widget.Toast

class MainActivity : AppCompatActivity() {

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

        val bannerTitle = findViewById<TextView>(R.id.bannerTitle)
        val bannerButton = findViewById<Button>(R.id.bannerButton)

        bannerTitle.text = "Discover FrameLayout in Android"

        bannerButton.setOnClickListener {
            Toast.makeText(this, "Get Started clicked!", Toast.LENGTH_SHORT).show()
        }
    }
}

When you run the app, you will see the image filling the screen, with the title on top and the button at the bottom, all managed by a single FrameLayout.

How FrameLayout Draws Its Child Views

FrameLayout draws its child views in the order they appear in the XML (or the order you add them in code). The first child is drawn first (at the bottom), and subsequent children are drawn on top of it.

In the previous example, the ImageView is drawn first, so it becomes the background. Then the TextView and Button are drawn above it, creating a layered effect. If you swap the order and put the ImageView at the end, it would cover the text and button.

Using FrameLayout as a Fragment Container

A very common real-world use of FrameLayout is as a fragment container. Many templates use a FrameLayout to host fragments that you replace during navigation or UI updates.

Example fragment container in XML:

<FrameLayout
    android:id="@+id/fragmentContainer"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Then in your Activity you can dynamically add or replace fragments into this FrameLayout using the FragmentManager. This keeps the layout simple while allowing the content to change at runtime.

Tips and Best Practices for FrameLayout

• Use FrameLayout when you want a simple container or overlapping views, not for complex layouts with many aligned elements.
• For multiple non-overlapping views, consider ConstraintLayout or LinearLayout instead of trying to force everything into FrameLayout.
• Be mindful of the child order; views added later will appear on top of earlier ones.
• Combine FrameLayout with gravity and margins to create interesting overlays and banners.
• Use FrameLayout as a fragment host to keep your activity layouts clean and flexible.

Conclusion

FrameLayout is a simple yet powerful layout in Android that acts like a flexible frame on the screen. It is ideal for displaying a single main view or layering multiple views on top of each other, such as images with text overlays, buttons, or loading indicators.

By understanding how FrameLayout stacks its children, how to position them with layout_gravity, and how to use it as a container for fragments or overlays, you can design cleaner and more engaging Android user interfaces with minimal XML complexity.