How to Create Gradient Toolbar and Status Bar on Android

Profile picture of Akshay Rana Hacker Noon

Akshay Rana

Android and web developer

Hello, Today we are going to learn how we can do an amazing custom toolbar with gradient effect and also apply gradient to status bar as below

picture

First, let’s create a new project or open your existing one.

To create a gradient to status bar and toolbar we need to edit our styles.xml file to make it an action bar theme and apply full screen so we can add our status bar personalized.

See the styles.xml snippet below and modify your like this.

Open the res folder, then open the values ​​folder and select style.xml.

<resources>

    
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        
        <item name="colorPrimary">@color/colorPrimaryitem>
        <item name="colorPrimaryDark">@color/colorPrimaryDarkitem>
        <item name="colorAccent">@color/colorAccentitem>

    style>

resources>

First, we need to change the parent attribute and replace the value with

Theme.AppCompat.Light.NoActionBar

by making this default action bar will be removed.

Now we add a property in the styles.xml

<resources>

    
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        
        <item name="colorPrimary">@color/colorPrimaryitem>
        <item name="colorPrimaryDark">@color/colorPrimaryDarkitem>
        <item name="colorAccent">@color/colorAccentitem>

        <item name="android:windowTranslucentStatus">trueitem>
    style>

resources>

This will give us the option to add a custom status bar.

For the custom toolbar, we need to create a custom layout file.

To do this, we create a new layout file by right-clicking on the layout folder, then clicking on new, then clicking on the layout resource folder.

We will name this file as

custom_toolbar

.

In this file, we are going to add toolbar widget in linear layout and set height to size of action bar and set ID as toolbar. Also, we set the linear layout height to 80sp and gravity down because the default status bar height is 24sp and the action bar size is 80sp – 24sp = 56sp.

Our file will look like this below.


<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_toolbar"
    android:gravity="bottom"
    >

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

LinearLayout>

To add the gradient to our toolbar and status bar, we need to create a drawable gradient, so let’s create a drawable file.

Right click the drawable folder and then click a new drawable resource file and we name that file as

gradient_toolbar

.

Now copy the code below and paste it into your

gradient_toolbar

to file.


<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">

    <gradient
        android:startColor="@color/startGradientColor"
        android:endColor="@color/endGradientColor"
        android:angle="180"
        />

shape>

In the code above, we are creating a new gradient background for our toolbar.

To set this background on the toolbar, we need to open our custom_toolbar.xml file and add the background attribute to the linear layout.

Now that we have completed our custom toolbar part, it is now time to apply this toolbar to our activity.

To do this, open your activity XML file and include your custom_toolbar.xml file like this.


<androidx.constraintlayout.widget.ConstraintLayout 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=".MainActivity">

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

    ...

androidx.constraintlayout.widget.ConstraintLayout>

After including the file, we need to set the toolbar to the action bar in your activity java file.

Open your activity java file and get the toolbar using findViewById and pass the toolbar id we defined custom_toolbar.xml file and call it setSupportActionBar method and skip our toolbar.

public class MainActivity extends AppCompatActivity {

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

        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);


    }
}

If you run your app, you will see the gradient applied successfully, but the title color in the toolbar is black, which makes our toolbar look ugly. To make it amazing, we add white color to the toolbar title by calling the method setTitleTextColor of the toolbar widget and pass the

Color.WHITE

static variable.

toolbar.setTitleTextColor(Color.WHITE);

Now launch your app and your nice and beautiful custom toolbar will appear.

If you learn something new, please share this article with your friends and friends. Thank you and good day.

Keywords

Comments are closed.