How to Add Custom Toolbar Background in Android?

A toolbar is basically a form action bar that contains many interactive items. A toolbar supports a more focused feature than an action bar. The toolbar was added in Android Lollipop (API 21) and is the successor of the ActionBar. The toolbar is a ViewGroup that can be put anyplace in the XML layouts. Toolbar’s looks and behavior could be more efficiently customized than the ActionBar. Toolbars are more flexible than ActionBar. One can simply change its color, size, and position. We can also add labels, logos, navigation icons, and other views to it. In this article, we will see how we can customize the toolbar background using various methods. We will be seeing the following methods: 

• Solid Color Background
• Custom Gradient Background
• Image Background

Note: Before adding a custom Toolbar in your app remove the default Actionbar in your android app by following this link. 

Solid Color Background 

This is the easiest method to add background to a toolbar. In this method, we use the background attribute to set a solid color. We can either enter the hex code of the color, or we can define a color in the values resource directory. Follow the below steps:

• Create a toolbar in the activity_main.xml file.
• Add a color value in the colors.xml file with a name.
• Add background attribute in the toolbar in activity_main.xml file with the name of the color created in colors.xml file.

Below is the code for the activity_main.xml file:

XML

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Toolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/blue"
        android:title="GeeksForGeeks" />

</RelativeLayout>

Below is the code for the colors.xml file.

XML

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#6200EE</color>
    <color name="blue">#3700B3</color>
    <color name="colorAccent">#03DAC5</color>
</resources>

Output UI:

Custom Gradient Background

Gradient colors can be created with the help of two or more colors. XML offers us a cool way of creating our own gradient color that can use as a background in many places. Follow the below steps to create and set a gradient background – 

• Create an XML file in the drawable folder in resources. (Go to the app > res > drawable > Right-click > New > Drawable Resource File and name the file as background)
• Create a shape within the item and then put the gradient tag.
• Add the following attributes:
  • angle: This will set the angle at which the two colors will fade.
  • startColor: The first color of the background.
  • endColor: The second color of the background.
  • type: This will set whether the fade will be linear or circular.
• Once the background XML is created set it in the background attribute in the activity_main.xml file.

Below is the code for the background.xml file.

XML

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient
                android:angle="90"
                android:startColor="#2EDADA"
                android:endColor="#22B9D3"
                android:type="linear"/>
        </shape>
    </item>
</selector>

Below is the code for the activity_main.xml file:

XML

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Toolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/background"
        android:title="GeeksForGeeks" />

</RelativeLayout>

Output UI:

Image Background 

We can also use images as the background instead of colors. For that again we will be using the background attribute in activity_main.xml. The only thing we need to keep in our mind is that the image’s dimensions should be of the same size as that of the toolbar because the background attribute crops to fit the image in the space. See the below steps:

• Add the image to the drawable folder in resources.
• Set the image in the drawable attribute of the toolbar in the activity_main.xml file.
• Make sure the image and the toolbar have the same dimensions.

Below is the code for the activity_main.xml file:

XML

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Toolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/image"/>

</RelativeLayout>

Output UI: