FrameLayout in Android – Implementation and Overview

FrameLayout in Android – Implementation and Overview

FrameLayout is a simple and straight forward View that is used to hold a single child element inside it. It usually blocks a part  of the screen to display a single child view. Android Docs, advise against using multiple child elements inside the Frame Layout because, it is not easy to control their positions for different screen sizes.

Sample Frame Layout Implementation

The Frame Layout contains two views, a Image view and a Textview. The element that is placed last inside the Frame Layout comes at the top.

Declaration:

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

FrameLayout – Properties

The properties of Frame Layout are:

android:id – Gives a unique ID to the FrameLayout so that it can be accessed inside the activity if needed.

android:foreground – Allows to draw any Drawable over the content. Can take a color or any image also.

android:foregroundGravity – This allows gravity to be applied to the foreground drawable is present.

android:measureAllChildren – Boolean value, determines whether to measure all the children or those which are VISIBLE or INVISIBLE.

It is important to note that, the child views can be moved around using, only the

android:layout_gravity – This can be CENTER, LEFT, RIGHT, TOP, BOTTOM.

FrameLayout – Implementation

You will need to make use of the XML tag,

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

There can be views inside it, to hold the child elements like below.

<?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:background="@color/colorAccent">


    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/qslogo"
        android:layout_gravity="center"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Second View"
        android:textColor="#32f"
        android:textSize="25dp"
        android:layout_gravity="center"
        />
    </FrameLayout>

This will hold the views like,

FrameLayout – Tips and Tricks

There are a lot of things that Frame Layout can achieve. Check the image below.

All the Layouts shown above are missing something. Can you guess what it is?

They are missing the App Title. By default, the App title is appended to the top, using a RelativeLayout, which we cannot edit (There are work arounds, but not worth the time and effort).

We make use of the Frame Layout for this very purpose, and take up some screen space to place our content inside it.

This is a simple UI we created for the project here (We created an android app under 3 hours!!)

The content we have used here, the ImageView, the EditText, the Button are inside a frame layout setup.

The title bar is removed and instead, we have our own TextView as Login In. This gives a cleaner and neater design for Our Android App.

It is important to play some more with the Layout to understand its working. Drop in any comments you have in the comments below.

“Learn and Be Curious”.