Introduction

In Android development, Layouts are used to arrange UI elements on the screen. Different layouts provide different ways to position components.

Some commonly used layouts include:

• FrameLayout – Used to display a single view or stack multiple views on top of each other.
• TableLayout – Used to arrange UI components in rows and columns, similar to a table.
• RelativeLayout – Used to position elements relative to each other or the parent layout.

In this practical, we will design a simple e-commerce product display page using these layouts.

Step 1: Create a New Android Project

1. Open Android Studio
2. Click New Project
3. Select Empty Activity
4. Choose Java as the programming language
5. Click Finish

Step 2: activity_main.xml

Open res → layout → activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="300dp">

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

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="top|end"
                android:layout_margin="16dp"
                android:background="#E91E63"
                android:padding="8dp"
                android:text="HOT DEAL"
                android:textColor="#FFFFFF"
                android:textStyle="bold" />
        </FrameLayout>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="16dp"
            android:text="Premium Wireless Headphones"
            android:textSize="22sp"
            android:textStyle="bold" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingStart="16dp"
            android:text="Specifications"
            android:textStyle="bold"
            android:textColor="#666666"/>

        <TableLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:background="#F9F9F9"
            android:stretchColumns="1">

            <TableRow android:padding="10dp">
                <TextView android:text="Battery Life: " android:textStyle="bold" />
                <TextView android:text="40 Hours" android:paddingStart="10dp"/>
            </TableRow>

            <View android:layout_height="1dp" android:background="#DDDDDD"/>

            <TableRow android:padding="10dp">
                <TextView android:text="Bluetooth: " android:textStyle="bold" />
                <TextView android:text="v5.3" android:paddingStart="10dp"/>
            </TableRow>

            <View android:layout_height="1dp" android:background="#DDDDDD"/>

            <TableRow android:padding="10dp">
                <TextView android:text="Noise Cancel: " android:textStyle="bold" />
                <TextView android:text="Active (ANC)" android:paddingStart="10dp"/>
            </TableRow>
        </TableLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:background="#EEEEEE"
            android:padding="20dp">

            <TextView
                android:id="@+id/tvPrice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentStart="true"
                android:layout_centerVertical="true"
                android:text="$249.00"
                android:textColor="#2E7D32"
                android:textSize="24sp"
                android:textStyle="bold" />

            <Button
                android:id="@+id/btnAddToCart"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentEnd="true"
                android:backgroundTint="#000000"
                android:text="ADD TO CART"
                android:textColor="#FFFFFF" />
        </RelativeLayout>

    </LinearLayout>
</ScrollView>

Step 3: MainActivity.java

package com.example.ecommerceapp;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Link to the XML file we created above
        setContentView(R.layout.activity_main);

        // Initialize the button using its ID from the RelativeLayout
        Button btnAddToCart = findViewById(R.id.btnAddToCart);

        // Set the click listener
        btnAddToCart.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // Show a simple alert when the button is clicked
                Toast.makeText(MainActivity.this, 
                    "Item added to your shopping cart!", 
                    Toast.LENGTH_LONG).show();
            }
        });
    }
}

Output

When the application runs:

• FrameLayout acts as the main container.
• RelativeLayout displays the product image, name, and price.
• TableLayout displays product specifications in rows and columns.

This creates a simple e-commerce product display interface.

Conclusion

In this program, we implemented FrameLayout, TableLayout, and RelativeLayout to design a simple e-commerce product interface.

• FrameLayout is used as the main container.
• RelativeLayout positions product details.
• TableLayout organizes product specifications.

These layouts help developers design structured and user-friendly Android application interfaces.