Android Toolbar Using Kotlin

Filed Under: Android

In this tutorial, we’ll be discussing the Android Toolbar widget in android and implement the various properties of it in a basic Android application.

Android Toolbar

Android Toolbar widget is typically found on the top of the screen. The application title/logo/navigation icon and the menu bar is displayed inside it.
The toolbar is the material design replacement for the old and now deprecated ActionBar.

The toolbar is available with the following dependency.


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

Android Toolbar can be supplied either from the Themes or from the layout.
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.

android-toolbar-default-style

DarkActionBar theme by default adds the Toolbar at the top.
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 do it and add the Toolbar in the activity_main.xml file.

Setting Toolbar in our Layout

We have the added Toolbar in our activity_main.xml layout in the following way:


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


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

</LinearLayout>

This would simply display a Transparent Toolbar with no text nothing.
We need to add more properties to make the Toolbar come alive.

Setting Background Color
To set the background color, we need to add the following XML attribute in our Toolbar tag in the XML above

android:background="@color/colorPrimary"

Setting the Theme
We can set the theme using the following line in our XML layout
android:theme="@style/ThemeOverlay.AppCompat.Dark"
The above is a built-in theme. Dark indicates that by default the text colors would be light(generally white).
We can also create our own custom themes in the styles.xml file.

Setting title, subtitle, icons
Following are the XML attributes used for setting:

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

Following is how our Toolbar looks in the preview:

android-toolbar-xml-layout

android-toolbar-xml-design

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

android-toolbar-xml-inverted-colors

There are plenty more XML attributes to add to the Toolbar properties.
Properties such as titleTextColor, subtitleTextColor, subtitleTextAppearance, titleTextAppearance are self explanatory.

Styling the Android Toolbar

Instead of defining so many attributes in the Toolbar itself we can create our own custom styles and assign them as a theme on our Toolbar.

Following is the code from the styles.xml file:


<resources>
    
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="toolbarStyle">@style/ToolBarStyle</item>
    </style>

    <style name="ToolBarStyle" parent="Widget.AppCompat.Toolbar">
        <item name="android:background">#EA8D8D</item>
        <item name="titleTextAppearance">@style/TitleTextAppearance</item>
        <item name="subtitleTextAppearance">@style/SubTitleTextAppearance</item>
    </style>

    <style name="TitleTextAppearance" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
        <item name="android:textSize">18sp</item>
        <item name="android:textColor">#38ADAE</item>
    </style>

    <style name="SubTitleTextAppearance" parent="TextAppearance.Widget.AppCompat.Toolbar.Subtitle">
        <item name="android:textSize">14sp</item>
        <item name="android:textColor">#00B7FF</item>
    </style>

</resources>

Our activity_main.xml looks like:


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">


    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:subtitle="Sub"
        app:title="AndroidlyToolbar" />


</LinearLayout>

The AppTheme style gets updated in the AndroidManifest.xml file and our Toolbar would now look like:

android-toolbar-styling

Android Custom Toolbar Layout

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


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">


    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:subtitle="Sub"
        app:title="AndroidlyToolbar">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">


            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:text="Text" />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:src="@drawable/ic_menu_black_24dp" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentEnd="true"
                android:layout_centerVertical="true"
                android:text="BUTTON" />

        </RelativeLayout>


    </android.support.v7.widget.Toolbar>


</LinearLayout>

It looks like the following in action:
android-toolbar-custom-layout

Let’s do things programmatically now using Kotlin.
Each of the XML properties has their equivalent Kotlin methods available.
The following MainActivity.kt class is defined below:


package net.androidly.androidlytoolbar

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.support.v4.content.ContextCompat
import android.support.v7.widget.Toolbar
import android.widget.Toast


class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        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() }
    }
}

Using the as operator, we safely typecast the XML view to the toolbar instance.
setNavigationOnClickListener triggers a toast when the navigation icon is clicked from the menu.

This brings an end to this tutorial. You can download the AndroidlyToolbar project from the link below:

Leave a Reply

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

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages