mulberry-demo-v2/pos_android_app/src/main/res/layout/fragment_mulberry.xml

<?xml version="1.0" encoding="utf-8"?>
<layout 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"
    xmlns:binding="http://schemas.android.com/apk/res-auto">

    <data>
        <variable
            name="viewModel"
            type="com.dspread.pos.ui.mulberry.MulberryViewModel" />
    </data>
<!--    android:text="@{viewModel.status}"-->
<!--    binding:onClickCommand="@{viewModel.actionCommand}"-->




    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/white"
        android:padding="16dp"
        android:gravity="center"
        app:layout_constraintVertical_chainStyle="packed"
        app:layout_constraintHorizontal_chainStyle="packed"
        >


        <!-- Top Section: Logo -->
        <LinearLayout
            android:id="@+id/topLogoContainer"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical"
            android:paddingTop="10dp"
            android:paddingBottom="10dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent">

            <ImageView
                android:id="@+id/ivLogo"
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:src="@{viewModel.mainLogoBitmap}"
                android:adjustViewBounds="true"
                android:scaleType="fitCenter" />
        </LinearLayout>



        <!-- Center Section: GridLayout -->
        <GridLayout
            android:id="@+id/gridLayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:alignmentMode="alignMargins"
            android:columnCount="2"
            android:columnOrderPreserved="false"
            android:rowCount="2"
            android:layout_marginTop="5dp"

            app:layout_constraintTop_toBottomOf="@id/topLogoContainer"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            >

            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/mulberryCards_list"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:clipToPadding="false"
                android:padding="8dp"
                app:items="@{viewModel.navItems}"
                app:itemBinding="@{viewModel.itemBinding}"
                app:layoutManager="androidx.recyclerview.widget.GridLayoutManager"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:spanCount="2"
                tools:itemCount="4"
                tools:listitem="@layout/item_mulberry_card" />

            <!-- TO DO Fix and remove additional Option -->
            <androidx.cardview.widget.CardView
                android:id="@+id/widget_card"
                android:layout_width="@dimen/main_grid_container_width_d30"
                android:layout_height="@dimen/main_grid_container_height_d30"
                android:layout_margin="8dp"

                android:tag="MIR"
                style="@style/PaymentCardStyle"
                android:visibility="gone">

                <androidx.constraintlayout.widget.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <ImageView
                        android:id="@+id/card"
                        android:layout_width="140dp"
                        android:layout_height="@dimen/main_grid_image_height_d30"
                        android:scaleType="centerCrop"
                        android:src="@drawable/homo_card_black_box"
                        app:layout_constraintTop_toTopOf="parent"
                        app:layout_constraintBottom_toTopOf="@+id/cardText"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintEnd_toEndOf="parent" />

                    <TextView
                        android:id="@+id/cardText"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Card"
                        style="@style/PaymentCardVisibility"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintEnd_toEndOf="parent"
                        android:layout_marginBottom="10dp" />
                </androidx.constraintlayout.widget.ConstraintLayout>
            </androidx.cardview.widget.CardView>



        </GridLayout>

        <!-- Centered Section: mulberry Image or Text -->
        <LinearLayout
            android:id="@+id/centerContainer"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical"
            android:paddingTop="25dp"
            android:paddingBottom="25dp"
            app:layout_constraintTop_toBottomOf="@id/gridLayout"
            app:layout_constraintBottom_toTopOf="@id/footerContainer"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent">

            <TextView
                android:id="@+id/mulberrylogotext"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@{viewModel.greetingText}"
                android:textSize="25dp"
                android:visibility="@{viewModel.logoTextVisibility, default=gone}"/>

            <ImageView
                android:id="@+id/mulberry"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@{viewModel.footerLogoBitmap}"
                android:maxWidth="200dp"
                android:maxHeight="120dp"
                android:adjustViewBounds="true"
                android:visibility="@{viewModel.logoVisibility, default=gone}"/>
        </LinearLayout>


        <!-- Footer Section -->
        <LinearLayout
            android:id="@+id/footerContainer"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical"
            android:padding="10dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent">

            <TextView
                android:id="@+id/footertext"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@{viewModel.footerText}"
                android:textSize="16sp" />
        </LinearLayout>


    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>