A Bottom App Bar is a UI element typically located at the bottom of a mobile screen. It works like a container for navigation buttons, action icons, and sometimes floating action buttons (FABs). Unlike a top app bar, the bottom placement makes it easier to reach, especially on larger screens. In this article we will explore the Bottom App Bar, its benefits, best practices, and implementation.
Why Bottom App Bar?
The bottom app bar provides easy access to the navigation drawer and up to four primary actions of the current activity including the Floating Action Button. By including this component in the application provides a huge response to the User Experience because, the user shouldn't have to stretch their fingers to touch the primary actions on the top of the screen whereas by including this, the user can easily click on primary actions and access the navigation drawer.
When to use Bottom App Bar?
- This should be used only for mobile devices.
- Users seeking easier access to navigation drawer that can be placed at the bottom.
- An activity with two to five primary actions.
When not to use Bottom App Bar?
- Application which is having a bottom navigation bar.
- An activity with one or two actions.
Anatomy of the Bottom App Bar
In the below anatomy taking the example of an basic application, one can see the primary action here is search and we can add other icon along with the search icon.
Steps to implement Bottom App Bar in an Application
Step 1: Create an empty activity project
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.
Step 2: Add Required Dependency
Include google material design components dependency in the build.gradle.kts file. After adding the dependencies don’t forget to click on the “Sync Now” button present at the top right corner. Note that the Navigation Rail is introduced in the latest release of the material design components version that is 1.4.0 and above.
implementation ("com.google.android.material:material:1.12.0")Note that while syncing your project you need to be connected to the network and make sure that you are adding the dependency to the app-level Gradle file as shown below.
Step 3: Creating menu items for Bottom App Bar
Creating a separate menu for Bottom App Bar so that we can make what items should appear on the bar and what items should appear under the Overflow menu control. To implement the sample menu invoke the following in the bottom_app_bar_menu.xml file under the menus folder.
bottom_app_bar_menu.xml:
<?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/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" />
<item
android:id="@+id/option_2"
android:title="Option 2"
app:showAsAction="never" />
</menu>
Step 4: Working with activity_main.xml file
The main layout of this sample contains one floating action button which is anchored to Bottom App Bar, which in turn both the views should be under the CoordinatorLayout otherwise error will occur. And the size of the Floating Action Button should be auto. To implement the same invoke the following code inside the activity_main.xml file.
activity_main.xml:
<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:id="@+id/layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
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:src="@android:drawable/ic_input_add"
app:tint="@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: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>
Design UI:
Step 3: Working with MainActivity.kt file
In the MainActivity.kt file there is a need to handle the buttons and the hamburger icon to perform the appropriate actions. Upon clicking the hamburger icon Navigation Drawer needs to be shown. To know how to implement Navigation Drawer refer to Navigation Drawer in Android, upon clicking the search icon the search screen should appear, etc. To implement the same invoke the following code inside the MainActivity file.
MainActivity File:
package org.geeksforgeeks.demo;
import android.os.Bundle;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import com.google.android.material.bottomappbar.BottomAppBar;
import com.google.android.material.floatingactionbutton.FloatingActionButton;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Initialize Floating Action Button (FAB)
FloatingActionButton fab = findViewById(R.id.fab);
fab.setOnClickListener(view ->
Toast.makeText(MainActivity.this, "FAB Clicked", Toast.LENGTH_SHORT).show()
);
// Initialize BottomAppBar
BottomAppBar bottomAppBar = findViewById(R.id.bottom_app_bar);
bottomAppBar.setOnMenuItemClickListener(item -> {
switch (item.getItemId()) {
case R.id.search:
Toast.makeText(MainActivity.this, "Search Clicked", Toast.LENGTH_SHORT).show();
return true;
case R.id.option_1:
Toast.makeText(MainActivity.this, "Option 1 Clicked", Toast.LENGTH_SHORT).show();
return true;
case R.id.option_2:
Toast.makeText(MainActivity.this, "Option 2 Clicked", Toast.LENGTH_SHORT).show();
return true;
default:
return false;
}
});
}
}
package org.geeksforgeeks.demo
import android.os.Bundle
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import com.google.android.material.bottomappbar.BottomAppBar
import com.google.android.material.floatingactionbutton.FloatingActionButton
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val fab: FloatingActionButton = findViewById(R.id.fab)
fab.setOnClickListener {
Toast.makeText(this, "FAB Clicked", Toast.LENGTH_SHORT).show()
}
val bottomAppBar: BottomAppBar = findViewById(R.id.bottom_app_bar)
bottomAppBar.setOnMenuItemClickListener {
when (it.itemId) {
R.id.search -> {
Toast.makeText(this, "Search Clicked", Toast.LENGTH_SHORT).show()
true
}
R.id.option_1 -> {
Toast.makeText(this, "Option 1 Clicked", Toast.LENGTH_SHORT).show()
true
}
R.id.option_2 -> {
Toast.makeText(this, "Option 2 Clicked", Toast.LENGTH_SHORT).show()
true
}
else -> false
}
}
}
}
Output: