Android frame layout is a view group used to specify the position of multiple views placed on top of each other. In other words, when multiple views must be stacked, we can use a frame layout, where the last child is displayed on top of the screen. We can add multiple views but we can control their positions using only the gravity attributes.

Below is the basic representation.

In this diagram:

• The outer box represents the Frame layout
• The inner boxes represent child views within the FrameLayout.
• Child View 2 is drawn on top of Child View 1 because it was added later in the XML (the last child added is drawn on top).

This is a simplified representation, and the actual appearance and positioning of views can be influenced by layout parameters such as layout_gravity and the specific attributes of each child view.

Here’s a basic example of how you can use a Frame layout in XML

<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:layout_width="match_parent"
   android:layout_height="match_parent"
<!--other views goes here-->
   
>

</FrameLayout>

Step-by-step Implementation

For example, we have to use an image as the background and place all the other views on top of it

Step 1: First, create a new project and move to the .XML file. Then declare the frame layout and add the views as per the requirement – in my case, I want an imageview with a text view on top.

My first step will be to add an image in the background and place the text view on top of it 

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical"
   android:padding="5dp">

   <ImageView
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:src="@mipmap/ic_launcher"
       android:id="@+id/img1"
 />
   <TextView
       android:layout_width="wrap_content"
       android:id="@+id/hellotxt"
       android:layout_height="wrap_content"
       android:text="Hello World"
       android:layout_gravity="center"
       android:textStyle="bold"
       android:textSize="50dp"

/>
</FrameLayout>

For more complex scenarios where we have to use edittext with an icon, I can also use Frame layout since I have to adjust two views in the stack.

<FrameLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_marginTop="80dp">

   <EditText
       android:id="@+id/editText1"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_centerHorizontal="true"
       android:background="@color/black"
       android:hint="Enter your email"
       android:textColorHint="@color/white"
       android:padding="10dp" />

   <ImageView
       android:layout_width="40dp"
       android:layout_height="40dp"
       android:layout_gravity="right"
       android:src="@mipmap/ic_launcher_round"
       android:id="@+id/img2"
 />
</FrameLayout>

Step 2. Working with the Activity.java file 

As soon as the layout is created, we must access the UI element from the XML using findViewById from our activity’s onCreate() callback method.

public class MainActivity2 extends AppCompatActivity {
   ImageView img1,img2;
   TextView hellotxt;
   EditText editText1;

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main2);
       img1 = findViewById(R.id.img1);
       img2 = findViewById(R.id.img2);
       hellotxt = findViewById(R.id.hellotxt);
       editText1 = findViewById(R.id.editText1);
   }
}

We need to run this code to see the output.

Happy coding! 🙂