Android Toolbar Tutorial - XML Layout and Kotlin With Examples

Android Toolbar widget is used to create menus in the apps. We will learn how to create a Toolbar using the XML layout and Kotlin code. We will implement various toolbar properties in an example Android app.

What is Android Toolbar?

Android Toolbar widget is generally found on the top of the screen. The application title, logo, navigation icon, and the menu bar is displayed inside the toolbar.

The toolbar is the material design replacement for the old and now deprecated ActionBar.

Toolbar Gradle Dependencies

The toolbar is available with the following dependency.

Android Toolbar can be supplied either from the themes or from the layout.

Android Apps Default Toolbar

When you create a new android studio project, you might see that the activity_main.xml doesn’t have any Toolbar defined in the XML. Still, when you see the XML preview, there is a Toolbar with the application name by default at the top.

This is because the following style is defined in the styles.xml, which is ultimately attached in the AndroidManifest.xml file.


Toolbar from Themes

DarkActionBar theme adds the Toolbar at the top of the app by default.

We can change the parent theme in the above image from Theme.AppCompat.Light.DarkActionBar to Theme.AppCompat.Light.NoActionBar to remove the Toolbar that is displayed as a part of the activity theme.

Let’s change the theme and add the Toolbar in the activity_main.xml file.

Toolbar XML Layout

We have added the toolbar in our activity_main.xml layout file using the following code.

This will display a Transparent Toolbar with no text or any other items.

We have to add more properties to utilize Toolbar effectively.

1. Setting Toolbar Background Color

We have to add the following XML attribute in our Toolbar tag for the background color.

2. Setting the Theme

We can set the toolbar theme using the following code.

We are using a default theme for the layout. Dark indicates that the text colors would be light (generally white).

We can also create our own custom themes in the styles.xml file.

3. Setting title, subtitle, icons

  • Title: app:title="Androidly Toolbar"
  • Subtitle: app:subtitle="Sub"
  • Logo: app:logo="@android:drawable/ic_menu_call"
  • Navigation Icon: app:navigationIcon=""

4. Toolbar Preview

Our toolbar looks like the below image after doing all the above changes.


Toggle the theme to @style/ThemeOverlay.AppCompat.Light and you shall see inverted colors.


There are many XML attributes to customize the Toolbar properties.
For example: titleTextColor, subtitleTextColor, subtitleTextAppearance, titleTextAppearance, etc.

Android Toolbar Themes

We can create our own custom styles and assign them as a theme on our Toolbar. This will be much easier than adding all those XML properties.

Let’s use the custom theme in the activity_main.xml file.

The AppTheme style gets updated in the AndroidManifest.xml file. Our Toolbar will look like the below image.


Android Custom Toolbar

We can define our own custom views inside a Toolbar. The following layout defines custom views within the toolbar.



Creating Toolbar using Kotlin Code

We can create toolbars programmatically using Kotlin code. Each of the toolbar XML properties has its equivalent Kotlin methods.

The following MainActivity.kt class is defined below.

Using the as operator, we safely typecast the XML view to the toolbar instance.

The setNavigationOnClickListener triggers a toast message when the navigation icon is clicked from the menu.

By admin

Leave a Reply

%d bloggers like this: