Custom Toolbar With Style In Kotlin

Custom Toolbar With Style In Kotlin | Design Colorful Toolbar

In this tutorial I will show you how you can style your Toolbar by adding some text and images into your Toolbar. We will design a custom Toolbar add and some features in it Programmatically. The language I used is Kotlin. So, lets start making a Custom Toolbar with style in Kotlin.

 

For the simple custom Toolbar in Kotlin see Android Custom Toolbar In Kotlin.

 

Custom Toolbar With Style In Kotlin

 

Custom Toolbar with style inKotlin:

1- Open Your Android Studio and make a new Project. Name it “KotlinToolbar” . You can name it different too of your choice.

2- After project is created you will have two files. MainActivity.kt file and activity_main.xml file.

3- First of all go to res folder –> values –> colors.xml . Add the following colors to your colors.xml file.

 

 

4- After adding these colors the complete colors.xml file will look like this.

 

 

5- Now Right Click on your drawable folder –> New –> Vector Asset. You have to create two vector icons. I have used a Call image vector (ic_baseline_call_24). And a Message image vector (ic_baseline_message_24).

6- After creating these two vector icons now you can see them in your drawable icons list. Right click on (ic_baseline_call_24) image and it will open a file containing properties of this vector. In line no. 6 change the default Tint of the vector with this one.

 

 

6- Repeat the same procedure to change the Tint of the second vector (ic_baseline_message_24).

 

activity_main.xml

 

7- Come to activity_main.xml file and first change the default Constraint Layout to Relative Layout.

8-  Add a Toolbar in your RelativeLayout. We also add two ImageView(s) and a TextView to customize the Toolbar.

 

 

9- After adding these Views our final activity_main.xml file will be like this.

 

 

MainActivity.kt file

 

10- In our MainActivity.kt file we will initialize our Views. Then we will programmatically set Images and Text for our Views.

11- Declare all the Views on class Level. We have declared a toast variable as well because we will set a  message on the Click of each View.

 

 

12- We initialize our views inside the onCreate method like this.

 

 

13- Now we will programmatically set the Title and Subtitle of our Toolbar like this.

 

 

14- Now we give a background color to our Toolbar.

 

 

15- We set a default icon for the Toolbar. Then we give a specific color to that icon.

 

 

16- Now, we customize our TextView. We set the Text and Text size respectively like this.

 

 

17- This line will change the color of the Text.

 

 

18- Now we add our Call and Message (vector images) into our ImageView like this.

 

 

19- We have four different Views inside our Toolbar. We set a Toast message on all the Views separately. You can perform any specific function on the Click of these Views.

 

 

20- We have customized our Toolbar here. The final MainActivity.kt file is like this.

 

 

You can set any color for the background of your Toolbar. Just you need to define your own styles and colors in styles.xml and colors.xml. I hope this tutorial will help you. Have fun 🙂

 

OUTPUT 

 

 

Custom Toolbar With Style In Kotlin
Toolbar View.

 

Custom Toolbar With Style In Kotlin
Custom Toolbar With Style In Kotlin.

 

Custom Toolbar With Style In Kotlin
TextView clicked. Custom Toolbar With Style In Kotlin.

 

Call Image clicked. Custom Toolbar With Style In Kotlin.

 

Message Image Clicked. Custom Toolbar With Style In Kotlin.

 

 

More Android Posts:

Custom Toolbar in Kotlin.

Enable/Disable WiFi Availability in KOTLIN.

Alert Dialog KOTLIN.

Programmatically Check Internet Connection In Android.

Leave a Comment

Your email address will not be published. Required fields are marked *