[SOLVED] How to make the background of a toolbar transparent

I have a collapsing toolbar set up and everything is working as intended. There is only one problem, when the toolbar collapses, there is a white rectangular view behind the toolbar as shown in the image below. Here is the code for the activity_home.xml file

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    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"
    tools:context=".HomeActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent"
            app:contentScrim="@drawable/custom_app_bar_background"
            app:expandedTitleTextAppearance="@style/expandedTitleTextAppearance"
            app:layout_scrollFlags="scroll|snap|exitUntilCollapsed">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:background="@drawable/custom_app_bar_background"
                android:paddingHorizontal="20dp"
                android:orientation="vertical">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="40dp"
                    android:text="Empowering Discovery: Search the Database for a World of Information"
                    android:textColor="@color/white"
                    android:textSize="30sp"
                    android:textStyle="bold"/>

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp"
                    android:text="Search The Database"
                    android:textColor="#c9d3f7"
                    android:textSize="20sp" />

                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:height="50dp"
                    android:hint="Search for media..."
                    android:paddingStart="20dp"
                    android:textColor="@color/black"
                    android:layout_marginTop="10dp"
                    android:drawableEnd="@drawable/search_btn"
                    android:paddingRight="5dp"
                    android:background="@drawable/search_bar_background"/>

            </LinearLayout>
            
            <androidx.appcompat.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@drawable/gradient"
                app:layout_collapseMode="pin"/>

        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:textSize="25sp"
            android:text="If you're looking to remove the default white background that appears while your app initializes, there isn't a direct way to remove it completely, as it's part of the Android system behavior. However, you can make it less noticeable or disguise it using various techniques. Here are a few alternatives:

1. Use a Splash Screen:
As mentioned earlier, using a splash screen with your app's branding or logo can provide a smoother transition. The splash screen gives the impression that something is happening during the initialization phase, making the white background less noticeable.

2. Optimize Initialization:
Efficiently optimize your app's initialization process. Load essential resources lazily and asynchronously. Delay resource-heavy operations until after the main activity has started. By optimizing your initialization, the white background period is minimized, making it less noticeable.

3. Set a Theme with Transparent Background:
In your app's theme, set the background to be transparent. This doesn't remove the white background but makes it less noticeable since the default background will be transparent instead of white. Add the following line to your theme in styles.xml:"/>

    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Here is the gradient.xml file code used for the toolbar background:

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

    <gradient
        android:angle="120"
        android:endColor="@android:color/transparent"
        android:startColor="#3BB1EC" />

</shape>

Here is the code for the custom_app_bar_background.xml file used as scrim for CollapsingToolbarLayout and Linear layout background when the collapsing toolbar has expanded:

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

    <gradient
        android:startColor="#3BB1EC"
        android:endColor="#216CF1"
        android:angle="120"/>

    <corners
        android:bottomRightRadius="40dp"
        android:bottomLeftRadius="40dp"/>

</shape>

I have tried setting the background of the toolbar to transparent which did not work, because the status bar color did not smoothly mix with the tool bar color. The goal was to remove the white rectangular view behind the toolbar, as shown in the picture above.