How to Implement SuperBottomBar in Android App? - GeeksforGeeks

23 Apr, 2021
In this article, we are going to implement bottom navigation like there in Spotify. We all have come across apps that have a Bottom Navigation Bar. Some popular examples include Instagram, Snapchat, etc. In this article, let’s learn how to implement an easy stylish SuperBottomBar functional Bottom Navigation Bar in the Android app. For Creating a Basic Bottom Navigation bar refer to Bottom Navigation Bar in Android. 
Step 1: Create a New Project
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.
Step 2: Add dependency and JitPack Repository
Navigate to the Gradle Scripts > build.gradle(Module:app) and add the below dependency in the dependencies section.   
implementation ‘com.github.ertugrulkaragoz:SuperBottomBar:0.4’
Add the JitPack repository to your build file. Add it to your root build.gradle at the end of repositories inside the allprojects{ } section.
allprojects {
 repositories {
   ...
   maven { url “https://jitpack.io” }
     }
}
After adding this dependency sync your project and now we will move towards its implementation.  
Step 3: Working with the menu file
Refer to How to Create Menu Folder & Menu File in Android Studio and create a menu file. Below is the code for the menu.xml file.
XML
<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android">    <item        android:id="@+id/home_super_bottom_bar"        android:icon="@drawable/ic_home_black_24dp"        android:title="Home" />      <item        android:id="@+id/radio_super_bottom_bar"        android:icon="@drawable/ic_message_black_24dp"        android:title="Chat" />      <item        android:id="@+id/search_super_bottom_bar"        android:icon="@drawable/ic_search_black_24dp"        android:title="Search" />      <item        android:id="@+id/library_super_bottom_bar"        android:icon="@drawable/ic_library_books_black_24dp"        android:title="Book" />      <item        android:id="@+id/profile_super_bottom_bar"        android:icon="@drawable/ic_person_black_24dp"        android:title="Profile" />      </menu>
Step 4: Working with the activity_main.xml file
Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. 
XML
<?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:gravity="bottom"    android:orientation="vertical"    tools:context=".MainActivity">      <me.ertugrul.lib.SuperBottomBar        android:id="@+id/bottomBar"        android:layout_width="match_parent"        android:layout_height="55dp"        app:sbb_menu="@menu/menu" />  </LinearLayout>
Step 5: Working with the MainActivity.java file
Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail. We have just set a listener to the BottomBar.
Java
import android.os.Bundle;import android.widget.Toast;  import androidx.appcompat.app.AppCompatActivity;  import me.ertugrul.lib.OnItemSelectedListener;import me.ertugrul.lib.SuperBottomBar;  public class MainActivity extends AppCompatActivity {          SuperBottomBar botttomBar;      @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);                  // initialise the layout        botttomBar = findViewById(R.id.bottomBar);                  // when we click on any item the show the toast message as selected        botttomBar.setOnItemSelectListener(new OnItemSelectedListener() {            @Override            public void onItemSelect(int i) {                Toast.makeText(MainActivity.this, "Selected", Toast.LENGTH_LONG).show();            }        });    }}
Output:
Android-Bars
Android
Java
Java
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Resource Raw Folder in Android Studio
Flutter - Custom Bottom Navigation Bar
How to Read Data from SQLite Database in Android?
How to Post Data to API using Retrofit in Android?
Retrofit with Kotlin Coroutine in Android
Arrays in Java
Split() String method in Java with examples
For-each loop in Java
Object Oriented Programming (OOPs) Concept in Java
Arrays.sort() in Java with examples