I am working on a custom Android chat screen where the normal Toolbar is hidden. The top area of the Fragment is a custom Z-shaped curved header implemented using a VectorDrawable.

The design is working correctly, but I have a problem at the bottom of the screen near the Android navigation/gesture area.The problem is that the area below my bottom bar is using the Fragment parent's background color, chat_statusBar, which is dark green.

I want the background to continue using my primary color all the way to the bottom of the physical screen, including the area behind the navigation/gesture bar.

What is the correct way to make only this Fragment's background extend behind the bottom navigation/gesture area, while keeping fitsSystemWindows for the top/status-bar handling and without changing the Activity's global navigation-bar color or affecting other Fragments?

XML:

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:background="@color/chat_statusBar">

    <!-- Top Curve Header Background -->
    <ImageView
        android:id="@+id/topHeaderBg"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintWidth_max="600dp"
        android:scaleType="fitXY"
        android:src="@drawable/bg_chat_top_curve"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        tools:ignore="ContentDescription" />

    <!-- Back Button -->
    <ImageButton
        android:id="@+id/backBtn"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:padding="6dp"
        android:scaleType="fitCenter"
        android:src="@drawable/ic_arrow_back_24px"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:backgroundTint="@android:color/transparent"
        app:tint="@color/black"
        android:layout_marginStart="5dp"
        app:layout_constraintStart_toStartOf="@id/topHeaderBg"
        app:layout_constraintTop_toTopOf="@id/contactPill"
        app:layout_constraintBottom_toBottomOf="@id/contactPill"
        android:contentDescription="@string/abc_action_bar_up_description" />


    <!-- Header Guideline -->
    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/headerGuideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.65" />

    <!-- Contact Info Pill Container -->
    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/contactPill"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_white_pill"
        app:layout_constraintEnd_toStartOf="@id/headerGuideline"
        app:layout_constraintStart_toEndOf="@id/backBtn"
        app:layout_constraintTop_toTopOf="@id/topHeaderBg"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="10dp">

        <!-- Avatar -->
        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/profileImage"
            android:layout_width="38dp"
            android:layout_height="38dp"
            android:layout_marginStart="8dp"
            android:src="@drawable/ic_user"
            app:civ_border_color="#EEEEEE"
            app:civ_border_width="1dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <!-- Name & Status -->
        <TextView
            android:id="@+id/contactName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="10dp"
            android:text="Larry Machigo"
            android:textColor="@color/black"
            android:textSize="14sp"
            android:textStyle="bold"
            app:layout_constraintBottom_toTopOf="@+id/contactSubtitle"
            app:layout_constraintStart_toEndOf="@+id/profileImage"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_chainStyle="packed" />

        <TextView
            android:id="@+id/contactSubtitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Online"
            android:textColor="#777777"
            android:textSize="11sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="@+id/contactName"
            app:layout_constraintTop_toBottomOf="@+id/contactName" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <!-- Call Actions -->
    <ImageButton
        android:id="@+id/videoCallBtn"
        android:layout_width="44dp"
        android:layout_height="44dp"
        android:layout_marginEnd="8dp"
        android:background="@drawable/bg_circle_action"
        android:padding="10dp"
        android:layout_marginStart="10dp"
        android:scaleType="centerInside"
        android:src="@drawable/ic_video_call"
        app:layout_constraintStart_toEndOf="@id/headerGuideline"
        app:layout_constraintTop_toTopOf="@id/contactPill"
        app:layout_constraintBottom_toBottomOf="@id/contactPill"
        app:layout_constraintEnd_toStartOf="@id/voiceCallBtn"
        app:tint="@color/black"
        tools:ignore="ContentDescription" />

    <ImageButton
        android:id="@+id/voiceCallBtn"
        android:layout_width="44dp"
        android:layout_height="44dp"
        android:background="@drawable/bg_circle_action"
        android:padding="10dp"
        android:scaleType="centerInside"
        android:src="@drawable/ic_voice_call"
        app:layout_constraintStart_toEndOf="@id/videoCallBtn"
        app:layout_constraintTop_toTopOf="@id/videoCallBtn"
        app:layout_constraintBottom_toBottomOf="@id/videoCallBtn"
        app:tint="@color/black"
        tools:ignore="ContentDescription" />

    <ImageButton
        android:id="@+id/chatOptionsMenu"
        android:layout_width="44dp"
        android:layout_height="44dp"
        android:src="@drawable/ic_3_dots"
        android:padding="10dp"
        app:tint="@color/black"
        android:background="@drawable/transparent_bg_ripple"
        android:clickable="true"
        android:focusable="true"
        app:layout_constraintTop_toTopOf="@id/voiceCallBtn"
        app:layout_constraintBottom_toBottomOf="@id/voiceCallBtn"
        app:layout_constraintEnd_toEndOf="parent"/>

    <!-- Message area placeholder -->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/chatRecyclerView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintWidth_max="600dp"
        android:background="@color/primary"
        app:layout_constraintBottom_toTopOf="@+id/bottomBarContainer"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/topHeaderBg" />

    <!-- Quoted Message -->
    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/quoted_Parent"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:visibility="gone"
        android:background="#F5F5F5"
        android:padding="8dp"
        app:layout_constraintBottom_toTopOf="@id/bottomBarContainer"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent">

        <ImageView
            android:id="@+id/quoted_ImageView"
            android:layout_width="40dp"
            android:layout_height="40dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:ignore="ContentDescription" />

        <TextView
            android:id="@+id/quoted_sender"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:textStyle="bold"
            app:layout_constraintStart_toEndOf="@id/quoted_ImageView"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/quoted_text"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:maxLines="2"
            app:layout_constraintEnd_toStartOf="@id/quoted_closeButton"
            app:layout_constraintStart_toEndOf="@id/quoted_ImageView"
            app:layout_constraintTop_toBottomOf="@id/quoted_sender" />

        <ImageButton
            android:id="@+id/quoted_closeButton"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:background="?attr/selectableItemBackgroundBorderless"
            android:src="@drawable/ic_close"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:ignore="ContentDescription" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <!-- Pagination Loader -->
    <ProgressBar
        android:id="@+id/loadPagination"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <!-- FAB for moving to bottom -->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fabMoveToRecentMessage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:visibility="gone"
        app:layout_constraintBottom_toTopOf="@id/bottomBarContainer"
        app:layout_constraintEnd_toEndOf="parent"
        android:src="@drawable/swipedown"
        tools:ignore="ContentDescription" />

    <!-- Unified Bottom Bar Container -->
    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/bottomBarContainer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/primary"
        android:padding="8dp"
        app:layout_constraintBottom_toBottomOf="parent">

        <ImageButton
            android:id="@+id/addBtn"
            android:layout_width="44dp"
            android:layout_height="44dp"
            android:background="@drawable/transparent_bg_ripple"
            android:src="@drawable/ic_add_black_24dp"
            android:scaleType="centerInside"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:ignore="ContentDescription" />

        <LinearLayout
            android:id="@+id/recordingLinear"
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_marginStart="8dp"
            android:layout_marginEnd="8dp"
            android:gravity="center_vertical"
            android:orientation="horizontal"
            android:visibility="gone"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/Chat_Screen_Send"
            app:layout_constraintStart_toEndOf="@+id/addBtn"
            app:layout_constraintTop_toTopOf="parent">

            <TextView
                android:id="@+id/voiceRecordTimer"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="00:00"
                android:textColor="@color/black" />

            <ImageButton
                android:id="@+id/voiceCloseButton"
                android:layout_width="36dp"
                android:layout_height="36dp"
                android:layout_marginStart="16dp"
                android:background="?attr/selectableItemBackgroundBorderless"
                android:src="@drawable/ic_close"
                tools:ignore="ContentDescription" />

        </LinearLayout>

        <LinearLayout
            android:id="@+id/inputContainer"
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_marginStart="8dp"
            android:layout_marginEnd="8dp"
            android:background="@drawable/bg_chat_input"
            android:gravity="center_vertical"
            android:orientation="horizontal"
            android:paddingStart="16dp"
            android:paddingEnd="8dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/Chat_Screen_Send"
            app:layout_constraintStart_toEndOf="@+id/addBtn"
            app:layout_constraintTop_toTopOf="parent">

            <com.elaxer.main_section.User_Chat_Functionality.Emoji.SuperNova.Helper.EmojiconEditText
                android:id="@+id/Chat_Screen_Text_Message"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@null"
                android:hint="Type a message..."
                android:imeOptions="actionSend"
                android:importantForAutofill="no"
                android:inputType="textShortMessage"
                android:textSize="15sp" />

            <ImageView
                android:id="@+id/Chat_Screen_Smiley"
                android:layout_width="36dp"
                android:layout_height="36dp"
                android:background="@drawable/transparent_bg_ripple"
                android:src="@drawable/ic_emoji"
                app:tint="#888888"
                tools:ignore="ContentDescription" />
        </LinearLayout>

        <ImageButton
            android:id="@+id/Chat_Screen_Send"
            android:layout_width="44dp"
            android:layout_height="44dp"
            android:layout_marginEnd="4dp"
            android:background="?attr/selectableItemBackgroundBorderless"
            android:backgroundTint="@android:color/transparent"
            android:src="@drawable/ic_baseline_mic_24"
            android:scaleType="centerInside"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/cameraBtn"
            app:layout_constraintTop_toTopOf="parent"
            app:tint="@color/black"
            tools:ignore="ContentDescription" />

        <ImageButton
            android:id="@+id/cameraBtn"
            android:layout_width="44dp"
            android:layout_height="44dp"
            android:background="?attr/selectableItemBackgroundBorderless"
            android:backgroundTint="@android:color/transparent"
            android:src="@drawable/camera"
            android:scaleType="centerInside"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:tint="@color/black"
            tools:ignore="ContentDescription" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Vector:

<?xml version="1.0" encoding="utf-8"?>

<vector
    xmlns:android="http://schemas.android.com/apk/res/android"

    android:width="400dp"
    android:height="108dp"

    android:viewportWidth="400"
    android:viewportHeight="108">

   

    <path
        android:fillColor="@color/primary"
        android:pathData="

            M0,38

            C0,17 17,0 38,0


            H220


            C245,0 260,13 260,30

            C260,47 274,57 294,60



            C320,63 350,63 370,63

            H372


            C388,63 400,74 400,88



            V108

            H0

            Z

        " />

</vector>