<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#e8e8f9"
     tools:c>

    <!-- Top Fixed Images -->
    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="0dp"
        android:layout_height="0dp"
         app:layout_c
         app:layout_c
         app:layout_c
         app:layout_c
        app:srcCompat="@drawable/top_background_gradle" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
         app:layout_c
         app:layout_c
         app:layout_c
        app:srcCompat="@drawable/top_background" />

    <!-- Scrollable Content Starting from a Bit Lower Position in the Top Image -->
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="0dp"
         app:layout_c
         app:layout_c
        android:layout_marginTop="150dp"> <!-- Adjusted this value to control the start position within the image -->

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
             android:elevati
             android:orientati
            android:paddingStart="14dp"
            android:paddingEnd="14dp"
            android:paddingBottom="16dp">

            <!-- Purple Box Example - Repeat this block for each purple box -->
            <LinearLayout
                android:id="@+id/linearLayoutButton"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:background="@drawable/ripple_white_box"
                android:clickable="true"
                 android:elevati
                android:focusable="true"
                 android:
                 android:orientati>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_margin="10dp"
                    android:background="@drawable/purple_top_button"
                     android:elevati
                     android:orientati>

                    <ImageView
                        android:id="@+id/imageView3"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_margin="10dp"
                        app:srcCompat="@drawable/video_call" />

                    <TextView
                        android:id="@+id/textView"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginBottom="8dp"
                        android:gravity="center"
                        android:text="test"
                        android:textSize="24sp" />
                </LinearLayout>

            </LinearLayout>
            <!-- Purple Box Example Ends -->

        </LinearLayout>
</ScrollView>

    </androidx.constraintlayout.widget.ConstraintLayout>