Android bottom navigation menu example using activities

Android design supports library that provides a Bottom Navigation Bar where is an important widget in the Android application. Is a simpler way to look between 3 to 5 screens, if you have more than 5 screens is better to use slide navigation drawer.

Mostly, used fragments in navigation view to load different screens based on the user selection the usage of Fragments with Navigation may lead to back stack issues sometimes. In this article, we will learn how to use a Bottom Navigation Bar for different activities, instead of using fragments.

1.Creating a new project and adding Bottom Navigation Activity to Layout

Keep the default name of activity as MainActivity

2.Customizing Navigation Drawer Menu

To customize your menu, edit the file navigation.xml, res/menu/ navigation.xml. In this case we have 3 menu items, so you can change the default icons pressing right click on drawable folder New> Vector Asset> Clip Art, now you are ready to assign your icon by android:icon=”@drawable/Your Icon”

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

    <item
        android:id="@+id/navigation_back"
        android:icon="@drawable/ic_arrow_back_black_24dp"
        android:title="@string/title_back" />

    <item
        android:id="@+id/navigation_usb"
        android:icon="@drawable/ic_usb_black_24dp"
        android:title="@string/title_usb" />

    <item
        android:id="@+id/navigation_logo"
        android:icon="@drawable/ic_crop_original_black_24dp"
        android:title="@string/title_logo" />

</menu>

3.Creating Screens for Navigation Menu using Activities

Create two java classes ActivityOne and ActivityTwo which extends AppCompatActivity, and two layout resource files activity_one.xml and activity_two.xml in layout folder accordingly. Now, at this stage we must declare the new two activities in manifest file, just put this two lines under to </activity> of .MainActivity

<activity android:name=".ActivityOne"></activity>
<activity android:name=".ActivityTwo"></activity>

4.Edit layout files for each activity

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="80dp"
            android:textSize="30sp"
            android:id="@+id/homeTitle1"
            android:textAlignment="center"/>

    </RelativeLayout>

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="0dp"
        android:layout_marginStart="0dp"
        android:background="?android:attr/windowBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/navigation" />

</android.support.constraint.ConstraintLayout>

For the other two layouts just copy the xml code of the main activity and make few changes to understand the difference. We made this to keep the BottomNavigationView to all screens and navigate between of them.

activity_one.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.myapplication.MainActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="80dp"
            android:textSize="30sp"
            android:id="@+id/activityTitle1"
            android:textAlignment="center"/>

    </RelativeLayout>

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="0dp"
        android:layout_marginStart="0dp"
        android:background="?android:attr/windowBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/navigation" />

</android.support.constraint.ConstraintLayout>

activity_two.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.myapplication6.MainActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="80dp"
            android:textSize="30sp"
            android:id="@+id/activityTitle2"
            android:textAlignment="center"/>

    </RelativeLayout>

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="0dp"
        android:layout_marginStart="0dp"
        android:background="?android:attr/windowBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/navigation" />

</android.support.constraint.ConstraintLayout>

5.Switching Between Activities

Replace the pre-build java code with the below

MainActivity.java

package com.example.myapplication;

import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.v7.app.AppCompatActivity;
import android.view.MenuItem;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        TextView title = (TextView) findViewById(R.id.homeTitle1);
        title.setText("Home");

        BottomNavigationView navigation = (BottomNavigationView) findViewById(R.id.navigation);
        navigation.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.ic_back:
                        break;
                    case R.id.ic_connect:
                        Intent a = new Intent(MainActivity.this,ActivityOne.class);
                        startActivity(a);
                        break;
                    case R.id.ic_logo:
                        Intent b = new Intent(MainActivity.this,ActivityTwo.class);
                        startActivity(b);
                        break;
                }
                return false;
            }
        });
    }
}

ActivityOne.java

package com.example.myapplication;

import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.design.widget.BottomNavigationView;
import android.support.v7.app.AppCompatActivity;
import android.view.MenuItem;
import android.widget.TextView;

public class ActivityOne extends AppCompatActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_one);

        TextView title = (TextView) findViewById(R.id.activityTitle1);
        title.setText("Activity One");

        BottomNavigationView navigation = (BottomNavigationView) findViewById(R.id.navigation);
        navigation.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.ic_back:
                        Intent a = new Intent(ActivityOne.this,MainActivity.class);
                        startActivity(a);
                        break;
                    case R.id.ic_connect:
                        break;
                    case R.id.ic_logo:
                        Intent b = new Intent(ActivityOne.this,ActivityTwo.class);
                        startActivity(b);

                        break;
                }
                return false;
            }
        });
    }
}

ActivityTwo.java

package com.example.myapplication;

import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.design.widget.BottomNavigationView;
import android.support.v7.app.AppCompatActivity;
import android.view.MenuItem;
import android.view.View;
import android.widget.*;
import android.widget.TextView;
import android.app.Activity;


public class ActivityTwo extends AppCompatActivity {


    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_two);

        TextView title = (TextView) findViewById(R.id.activityTitle2);
        title.setText("Activity Two");

        BottomNavigationView navigation = (BottomNavigationView) findViewById(R.id.navigation);
        navigation.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.ic_back:
                        Intent a = new Intent(ActivityTwo.this, MainActivity.class);
                        startActivity(a);

                        break;
                    case R.id.ic_connect:
                        Intent b = new Intent(ActivityTwo.this, ActivityOne.class);
                        startActivity(b);

                        break;
                    case R.id.ic_logo:
                        break;
                }
                return false;
            }
        });
    }
}

That’s it! Now just run your application and navigate between activities!