Gradient Toolbar in the Android App

Hello there, today we will create a custom toolbar and also apply a gradient as shown.

First, let us create a new project or choose an existing one. To add a gradient to the toolbar, we need to edit our styles.xml. We will choose a theme with no action bar, then we will add our own custom toolbar to the layout.

Open your style.xml file and this is how it may look:

//styles.xml
<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
  
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>
....

Here, we will change the parent theme, we will use Theme.AppCompat.Light.NoActionBar, this will remove our default toolbar. Now we can add our custom property here.

//styles.xml
<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
  
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowTranslucentStatus">true</item>
</style>

</resources>
....

Our work with styles is done, let us create our custom layout of the toolbar:

This layout file will have a linear layout as the parent and toolbar as its child. I am naming this file gradient_toolbar.xml

//gradient_toolbar.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="80sp"
    android:background="@drawable/gradient_drawable"
    android:gravity="bottom"
    >

    <androidx.appcompat.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?actionBarSize"
        android:id="@+id/toolbar"
        />

</LinearLayout>

After creating this file, you will see an error on gradient_drawable, we haven’t created this drawable yet. Create a new drawable with the name gradient_drawable

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

    <gradient
       android:startColor="@color/colorPrimary"
       android:endColor="@color/colorPrimaryDark"
       android:angle="180"
    />

</shape>

Let us include our gradient_toolbar.xml in activity layout:

...
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toTopOf="parent"
    >
    <include layout="@layout/gradient_toolbar"/>
</LinearLayout>
...

By doing this, we have included our custom toolbar layout in our activity layout, now we will set toolbar as default through our java code:

...
Toolbar toolbar = findViewById(R.id.toolbar);
toolbar.setTitleTextColor(Color.WHITE);
setSupportActionBar(toolbar);
...

This will set our default toolbar!

You can create some amazing gradients with this color combination

Do clap if you find this useful. See you next time.