While it's pretty common in iOS, gradient toolbar is rare in Android possibly owing to the fact that status bar and toolbar are treated as two separate window entities in Android which causes difficulty in creating a single gradient view. However, there are hacks to combine status bar and toolbar. Let's talk about one and see how we can apply a gradient drawable to both the entities.


The first thing we need to create is a Gradient Drawable. There are actually two ways to create it. 

- using xml drawable

- using GradientDrawable class

 We will first see how to create an xml gradient drawable and apply it as the background to our desired entities.

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

We will assume you have a working android project. To create a gradient drawable, create a new linear_gradient_drawable.xml file in drawable folder. Since toolbar is rectangular, we will create a rectangle shaped drawable for it.

<shape android:shape="rectangle">

Replace the default selector tag in file with shape tag and add shape property to it with rectange value just like the code example above. Now, we add gradient tag inside the shape to be able to draw a color gradient using two or more colors. The key to drawing color gradients is the colors (start, center and end) and the angle at which the colors will be positioned relative to each other. Since we are creating a linear gradient, we will keep colors at 0 angle. If you are having a hard time finding soothing colors for gradient, I recommend visiting CoolHue

app:title="Android Gradient Toolbar"
view raw toolbar.xml hosted with ❤ by GitHub

The next step is to create the toolbar along with a parent container for it that will cover the status bar as well. The idea here is to put the parent container out of the activity area, into the status bar area. With status bar set to translucent (thanks to the flag), we can push the parent container to status bar area. As in the code example above, we declare a RelativeLayout with toolbar as its child.

We give the relative layout a height of 80 to accomodate both, toolbar and status. Also, we keep the toolbar at the bottom of the relative layout to make sure some space (24px, to be exact) is left for status bar. We set the linear_gradient_drawable, we created earlier, as the background of relative layout. The toolbar's background color is set to transparent by default, so there is no need to worry about its background.

protected void onCreate(Bundle savedInstanceState) {
//must be called before setContentView(...)
Window window = getWindow();
//The rest of the code goes here
view raw MainActivity.java hosted with ❤ by GitHub

The following piece of code (above) will help us get our translucent status bar, and the ability to push our activty layout to status bar for the gradient to work for status bar. You might be wondering two things after looking at the code. One, why the if condition around the window flags and second, why is it put before setContentView(...) when this method is what links activity to its layout? Well, the if condition goes there for a version check as we can't change statusbar color in android versions before KITKAT (remember the not so fascinating black bar?) and for the placement, the reason would be that we need to get the activity ready for the push of the relative layout to the unknown territory before the relative layout is attached to it.

One last thing we need, before we build the project,  is to make sure a toolbar is not attached automatically. If you have already taken care of it by overriding the style (in styles resource file), then it's okay, go run the project. If not, change it to any style that doesn't contain an actionbar, like this one:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

Okay. So we are done creating our gradient colored toolbar and statusbar, and that too, successfully! It's time to go for the alternate way of doing the same thing, you may call it The Java Way.

RelativeLayout layout = (RelativeLayout) findViewById(R.id.rel);
GradientDrawable drawable = new GradientDrawable();
drawable.setColors(new int[] {

As mentioned earlier, we are doing almost the same thing, only difference is we do it in java instead of plain xml. You may find this approach slightly less controlling but both are correct ways.

So as we already have a relative layout declared, we get an instance of it using findViewById. There are two possible ways of setting a gradient drawable now. One by creating a new drawable altogether using GradientDrawable class or by simpling setting the drawable we created with the help of xml as its background, which will look like this,


while the other idea of getting a new drawable using the predefined class looks like the code example above (LinearGradientDrawable.java).

We use GradientDrawable class to create an object of it, use setColors method to give it its colors (we have two) by passing an array of colors, which have to be integers, that's why Color.parseColor(...).

Then we apply setGradientType to let the object know that we're infact opting for linear gradient. One thing that won't be similar to the xml drawable is angle. With GradientDrawable, we have to use orientation instead of angle for relatively placing our colors. For angle 0, we have got orientation flag LEFT_RIGHT. 

Finally, after successfully creating our java drawable we set it as layout's background and voila, same thing happened, but in java and we are done. We have got an xml drawable and a java drawable both of which can be used to obtain the same gradient effect. I would recommend experimenting a bit with gradient drawable, specifically with their types and see how they change the experience. You may also play with angles or colors to get a different view. And as I have been saying for a while now, do share your problems (if you really have one) with others in the comments below.

Enjoyed reading this article?

Just tap onbelow to recommend it to others!