How to make Gradient Toolbar and Status bar in Android
Hello there, Today we are going to learn how we can make an amazing custom toolbar with gradient effect and also apply the gradient to the status bar like below.
First, let's create a new project or open your existing one.
To make gradient to status bar and toolbar we need to edit our styles.xml file to make it no action bar theme and apply fullscreen so that we can add our custom status bar.
See below snippet of styles.xml and edit your like this.
Open res folder then open values folder and select style.xml.
First, we need to change the parent attribute and replace the value with Theme.AppCompat.Light.NoActionBar by doing this default action bar will remove.
Now we add some property in the styles.xml
This will give us the ability to add a custom status bar.
For the custom toolbar, we need to make a custom layout file.
To do that we create a new layout file by right click on the layout folder and then click on new and then click on the layout resource folder.
We will name this file as custom_toolbar.
In this file, we will add a toolbar widget in the linear layout and set the height to action bar size and set id as toolbar. Also, we set the height of linear layout to 80sp and set gravity to bottom because the height of the default status bar is 24sp and the action bar size is 80sp - 24sp = 56sp.
Our file will look like this below.
To add the gradient to our toolbar and status bar we need to create gradient drawable so let's create a drawable file.
Right-click on the drawable folder then click on new and then drawable resource file and we name this file as gradient_toolbar.
See also: Pass Data between Activities
Now copy below code and paste it in your gradient_toolbar file.
In the above code, we are creating a new gradient background for our toolbar.
To set this background to toolbar we need to open our custom_toolbar.xml file and add background attribute to the linear layout.
Now we have completed our custom toolbar part now its time to apply this toolbar on our activity.
To do this open your activity xml file and include your custom_toolbar.xml file like this.
After including the file we need to set the toolbar to action bar in your activity java file.
Open your activity java file and get toolbar by using findViewById and pass the toolbar id we set in custom_toolbar.xml file and call the setSupportActionBar method and pass our toolbar.
If you run your app you will see the gradient has applied successfully but the color of title in the toolbar is in black color which makes our toolbar look ugly. To make it look amazing we are adding white color to the toolbar title by calling method setTitleTextColor of toolbar widget and pass the Color.WHITE static variable.
Now run your app and your beautiful and good looking custom toolbar will show up.
If you learn something new then share this article with your friends and mates. Thank You and have a nice day.