Practical No. 10 Develop a program to implement Frame layout, Table layout and Relative layout for any e-commerce application.

Practical No. 10 Develop a program to implement Frame layout, Table layout and

Relative layout for any e-commerce application.

1) File Structure (Tree Diagram)

Practical10_EcommerceLayouts/
│
├── app/
│   └── src/
│       └── main/
│           ├── AndroidManifest.xml
│           ├── java/
│           │   └── com/
│           │       └── example/
│           │           └── practical10/
│           │               └── MainActivity.java
│           └── res/
│               ├── layout/
│               │   └── activity_main.xml
│               ├── drawable/
│               │   └── bg_product.xml
│               └── values/
│                   ├── strings.xml
│                   ├── colors.xml
│                   └── themes.xml

---

2) Corrected Code Files (Copy-Paste)

---

(A) AndroidManifest.xml ✅

📌 Path: app/src/main/AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">

    <application
        android:allowBackup="true"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/Theme.Practical10">

        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    </application>

</manifest>

---

(B) MainActivity.java ✅

📌 Path: app/src/main/java/com/example/practical10/MainActivity.java

package com.example.practical10;

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

---

(C) activity_main.xml ✅ (Final Working Layout)

📌 Path: app/src/main/res/layout/activity_main.xml

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

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

        <!-- Required Output -->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Sanjay Ghodawat Institute, Atigre"
            android:textSize="20sp"
            android:textStyle="bold"
            android:textColor="@android:color/black"
            android:gravity="center"
            android:padding="10dp"
            android:layout_marginBottom="16dp" />

        <!-- FRAME LAYOUT (Overlay Discount on Product) -->
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="180dp"
            android:layout_marginBottom="16dp">

            <!-- Product Image Placeholder -->
            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/bg_product"
                android:text="Product Image"
                android:textSize="18sp"
                android:textStyle="bold"
                android:gravity="center"
                android:textColor="@android:color/white" />

            <!-- Discount Badge Overlay -->
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="30% OFF"
                android:textColor="@android:color/white"
                android:textStyle="bold"
                android:background="@color/red"
                android:padding="8dp"
                android:layout_gravity="top|end"
                android:layout_margin="10dp" />

        </FrameLayout>

        <!-- RELATIVE LAYOUT (Product details + buttons) -->
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="12dp"
            android:background="#F3F3F3"
            android:layout_marginBottom="16dp">

            <TextView
                android:id="@+id/tvProductName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Wireless Headphones"
                android:textSize="18sp"
                android:textStyle="bold"
                android:textColor="@android:color/black" />

            <TextView
                android:id="@+id/tvPrice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="₹ 1999"
                android:textSize="16sp"
                android:textStyle="bold"
                android:textColor="#1B5E20"
                android:layout_below="@id/tvProductName"
                android:layout_marginTop="6dp" />

            <Button
                android:id="@+id/btnAddToCart"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Add to Cart"
                android:layout_below="@id/tvPrice"
                android:layout_marginTop="10dp"
                android:backgroundTint="@color/blue"
                android:textColor="@android:color/white" />

            <Button
                android:id="@+id/btnBuyNow"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Buy Now"
                android:layout_toEndOf="@id/btnAddToCart"
                android:layout_alignTop="@id/btnAddToCart"
                android:layout_marginStart="10dp"
                android:backgroundTint="@color/green"
                android:textColor="@android:color/white" />

        </RelativeLayout>

        <!-- TABLE LAYOUT (Order Summary) -->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Order Summary"
            android:textSize="18sp"
            android:textStyle="bold"
            android:textColor="@android:color/black"
            android:layout_marginBottom="8dp" />

        <TableLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:stretchColumns="1"
            android:background="@android:color/white"
            android:padding="10dp">

            <TableRow>
                <TextView
                    android:text="MRP"
                    android:textSize="16sp"
                    android:padding="6dp" />

                <TextView
                    android:text="₹ 2500"
                    android:textSize="16sp"
                    android:gravity="end"
                    android:padding="6dp" />
            </TableRow>

            <TableRow>
                <TextView
                    android:text="Discount"
                    android:textSize="16sp"
                    android:padding="6dp" />

                <TextView
                    android:text="- ₹ 501"
                    android:textSize="16sp"
                    android:textColor="@color/red"
                    android:gravity="end"
                    android:padding="6dp" />
            </TableRow>

            <TableRow>
                <TextView
                    android:text="Delivery"
                    android:textSize="16sp"
                    android:padding="6dp" />

                <TextView
                    android:text="Free"
                    android:textSize="16sp"
                    android:textColor="@color/green"
                    android:gravity="end"
                    android:padding="6dp" />
            </TableRow>

            <TableRow>
                <TextView
                    android:text="Total"
                    android:textSize="17sp"
                    android:textStyle="bold"
                    android:padding="6dp" />

                <TextView
                    android:text="₹ 1999"
                    android:textSize="17sp"
                    android:textStyle="bold"
                    android:gravity="end"
                    android:padding="6dp" />
            </TableRow>

        </TableLayout>

    </LinearLayout>
</ScrollView>

---

(D) bg_product.xml ✅

📌 Path: app/src/main/res/drawable/bg_product.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="#616161" />
    <corners android:radius="12dp" />

    <padding
        android:left="10dp"
        android:top="10dp"
        android:right="10dp"
        android:bottom="10dp" />
</shape>

---

(E) colors.xml ✅

📌 Path: app/src/main/res/values/colors.xml

<resources>
    <color name="blue">#1976D2</color>
    <color name="green">#388E3C</color>
    <color name="red">#E53935</color>
</resources>

---

(F) strings.xml ✅

📌 Path: app/src/main/res/values/strings.xml

<resources>
    <string name="app_name">Practical10</string>
</resources>

---

(G) themes.xml ✅ (Very Important)

📌 Path: app/src/main/res/values/themes.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <style name="Theme.Practical10" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <item name="colorPrimary">@color/blue</item>
        <item name="colorPrimaryVariant">#1565C0</item>
        <item name="colorOnPrimary">@android:color/white</item>
    </style>
</resources>

---