How to implement Android Navigation Component with Bottom Navigation

In this android programming source code example, we are going to implement Android Navigation Component with Bottom Navigation.

You can copy and adopt this source code example to your android project without reinventing the wheel.

Below is a step by step source code to implement Android Navigation Component with Bottom Navigation.

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=".BluetoothAndNavigation.BluetoothAndNavigationActivity13">

    <fragment
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/bottomNav"
        app:defaultNavHost="true"
        app:navGraph="@navigation/nav_graph3"/>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:menu="@menu/bottom_menu"
        app:elevation="2dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

res/navigation/nav_graph3.xml

<?xml version="1.0" encoding="utf-8"?>
<navigation 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/nav_graph3"
    app:startDestination="@id/homeFragment">

    <fragment
        android:id="@+id/homeFragment"        android:name="com.bluapp.androidview2.BluetoothAndNavigation.NavSecFragment"
        android:label="fragment_nav_sec"
        tools:layout="@layout/fragment_nav_sec" />
    <fragment
        android:id="@+id/directionFragment"        android:name="com.bluapp.androidview2.BluetoothAndNavigation.NavSecFragment"
        android:label="fragment_nav_sec"
        tools:layout="@layout/fragment_nav_sec" />
    <fragment
        android:id="@+id/commentFragment"        android:name="com.bluapp.androidview2.BluetoothAndNavigation.NavSecFragment"
        android:label="fragment_nav_sec"
        tools:layout="@layout/fragment_nav_sec" />
</navigation>

res/menu/bottom_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/homeFragment"
        android:title="Home"
        android:icon="@drawable/tab_home"/>

    <item
        android:id="@+id/directionFragment"
        android:title="Direction"
        android:icon="@drawable/tab_direction"/>

    <item
        android:id="@+id/commentFragment"
        android:title="Comment"
        android:icon="@drawable/tab_comment"/>

</menu>

MainActivity.java

import androidx.appcompat.app.AppCompatActivity;
import androidx.navigation.NavController;
import androidx.navigation.Navigation;
import androidx.navigation.ui.NavigationUI;

import android.os.Bundle;

import com.bluapp.androidview2.R;
import com.google.android.material.bottomnavigation.BottomNavigationView;

public class BluetoothAndNavigationActivity13 extends AppCompatActivity {
    private BottomNavigationView bottomNavigationView;
    private NavController navController;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_bluetooth_and_navigation13);
        bottomNavigationView = (BottomNavigationView) findViewById(R.id.bottomNav);
        navController = Navigation.findNavController(this, R.id.nav_host_fragment);
        NavigationUI.setupWithNavController(bottomNavigationView, navController);
    }
}

fragment_nav_sec.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:id="@+id/constraintlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".BluetoothAndNavigation.NavSecFragment">

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Blank Fragment"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

NavSecFragment,java

import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


public class NavSecFragment extends Fragment {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_nav_sec, container, false);
        return rootView;
    }
}

app/build.gradle

implementation 'androidx.navigation:navigation-fragment:2.1.0-alpha06'
implementation 'androidx.navigation:navigation-ui:2.1.0-alpha06'

If you have any question or suggestions kindly use the comment box or you can contact us directly through our contact page below.

Add a Comment