Gradient Toolbar & Statusbar in Android

Gradients are a trend in mobile app design that brings life to the app UI. Creating a gradient toolbar is a relatively simple task in Android, you achieve it by simply adding a gradient background to the toolbar, but this doesn’t cover the status bar, thus not creating the desired effect.

Toolbar and status bar are separate entities in Android. Thus there is no straightforward way to have a single gradient from the top of the screen to the bottom edge of our toolbar. But there are hacks to achieve this. Let’s see how we can do it.

The first step is to create a gradient drawable. Create an XML file in your drawable folder named gradient_bg.xml.

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

    <gradient android:angle="0"
        android:startColor="#2ECAD5"
        android:endColor="#2B95CE"/>

</shape>

For choosing awesome gradient colors for your app, I recommend CoolHue and uiGradients.

Now, before we design our custom toolbar, we need to make sure that Android doesn’t attach a toolbar automatically. Open your styles [res/values/styles.xml file].

Override your app style. The first two styles here, remove the default action bar of android from your app so that you can add your custom-designed action bar. The next two lines ensure that your app window covers the status bar on the top, but leaves the soft button bar on the bottom.

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowDrawsSystemBarBackgrounds">false</item>
</style>

Okay! Now it’s time to create our custom toolbar. 24dp is the default height of the status bar. And the default height of status bar + toolbar is 80dp. So we give our RelativeLayout a height of 80dp to accommodate both, and we keep a top margin of 24dp because in the next steps we are about to push the parent container out of its default area into the entire screen area that includes the status bar.

In your activity layout, add the following code at the top of the root layout.

<RelativeLayout
    android:layout_alignParentTop="true"
    android:id="@+id/appbarlayout"
    android:elevation="4dp"
    android:background="@drawable/gradient_bg"
    android:layout_width="match_parent"
    android:layout_height="80dp">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_marginTop="24dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</RelativeLayout>

And in your activity’s onCreate method, add the following:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    
    //this comes before setContentView(...)
     getWindow().setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS );
    
    //set content view here
}

That’s it! Run the app, you should see a smooth gradient effect. You can play with the gradient colors and the angle.

Originally published at Fabcoding.