BottomNavigationView android example

Hello friends today we will learn about bottomnavigationview, bottom tablayout and Switch tab on button click with Bottom Navigation and Navigation component.

So first we will create a new project.After creating the project, we will first design in the activity_main.whose code is given below.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/frame_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottom_view" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="?android:attr/windowBackground"
        app:menu="@menu/bottomview_menu" />

</RelativeLayout>

here we are create two component framelayout and bottomNavigationview ,in which we will see a bottomview_menu error, to fix it, after creating a menu folder, we will create a bottomview_menu in it.whose code is given below.

bottomview_menu

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

    <item
        android:id="@+id/home"
        android:icon="@drawable/ic_home"
        android:title="Home" />

    <item
        android:id="@+id/dash_board"
        android:icon="@drawable/ic_dashboard"
        android:title="Dashboard" />


    <item
        android:id="@+id/notification"
        android:icon="@drawable/ic_notification"
        android:title="Download" />

</menu>

Here we will see an error of icon type, to fix it, we will create icon by right clicking on it.

After this we will go to MainActivity and operate on Framelayout and Navigationview.Whose code given below.

MainActivity.java

package com.example.bottomviewproject;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;

import android.os.Bundle;
import android.view.MenuItem;
import android.widget.FrameLayout;

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

public class MainActivity extends AppCompatActivity {
    private BottomNavigationView bottomNavigationView;
    private FrameLayout frameLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        bottomNavigationView=findViewById(R.id.bottom_view);
        frameLayout=findViewById(R.id.frame_layout);
        if(savedInstanceState == null) {

            bottomNavigationView.setOnNavigationItemSelectedListener(nav);
            Fragment fragment = new HomeFragment();
            FragmentManager fm = getSupportFragmentManager();
            fm.beginTransaction().replace(R.id.frame_layout, fragment).commit();
            getSupportActionBar().setTitle("Home");
        }
    }

    private BottomNavigationView.OnNavigationItemSelectedListener nav = new BottomNavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            int v = item.getItemId();
            if(v==R.id.home)
            {
                getSupportActionBar().setTitle("Home");
                Fragment fragment = new HomeFragment();
                FragmentManager fm = getSupportFragmentManager();
                fm.beginTransaction().replace(R.id.frame_layout, fragment).commit();
            }
            else if (v==R.id.dash_board)
            {
                getSupportActionBar().setTitle("Dashboard");
                Fragment fragment = new DashboardFragment();
                FragmentManager fm = getSupportFragmentManager();
                fm.beginTransaction().replace(R.id.frame_layout, fragment).commit();
            }

            else if (v==R.id.notification)
            {
                getSupportActionBar().setTitle("Notification");
                Fragment fragment = new NotificationFragment();
                FragmentManager fm = getSupportFragmentManager();
                fm.beginTransaction().replace(R.id.frame_layout, fragment).commit();
            }

            return true;
        }
    };
}

After pasting this code, we will see a lot of error, we can correct some of it by pressing alt + enter and we will create that class by right clicking on the one which is not correct.whose code given below .

fragment_home.xml

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

    <Button
        android:id="@+id/go_to_dashboard"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Go to Dashboard"
        android:layout_centerInParent="true"/>

    <FrameLayout
        android:id="@+id/frame_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

fragment_dashboard.xml

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

  <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Dashboard"
      android:textColor="@color/purple_700"
      android:layout_centerInParent="true"
      android:textSize="30sp"/>


</RelativeLayout>

fragment_notification.xml

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Notification"
        android:textColor="@color/purple_700"
        android:layout_centerInParent="true"
        android:textSize="30sp"/>

</RelativeLayout>

HomeFragment.java

package com.example.bottomviewproject;

import android.content.Intent;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.FrameLayout;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;

import java.util.Objects;

public class HomeFragment extends Fragment {
    private Button btn;
    private FrameLayout layout;

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view=inflater.inflate(R.layout.fragment_home,container,false);
        btn=view.findViewById(R.id.go_to_dashboard);
        layout=view.findViewById(R.id.frame_layout);
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Fragment fragment = new DashboardFragment();
                FragmentManager fm = getActivity().getSupportFragmentManager();
                fm.beginTransaction().replace(R.id.frame_layout, fragment).commit();
            }
        });
        return view;
    }
}

Here, after clicking on the button in the Home fragment, to access the Dashboard fragment, we have used Fragment fragment = new DashboardFragment();FragmentManager fm = getActivity().getSupportFragmentManager();fm.beginTransaction().replace(R.id.frame_layout, fragment).commit(); We have used it so that as soon as we go to the dashboard button, we will reach the dashboard tab.

DashboardFragment.java

package com.example.bottomviewproject;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

public class DashboardFragment extends Fragment {

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

NotificationFragment.java

package com.example.bottomviewproject;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

public class NotificationFragment extends Fragment {

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

Below is the screenshot of this project how this app will work.

Hope this article will be very helpful for you.

Thank you .....