BottomAppBar is an extension of Toolbar. The BottomAppBar appears at the bottom of the app window. Bringing an action menu and navigation drawer to the bottom of an app, BottomAppBar recommends a fresh new design to Android apps.
There are two modes that determine where the FAB is shown relative to the BottomAppBar.
- FAB_ALIGNMENT_MODE_CENTER mode is the primary mode with the FAB is centered.
- FAB_ALIGNMENT_MODE_END is the second mode with the FAB on the side.
Look at the demo
Let’s try to implement a BottomAppBar like a demo.
1- Open the Android Studio and create a new project and select the blank template.
2- Go to the build.gradle.xml file and enable the DataBinding feature in the Gradle file. If you’re not familiar with DataBinding, click here to read.
buildFeatures{
dataBinding true
}Add the material design dependency and sync your Gradle now
dependencies {
implementation 'androidx.appcompat:appcompat:1.4.0'
implementation 'com.google.android.material:material:1.4.0'
implementation 'androidx.constraintlayout:constraintlayout:2.1.2'
testImplementation 'junit:junit:4.+'
androidTestImplementation 'androidx.test.ext:junit:1.1.3'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
}3- Navigate to res->values and open the colors.xml file and add the below code. Delete duplicate colors tags if you have already
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="black_dark_200">#212121</color>
<color name="black_dark_500">#212121</color>
<color name="black_dark_700">#212121</color>
<color name="teal_200">#101212</color>
<color name="teal_700">#101212</color>
<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>
<!-- App colors -->
<color name="bg_color">#212121</color>
<color name="bg_color_adapter">#383838</color>
</resources>4- Open the strings.xml file and add the below code.
<resources>
<string name="app_name">BottomAppBarExample</string>
<!-- App strings -->
<string name="item_home">Home</string>
<string name="item_moments">Moments</string>
<string name="item_jobs">Jobs</string>
<string name="item_profile">Profile</string>
<string name="title">Title - %d</string>
<string name="description">Nullam gravida arcu nibh, sit amet tincidunt lorem eleifend at. Nulla eu dolor consequat, finibus leo quis, sagittis orci</string>
</resources>5- Right-click on the res folder and create a new menu resource file called bottom_menu_bar.xml and add the below code.
<?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/nav_home"
android:icon="@drawable/ic_baseline_home_24"
app:showAsAction="ifRoom"
android:title="@string/item_home" />
<item
app:showAsAction="ifRoom"
android:id="@+id/nav_moments"
android:icon="@drawable/ic_baseline_sentiment_dissatisfied_24"
android:title="@string/item_moments" />
<item
app:showAsAction="ifRoom"
android:id="@+id/nav_jobs"
android:icon="@drawable/ic_baseline_adjust_24"
android:title="@string/item_jobs" />
<item
app:showAsAction="ifRoom"
android:id="@+id/nav_profile"
android:icon="@drawable/ic_baseline_self_improvement_24"
android:title="@string/item_profile" />
</menu>6- Create a new Java class called TaskM.java and add the below code.
package com.example.bottomappbarexample;
public class TaskM {
private String title;
private String description;
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
}
7- Go to res->layout->right-click and create a new layout resource file called adapter_task.xml and add the below code. I wrote a series on RecyclerView. If you have no idea, how to display data in RecyclerView? Click here to read.
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<data>
<variable
name="task"
type="com.example.bottomappbarexample.TaskM" />
</data>
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="100dp"
app:cardBackgroundColor="@color/bg_color_adapter"
app:cardUseCompatPadding="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp">
<TextView
android:id="@+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:fontFamily="@font/roboto"
android:maxLines="1"
android:text="@{task.title}"
android:textColor="@color/white"
android:textSize="22sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/tvDescription"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/roboto"
android:text="@{task.description}"
android:textColor="@color/white"
android:textSize="16sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/tvTitle" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</layout>8- Create a new Java class called AdapterTask.java and add the below code.
package com.example.bottomappbarexample;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.NonNull;
import androidx.databinding.DataBindingUtil;
import androidx.recyclerview.widget.RecyclerView;
import com.example.bottomappbarexample.databinding.AdapterTaskBinding;
import java.util.List;
public class AdapterTask extends RecyclerView.Adapter<AdapterTask.TaskViewHolder> {
private List<TaskM> taskMList;
public AdapterTask(List<TaskM> taskMList) {
this.taskMList = taskMList;
}
@NonNull
@Override
public TaskViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
AdapterTaskBinding binding = DataBindingUtil.inflate(LayoutInflater.from(parent.getContext()), R.layout.adapter_task, parent, false);
return new TaskViewHolder(binding);
}
@Override
public void onBindViewHolder(@NonNull TaskViewHolder holder, int position) {
holder.adapterTaskBinding.setTask(taskMList.get(position));
}
@Override
public int getItemCount() {
return taskMList.size();
}
public class TaskViewHolder extends RecyclerView.ViewHolder {
AdapterTaskBinding adapterTaskBinding;
public TaskViewHolder(@NonNull AdapterTaskBinding binding) {
super(binding.getRoot());
this.adapterTaskBinding = binding;
}
}
}
9- Navigate to res->layout and open the activity_main.xml file. In this XML file, we will add the tag of RecyclerView, FloatingActionButton, and BottomAppBar. We cannot use the ConstraintLayout with BottomAppBar as the root tag. We will use a CoordinateLayout component. Your code will look like this after adding all components.
<?xml version="1.0" encoding="utf-8"?>
<layout 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">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/bg_color"
tools:context=".MainActivity">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rcvListing"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<com.google.android.material.bottomappbar.BottomAppBar
android:id="@+id/btmAppBar"
style="@style/Widget.MaterialComponents.BottomAppBar.Colored"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:backgroundTintMode="screen"
app:hideOnScroll="true"
app:menu="@menu/bottom_menu_bar"
app:navigationIcon="@drawable/ic_baseline_menu_24" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/floating"
style="@style/Widget.App.FloatingActionButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:fabAnimationMode="scale"
app:layout_anchor="@id/btmAppBar"
app:srcCompat="@drawable/ic_baseline_add_24" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</layout>10- Open the MainActivity.java file and add the below code.
package com.example.bottomappbarexample;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.databinding.DataBindingUtil;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import android.os.Bundle;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;
import com.example.bottomappbarexample.databinding.ActivityMainBinding;
import com.google.android.material.navigation.NavigationView;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity implements Toolbar.OnMenuItemClickListener {
private AdapterTask adapterTask;
private List<TaskM> taskMList;
private ActivityMainBinding binding;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
initComponents();
}
/**
* set the menu item click lister on BottomAppBar
* set the listener on left navigation icon
* set the listener on floating button
*/
private void initComponents() {
binding.btmAppBar.setOnMenuItemClickListener(this);
binding.btmAppBar.setNavigationOnClickListener(v -> Toast.makeText(MainActivity.this, "On Left Navigation Item clicked", Toast.LENGTH_LONG).show());
binding.floating.setOnClickListener(v -> Toast.makeText(MainActivity.this, "Floating Button Clicked", Toast.LENGTH_LONG).show());
initRcv();
setupDummyDataToRcv();
}
/**
* setup the orientation of Recyclerview
* initialize the TaskAdapter class
* set the adapter to RecyclerView
*/
private void initRcv() {
LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
linearLayoutManager.setOrientation(RecyclerView.VERTICAL);
binding.rcvListing.setLayoutManager(linearLayoutManager);
taskMList = new ArrayList<>();
adapterTask = new AdapterTask(taskMList);
binding.rcvListing.setAdapter(adapterTask);
}
/**
* setup the dummy data to RecyclerView
*/
private void setupDummyDataToRcv() {
for (int j = 1; j <= 30; j++) {
TaskM taskM = new TaskM();
taskM.setTitle(String.format(getString(R.string.title), j));
taskM.setDescription(getString(R.string.description));
taskMList.add(taskM);
}
adapterTask.notifyDataSetChanged();
}
@Override
public boolean onMenuItemClick(MenuItem item) {
if (item.getItemId() == R.id.nav_home) {
// TODO: 8/15/21 your code
// when home item will click from BottomAppBar
} else if (item.getItemId() == R.id.nav_jobs) {
// TODO: 8/15/21 your code
// when jobs item will click from BottomAppBar
} else if (item.getItemId() == R.id.nav_moments) {
// TODO: 8/15/21 your code
// when moments item will click from BottomAppBar
} else if (item.getItemId() == R.id.nav_profile) {
// TODO: 8/15/21 your code
// when profile item will click from BottomAppBar
}
Toast.makeText(this, item.getTitle() + " Clicked", Toast.LENGTH_LONG).show();
return true;
}
}Thanks for reading the tutorial. Subscribe to my YouTube channel. Like and Share my Facebook page with your friends.