Bottom Navigation Bar in Android Studio using Java – Bottom Navigation View

 

Bottom Navigation Bar

The Bottom Navigation Bar is a navigation view provided at the bottom of the screen making it easy for users to switch between multiple fragments or activities with the help of the bottom navigation bar.

We have provided four fragments – Home, Shorts, Subscriptions, and Library and one floating action button. Users can easily switch between any of these. You can use fragments or activities as per your choice.

Step-by-Step Implementation

Step 1: Open Android Studio, Create New Project, Choose Empty Activity and Name the Project “Bottom Navigation”.

Step 2: colors.xml

Add our lavender color 8692f7 in the colors.xml

<?xml version="1.0" encoding="utf-8"?>

<resources>

<color name="purple_200">#FFBB86FC</color>

<color name="purple_500">#FF6200EE</color>

<color name="purple_700">#FF3700B3</color>

<color name="teal_200">#FF03DAC5</color>

<color name="teal_700">#FF018786</color>

<color name="black">#FF000000</color>

<color name="white">#FFFFFFFF</color>

<color name="lavender">#8692f7</color>

</resources>

Step 3: themes.xml

Disable the action bar and change the theme color to lavender as per the below code.

<resources xmlns:tools="http://schemas.android.com/tools">

<!-- Base application theme. -->

<style name="Theme.BottomNavigation" parent="Theme.MaterialComponents.DayNight.NoActionBar">

<!-- Primary brand color. -->

<item name="colorPrimary">@color/lavender</item>

<item name="colorPrimaryVariant">@color/lavender</item>

<item name="colorOnPrimary">@color/white</item>

<!-- Secondary brand color. -->

<item name="colorSecondary">@color/teal_200</item>

<item name="colorSecondaryVariant">@color/teal_700</item>

<item name="colorOnSecondary">@color/black</item>

<!-- Status bar color. -->

<item name="android:statusBarColor">?attr/colorPrimaryVariant</item>

<!-- Customize your theme here. -->

</style>

</resources>

Step 4: Add viewBinding in the Gradle: app

We have added viewBinding because it helps to directly access the XML layout items without instantiation.

buildFeatures {

viewBinding true

}

Step 5: Add all the vector assets to the drawable folder

Icons – home, add, subscriptions, library, whatshot.

Step 6: bottom_menu.xml

Right-click on res -> Android Resource Directory and select the menu then right-click on the menu directory and click on New -> Menu Resource File and name “bottom_menu”.

<?xml version="1.0" encoding="utf-8"?>

<menu xmlns:android="http://schemas.android.com/apk/res/android">

<item

android:id="@+id/home"

android:title="Home"

android:icon="@drawable/ic_baseline_home_24"/>

<item

android:id="@+id/shorts"

android:title="Shorts"

android:icon="@drawable/ic_baseline_whatshot_24"/>

<item

android:id="@+id/fab"

android:title=""

android:enabled="false"/>

<item

android:id="@+id/subscriptions"

android:title="Subscriptions"

android:icon="@drawable/ic_baseline_subscriptions_24"/>

<item

android:id="@+id/library"

android:title="Library"

android:icon="@drawable/ic_baseline_video_library_24"/>

</menu>

Step 7: activity_main.xml

We have used a frame layout because it will replace the existing fragments with each other and make it possible for us to switch between different fragments.

<?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"

android:background="@color/lavender"

tools:context=".MainActivity">

<FrameLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:id="@+id/frame_layout"/>

<com.google.android.material.bottomappbar.BottomAppBar

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:id="@+id/bottomAppBar"

android:layout_gravity="bottom"

android:background="@color/white"

app:fabCradleMargin="10dp"

app:fabCradleRoundedCornerRadius="50dp">

<com.google.android.material.bottomnavigation.BottomNavigationView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/bottomNavigationView"

android:layout_marginEnd="20dp"

app:labelVisibilityMode="labeled"

android:background="@android:color/transparent"

app:menu="@menu/bottom_menu"/>

</com.google.android.material.bottomappbar.BottomAppBar>

<com.google.android.material.floatingactionbutton.FloatingActionButton

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:backgroundTint="@color/white"

android:src="@drawable/ic_baseline_add_24"

app:layout_anchor="@id/bottomAppBar"

app:maxImageSize="40dp"

app:tint ="@color/lavender"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Step 8: all fragments.xml

Create four fragments named – HomeFragment, ShortsFragment, SubscriptionFragment, and LibraryFragment.

fragment_home.xml

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@color/lavender"

tools:context=".HomeFragment">

<!-- TODO: Update blank fragment layout -->

<TextView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:text="Home"

android:gravity="center"

android:textSize="30sp"

android:textColor="@color/white"/>

</FrameLayout>

fragment_shorts.xml

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@color/lavender"

tools:context=".ShortsFragment">

<!-- TODO: Update blank fragment layout -->

<TextView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:text="Shorts"

android:gravity="center"

android:textSize="30sp"

android:textColor="@color/white"/>

</FrameLayout>

fragment_subscriptions.xml

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@color/lavender"

tools:context=".SubscriptionFragment">

<!-- TODO: Update blank fragment layout -->

<TextView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:text="Subscriptions"

android:gravity="center"

android:textSize="30sp"

android:textColor="@color/white"/>

</FrameLayout>

fragment_library.xml

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@color/lavender"

tools:context=".LibraryFragment">

<!-- TODO: Update blank fragment layout -->

<TextView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:text="Library"

android:gravity="center"

android:textSize="30sp"

android:textColor="@color/white"/>

</FrameLayout>

Clear all unnecessary code from all the Fragments.java – HomeFragment, ShortsFragment, SubscriptionFragment, and LibraryFragment.

Step 9: MainActivity.java

package com.example.bottomnavigation;

import androidx.appcompat.app.AppCompatActivity;

import androidx.fragment.app.Fragment;

import androidx.fragment.app.FragmentManager;

import androidx.fragment.app.FragmentTransaction;

import android.os.Bundle;

import com.example.bottomnavigation.databinding.ActivityMainBinding;

public class MainActivity extends AppCompatActivity {

ActivityMainBinding binding;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

binding = ActivityMainBinding.inflate(getLayoutInflater());

setContentView(binding.getRoot());

replaceFragment(new HomeFragment());

binding.bottomNavigationView.setBackground(null);

binding.bottomNavigationView.setOnItemSelectedListener(item -> {

switch (item.getItemId()) {

case R.id.home:

replaceFragment(new HomeFragment());

break;

case R.id.shorts:

replaceFragment(new ShortsFragment());

break;

case R.id.subscriptions:

replaceFragment(new SubscriptionFragment());

break;

case R.id.library:

replaceFragment(new LibraryFragment());

break;

}

return true;

});

}

private void replaceFragment(Fragment fragment) {

FragmentManager fragmentManager = getSupportFragmentManager();

FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();

fragmentTransaction.replace(R.id.frame_layout, fragment);

fragmentTransaction.commit();

}

}

Output