How to make the background of a toolbar transparent

Question

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.

Answer 1

It's all about AppBarLayout.

You can configure this way.

As mentioned in this question here

<com.google.android.material.appbar.AppBarLayout 
                 
        android:layout_width="match_parent"
        android:background="@null"
        android:theme="?attr/actionBarTheme"
        android:layout_height="wrap_content"
        android:id="@+id/AppBarLayout"
        android:orientation="vertical"
        android:outlineProvider="none"
        app:elevation="0dp">
    
</com.google.android.material.appbar.AppBarLayout>

Answer 2

To remove the white rectangular view behind the toolbar, you can try the following:

Use a custom background for the collapsing toolbar. This can be a transparent drawable or a drawable with a gradient that matches the status bar color. This will hide the white background when the toolbar collapses. Use a splash screen. A splash screen can be used to display the app's logo and branding while the app is initializing. This will hide the white background and give the user the impression that the app is loading. Optimize the app's initialization. This will minimize the amount of time that the white background is visible. You can do this by loading essential resources lazily and asynchronously, and by delaying resource-heavy operations until after the main activity has started. Here is an example of how to use a custom background for the collapsing toolbar:

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

    // ...

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

The custom_collapsing_toolbar_background.xml drawable can be a transparent drawable or a drawable with a gradient that matches the status bar color.

Here is an example of how to use a splash screen:

<activity android:name=".SplashActivity"
    android:theme="@style/SplashTheme">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

The SplashActivity class can be used to display the app's logo and branding while the app is initializing. Once the app has initialized, the SplashActivity can finish and the main activity can be started.

Here is an example of how to optimize the app's initialization:

public class MainActivity extends AppCompatActivity {

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

        // Load essential resources lazily and asynchronously.
        // ...

        // Delay resource-heavy operations until after the main activity has started.
        // ...
    }
}