Maximal Flexibility: A Guide to Application and Customization of the Android Toolbar

Explore our blog post for a comprehensive guide on creating and customizing the Android Toolbar. From XML layouts to Kotlin code, we show you how to effectively utilize the Toolbar and tailor it to the needs of your app. Dive in and master the art of Toolbar design for an optimal user experience!

What is the Android Toolbar?

The Android Toolbar is typically placed at the top of the screen. The application title, logo, navigation icon, and menu bar are displayed within the Toolbar. The Toolbar serves as the Material Design replacement for the outdated ActionBar.

Toolbar Dependencies in Gradle

To use the Toolbar, we need the following dependency:

 implementation 'com.android.support:appcompat-v7:27.1.0'

Toolbar in XML Layouts

In a new Android Studio project, a Toolbar is not defined in the XML layout by default. However, a Toolbar with the application name is displayed at the top in the XML preview. This is because the DarkActionBar style is defined in the resources and applied in the AndroidManifest.xml.

XML Layout for the Toolbar

The Toolbar is added to the activity_main.xml layout using the following code:

  <android.support.v7.widget.Toolbar
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />   

Toolbar Properties

We can set the background color, theme, as well as title, subtitle, icons, and other properties of the Toolbar.

Customizing Toolbar Properties

 android:background="@color/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark"
app:title="Androidly Toolbar"
app:subtitle="Sub"
app:logo="@android:drawable/ic_menu_call"
app:navigationIcon="@drawable/ic_menu_black_24dp"

Creating Custom Toolbar Themes

It is possible to create custom styles and use them as themes for our Toolbar, making it easier to customize Toolbar properties.

Creating the Toolbar with Kotlin Code

The Toolbar can also be programmatically created using Kotlin code. Each XML property of the Toolbar has its corresponding method in Kotlin.

 val toolbar = findViewById(R.id.toolbar) as Toolbar?
setSupportActionBar(toolbar)
toolbar?.title = "Androidly"
toolbar?.subtitle = "Sub"
toolbar?.navigationIcon = ContextCompat.getDrawable(this,R.drawable.ic_menu_black_24dp)
toolbar?.setNavigationOnClickListener { 
    Toast.makeText(applicationContext,"Navigation icon was clicked",Toast.LENGTH_SHORT).show() 
}

Conclusion

The Android Toolbar offers a flexible way to implement menus in Android apps. With XML layouts, custom themes, and Kotlin code, we can tailor the Toolbar to the requirements of our app and ensure a smooth user experience.