Android Toolbar example [Android app bar] in Kotlin

Android Toolbar or App bar: is a part of the application, where it provides UI experience on top of the app for easy navigation and quick access to other items. A Toolbar is a generalization of the Android action bar.

Toolbar (App bar) is supporting a more focused feature set than ActionBar. From start to end, a toolbar may contain a combination of the following optional elements:

• Navigation button: Up arrow or navigation menu toggle icon in starting of Toolbar. You override the default home function and perform any action goto parent activity or open/close navigation menu toggle,
• Branded logo image: It’s useful when you want to show the logo in-app top bar. This may extend to the height of the bar and can be wider.
• Title and subtitle: If an app uses a logo image it should strongly recommend neglecting a title and subtitle. It shows the name of the brand or Activity or user landing page information.
• An action menu: The menu of actions will pin to the end of the Toolbar offering a few main operations to the user like setting, print, save, profile, etc. Or maybe sometimes you needed the same menu for every activity, then you can use the same toolbar in multiple places.

Let’s start build Toolbar in the android app :

This tutorial you will learn how to make Android Toolbar in your android app using a Kotlin Language.

Step 1. Create new project “Build Your First Android App in Kotlin“

Step 2. Set up the app bar (Toolbar)

• Add the v7 appcompat support library to your project,

dependencies { ...
implementation 'com.android.support:appcompat-v7:26.1.0'
}

Note: its updating time to time please check with google doc or add from “open modules settings”

• Make sure the activity extends AppCompatActivity:

class MyActivity : AppCompatActivity() {
  // ...
}

Step 3. Set NoActionBar theme in app res/values/styles.xml

Using NoActionbar of themes prevents the app from using the native ActionBar class to provide the app bar.

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

Step 4. Add Toolbar widget in main_activity.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    tools:context="in.eyehunt.androidtoolbarexample.MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:theme="?attr/actionBarTheme"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:logo="@mipmap/ic_launcher" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

Step 5. create new action menu

if you don’t have any menu resource file then create first “Android Resource directory” then create resource file “my_menu.xml”

Then add fowling code in “my_menu.xml”, download image from here outline_print_white.png, you add your own images

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_print"
        android:icon="@mipmap/outline_print_white"
        android:title="Print"
        app:showAsAction="always"/>
</menu>

Step 6. add following code in MainActivity.kt class kotlin

package `in`.eyehunt.androidtoolbarexample

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.view.Menu
import android.view.MenuItem
import android.widget.Toast

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        //setting toolbar
        setSupportActionBar(findViewById(R.id.toolbar))
        //home navigation
        supportActionBar?.setDisplayHomeAsUpEnabled(true)
    }

    //setting menu in action bar
    override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        menuInflater.inflate(R.menu.my_menu,menu)
        return super.onCreateOptionsMenu(menu)
    }

    // actions on click menu items
    override fun onOptionsItemSelected(item: MenuItem) = when (item.itemId) {
        R.id.action_print -> {
            // User chose the "Print" item
            Toast.makeText(this,"Print action",Toast.LENGTH_LONG).show()
            true
        }
        android.R.id.home ->{
            Toast.makeText(this,"Home action",Toast.LENGTH_LONG).show()
            true
        }

        else -> {
            // If we got here, the user's action was not recognized.
            // Invoke the superclass to handle it.
            super.onOptionsItemSelected(item)
        }
    }
}

Step 7. Run the application, in the emulator or On your Android device

Output screenshot Android Toolbar example in kotlin

Download Android Toolbar example in kotlin source code  :

https://github.com/EyeHunts/AndroidToolbarexample

Note : This example (Project) is developed in Android Studio 3.0.1 ,tested on Android 7.1.1 ( Android Nougat), compile SDK version API 26: Android 8.0 (Oreo)

MinSdkVersion=”15″

TargetSdkVersion=”26″

Coding in Kotlin

Bonus: Android Toolbar does everything you can do with Android ActionBar, but Toolbar gives you the freedom to do customizations that you can’t do easily with ActionBar.