Android BottomAppBar Using Kotlin With Example

In this article, we will learn about android BottomAppBar using Kotlin. We will go through various example that demonstrates how to use different attributes of BottomAppBar. For example,

In this article, we will get answer to questions like –

What is BottomAppBar?
Why should we consider BottomAppBar while designing ui for any app?
What are possibilities using BottomAppBar while designing ui? etc.

Getting Started

We can define android BottomAppBar widget as below –

BottomAppBar is an extension of Toolbar supporting shaped background that cradles an attached FloatingActionButton. It means BottomAppBar provides an easy to navigation drawer and some primary actions including floating action buttons. Since it is placed at bottom of the screen, it’s easier to click on these primary actions button than when these buttons are placed at top of the screen in toolBar.

Now, how do we use BottomAppBar in android application ?

Creating New Project

At first, we will create an application.
So, follow steps below to create any android project in Kotlin –

Step	Description
1.	Open Android Studio (Ignore if already done).
2.	Go to File => New => New Project. This will open a new window. Then, under Phone and Tablet section, select Empty Activity. Then, click Next.
3.	In next screen, select project name as BottomAppBar. Then, fill other required details.
4.	Then, clicking on Finish button creates new project.

Newbie in Android ?

Some very important concepts (Recommended to learn before you move ahead)

Install Android Studio

Create New Project in Android Studio

Android Project Structure

Run / Debug / Test Android App

Before we move ahead, we need to setup for viewBinding to access Android BottomAppBar Using Kotlin file without using findViewById() method.

Setup ViewBinding

Add viewBinding true in app/build.gradle file.

 
 android { 
 	// OTHER CODE... 
 	buildFeatures { 
 		viewBinding true 
 	} 
 }

Now, set content in activity using view binding.
Open MainActivity.kt file and write below code in it.

 
 class MainActivity : AppCompatActivity() { 
 	
 	private lateinit var binding: ActivityMainBinding 
 	
 	override fun onCreate(savedInstanceState: Bundle?) { 
 		super.onCreate(savedInstanceState) 
 		binding = ActivityMainBinding.inflate(layoutInflater) 
 		val view = binding.root 
 		setContentView(view) 
 	} 
 }

Now, we can access view in Kotlin file without using findViewById() method.

Using BottomAppBar in Kotlin

Follow steps below to use BottomAppBar in newly created project –

Open res/values/strings.xml file. Then, add below code into it.

<resources>
    <string name="app_name">BottomAppBar</string>
    <string name="floating_action_button">Floating Action Button</string>
</resources>

We need some drawable images to be used with menu. So, add some vector image using our tutorial on Add Vector Image in Android Using Vector Asset Studio. In our application, we have added four icons – add icon, menu icon, photo icon and search icon.

Now, we need to add menu for bottomAppBar. So, create a new folder, menu, in main/res folder of the application.

Once menu folder is created, we need to create new xml file for different menu items. So, create new menu file, bottom_app_bar_menu.xml, in it. Then, add below code in it –

<?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/photos"
        android:icon="@drawable/ic_photo"
        android:title="Photos"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/search"
        android:icon="@drawable/ic_search"
        android:title="Search"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/option_1"
        android:title="Option 1"
        app:showAsAction="never" />

</menu>

Here, we have created 3 different menus in it. photos and search menus are visible only if there is some space available in bottomAppBar.

Now, we will use bottomAppBar in xml file. So, open res/layout/activity_main.xml file. Then, add below code in it –

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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=".MainActivity">

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottom_app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/bottom_app_bar_menu" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Here,

app:menu=”” : Using this attribute, we set menu to be shown in bottomAppBar.

We can also access bottomAppBar in Kotlin File, MainActivity.kt as below –

package com.tutorialwing.bottomappbar

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.tutorialwing.bottomappbar.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

	private lateinit var binding: ActivityMainBinding

	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)

		binding = ActivityMainBinding.inflate(layoutInflater)
		setContentView(binding.root)
                // We can access bottomAppBar as binding.bottomAppBarID. Here, id is bottomAppBar. So, we can access it as binding.bottomAppBar.

	}
}

Now, run the application. We will get output as below –
Tutorialwing Kotlin Android BottomAppBar Using Kotlin With Example

Set Menu Item Click Listener in BottomAppBar

Till now, we have just set different menus in bottomAppBar. Now, we need to set click listener on those menu items. So, add below lines of code in MainActivity.kt file.

package com.tutorialwing.bottomappbar

import android.os.Bundle
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import com.tutorialwing.bottomappbar.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

	private lateinit var binding: ActivityMainBinding

	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)

		binding = ActivityMainBinding.inflate(layoutInflater)
		setContentView(binding.root)

		setupClickListener()
	}

	private fun setupClickListener() {
		binding.bottomAppBar.setOnMenuItemClickListener {
			when (it.itemId) {
				R.id.search -> {
					Toast.makeText(this, "Search Clicked", Toast.LENGTH_SHORT).show()
					true
				}
				R.id.photos -> {
					Toast.makeText(this, "Photos Clicked", Toast.LENGTH_SHORT).show()
					true
				}
				R.id.option_1 -> {
					Toast.makeText(this, "Option 1 Clicked", Toast.LENGTH_SHORT).show()
					true
				}
				else -> false
			}
		}
	}
}

Inside setupClickListener() method, we have set click listener on menu items. In when block, we are checking based on id of menu item. If it matches with any of them, we are showing toast message.

Show navigation Icon

Using app:navigationIcon=”” attribute, we can set navigation icon. Here, we have set menu icon as navigation icon as below –
Tutorialwing Kotlin Android BottomAppBar Using Kotlin With Example Set Navigation Icon in Kotlin

Set Custom Style in BottomAppBar

Using style=”” attribute, we can set custom style in bottomAppBar as below –

<com.google.android.material.bottomappbar.BottomAppBar
    android:id="@+id/bottom_app_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:menu="@menu/bottom_app_bar_menu"
    app:navigationIcon="@drawable/ic_menu"
    style="@style/Widget.MaterialComponents.BottomAppBar.Colored"
    />

Now, run application. We will get output as below –
Tutorialwing Kotlin Android BottomAppBar in Kotlin Set custom style example

Show Floating Action Button in BottomAppBar

We are now going to add floating action button in BottomAppBar. Follow steps below to do it –

Open activity_main.xml file. Then, add below code in it –

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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=".MainActivity">

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/black"
        android:contentDescription="@string/floating_action_button"
        android:src="@drawable/ic_add"
        android:tintMode="@color/white"
        app:fabSize="auto"
        app:layout_anchor="@id/bottom_app_bar" />

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottom_app_bar"
        style="@style/Widget.MaterialComponents.BottomAppBar.Colored"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:fabAlignmentMode="center"
        app:fabCradleMargin="0dp"
        app:fabCradleRoundedCornerRadius="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/bottom_app_bar_menu"
        app:navigationIcon="@drawable/ic_menu" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Then, we add click listener on floating action button as below –

binding.fab.setOnClickListener {
	Toast.makeText(this, "FAB Clicked", Toast.LENGTH_SHORT).show()
}

Finally, code inside MainActivity.kt file is –

package com.tutorialwing.bottomappbar

import android.os.Bundle
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import com.tutorialwing.bottomappbar.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

	private lateinit var binding: ActivityMainBinding

	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)

		binding = ActivityMainBinding.inflate(layoutInflater)
		setContentView(binding.root)

		setupClickListener()
	}

	private fun setupClickListener() {
		binding.fab.setOnClickListener {
			Toast.makeText(this, "FAB Clicked", Toast.LENGTH_SHORT).show()
		}

		binding.bottomAppBar.setOnMenuItemClickListener {
			when (it.itemId) {
				R.id.search -> {
					Toast.makeText(this, "Search Clicked", Toast.LENGTH_SHORT).show()
					true
				}
				R.id.photos -> {
					Toast.makeText(this, "Photos Clicked", Toast.LENGTH_SHORT).show()
					true
				}
				R.id.option_1 -> {
					Toast.makeText(this, "Option 1 Clicked", Toast.LENGTH_SHORT).show()
					true
				}
				else -> false
			}
		}
	}
}

Now, run application. We will get output as below –

Different Attributes of BottomAppBar in XML

Now, we will see how to use different attributes of Android BottomAppBar using Kotlin to customise it –

Set Id of BottomAppBar

Many a time, we need id of View to access it in kotlin file or create ui relative to that view in xml file. So, we can set id of BottomAppBar using android:id attribute like below –

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar_ID"
        />

Here, we have set id of BottomAppBar as bottomAppBar_ID using android:id=”” attribute. So, if we need to reference this BottomAppBar, we need to use this id – bottomAppBar_ID.
Learn to Set ID of BottomAppBar Dynamically

Set Width of BottomAppBar

We use android:layout_width=”” attribute to set width of BottomAppBar.
We can do it as below –

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar_ID"
        android:layout_width="wrap_content"
        />

Width can be either “MATCH_PARENT” or “WRAP_CONTENT” or any fixed value (like 20dp, 30dp etc.).
Learn to Set Width of BottomAppBar Dynamically

Set Height of BottomAppBar

We use android:layout_height=”” attribute to set height of BottomAppBar.
We can do it as below –

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar_ID"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

Height can be either “MATCH_PARENT” or “WRAP_CONTENT” or any fixed value.
Learn to Set Height of BottomAppBar Dynamically

Set Padding of BottomAppBar

We use android:padding=”” attribute to set padding of BottomAppBar.
We can do it as below –

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar_ID"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        />

Here, we have set padding of 10dp in BottomAppBar using android:padding=”” attribute.
Learn to Set Padding of BottomAppBar Dynamically

Set Margin of BottomAppBar

We use android:layout_margin=”” attribute to set margin of BottomAppBar.
We can do it as below –

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar_ID"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        />

Here, we have set margin of 10dp in BottomAppBar using android:layout_margin=”” attribute.
Learn to Set Margin of BottomAppBar Dynamically

Set Background of BottomAppBar

We use android:background=”” attribute to set background of BottomAppBar.
We can do it as below –

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar_ID"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ff0000"
        />

Here, we have set background of color #ff0000 in BottomAppBar using android:background=”” attribute.
Learn to Set Background of BottomAppBar Dynamically

Set Visibility of BottomAppBar

We use android:visibility=”” attribute to set visibility of BottomAppBar.
We can do it as below –

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar_ID"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="gone"
        />

Here, we have set visibility of BottomAppBar using android:visibility=”” attribute. Visibility can be of three types – gone, visible and invisible
Learn to Set Visibility of BottomAppBar Dynamically

Till now, we have see how to use android BottomAppBar using Kotlin. We have also gone through different attributes of BottomAppBar to perform certain task. Let’s have a look at list of such attributes and it’s related task.

We have seen different attributes of BottomAppBar and how to use it. If you wish to visit post to learn more about it

Thus, we have seen what is BottomAppBar, how can we use android BottomAppBar using Kotlin ? etc. We also went through different attributes of android BottomAppBar.