Bottom Navigation Bar in Android

 Bottom Navigation Bar in Android

We all have come across apps that have a Bottom Navigation Bar. Some popular examples include Instagram, WhatsApp, etc. In this article, let’s learn how to implement such a functional Bottom Navigation Bar in the Android app. Below is the preview of a sample Bottom Navigation Bar:

1. activity_main.xml:

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

<androidx.constraintlayout.widget.ConstraintLayout

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

<FrameLayout

android:id="@+id/flFragment"

android:layout_width="match_parent"

android:layout_height="0dp"

app:layout_constraintBottom_toTopOf="@+id/bottomNavigationView"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintHorizontal_bias="0.5"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent" />

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

android:id="@+id/bottomNavigationView"

android:layout_width="match_parent"

android:layout_height="75dp"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintHorizontal_bias="0.5"

app:layout_constraintStart_toStartOf="parent"

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

</androidx.constraintlayout.widget.ConstraintLayout>

2.bottom_nav_menu.xml:

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

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

<item

android:id="@+id/person"

android:title="Person"

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

<item

android:id="@+id/home"

android:title="Home"

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

<item

android:id="@+id/settings"

android:title="Settings"

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

</menu>

3.styles.xml:

<resources>

<!-- Base application theme. -->

<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">

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

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

<item name="colorPrimaryDark">@color/colorPrimaryDark</item>

<item name="colorAccent">@color/colorAccent</item>

</style>

</resources>

4.fragment_first.xml:

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

<androidx.constraintlayout.widget.ConstraintLayout

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

<TextView

android:id="@+id/firstFragment"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Geeks for Geeks"

android:textColor="#43a047"

android:textSize="40sp"

android:textStyle="italic|bold"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintHorizontal_bias="0.5"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

5. FirstFragment.Java:

import java.io.*;

import androidx.fragment.app.Fragment

public class FirstFragment extends Fragment {

public FirstFragment(){

// require a empty public constructor

}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

// Inflate the layout for this fragment

return inflater.inflate(R.layout.fragment_first, container, false);

}

}

6. fragment_second.xml:

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

<androidx.constraintlayout.widget.ConstraintLayout

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

<TextView

android:id="@+id/secondFragment"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Data Structures"

android:textColor="#43a047"

android:textSize="40sp"

android:textStyle="italic|bold"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintHorizontal_bias="0.5"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

7. MainActivity.java:

import java.io.*;

import androidx.appcompat.app.AppCompatActivity;

import androidx.annotation.NonNull;

import com.example.Fragment.*;

import com.google.android.material.bottomnavigation.BottomNavigationView;

import android.os.Bundle;

import android.view.MenuItem;

public class MainActivity extends AppCompatActivity implements BottomNavigationView.OnNavigationItemSelectedListener {

BottomNavigationView bottomNavigationView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

bottomNavigationView = findViewById(R.id.bottomNavigationView);

bottomNavigationView.setOnNavigationItemSelectedListener(this);

bottomNavigationView.setSelectedItemId(R.id.person);

}

FirstFragment firstFragment = new FirstFragment();

SecondFragment secondFragment = new SecondFragment();

ThirdFragment thirdFragment = new ThirdFragment();

@Override

public boolean onNavigationItemSelected(@NonNull MenuItem item) {

switch (item.getItemId()) {

case R.id.person:

getSupportFragmentManager().beginTransaction().replace(R.id.container, firstFragment).commit();

return true;

case R.id.home:

getSupportFragmentManager().beginTransaction().replace(R.id.container, secondFragment).commit();

return true;

case R.id.settings:

getSupportFragmentManager().beginTransaction().replace(R.id.container, thirdFragment).commit();

return true;

}

return false;

}

}