Menu: Bottom navigation Bar (kotlin/java) Example.

Hello viewer, You can now have our Tutorial Lessons in your android mobile device and read it offline.
Download kotlin Programming APP on PlayStore
Download Website SEO Lessons APP on PlayStore

Today we will discover a new way of making menus in Android.

Menu: Bottom Navigation Bar

Our new menu is called Bottom Navigation Bar. And you will see that this name represents very well the graphics rendering.

Menu: Bottom navigation Bar
Menu: Bottom navigation Bar kotlin java

As you can see in the picture above:

  • the menu is at the bottom of our view (hence the bottom).
  • each menu tab will be represented using an icon and text.

Clarification

I’m sure you’re nice I can use this menu in all my applications. But in reality, the Bottom Navigation Bar cannot be used in all cases.

Yes, this menu is for applications that have a navigation with a number of tabs between 3 and 5. According to the google guidelines, below 3 tabs, we must use the tabs, and above 5, we must use the Navigation Drawer.

How it works ?

Let’s add dependencies

As often the first step will be to add the dependencies to use the library. Here are the dependencies:

1
2
3
compile 'com.android.support:appcompat-v7:25.1.0'
compile 'com.android.support:design:25.1.0'
compile 'com.android.support:support-v4:25.1.0'

Let’s define our menu

The next step will be used to define the tabs of our menu. For that, you will have to create a bottom_navigation_items XML file in the menu folder of your application. The XML file will look like this:

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

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

    <item
        android:id="@+id/twitter"
        android:icon="@drawable/icon_twitter"
        android:title="twitter"/>

    <item
        android:id="@+id/web"
        android:icon="@drawable/web"
        android:title="web"/>

</menu>

t can be seen in this file that each tab will be defined by an item tagIn our example, we have 3 tabs for our menu. Each tab will have 3 attributes:

  • id: Retrieves the action in the activity
  • icon: Define the image corresponding to the tab
  • title: Define the title corresponding to the tab

This file is very simple and allows the quick setup of the menu.

Let’s show our menu

Now that our menu is set, we will have to add it to our view. For that nothing very complicated, that’s what the xml file of your activity should look like:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:id="@+id/activity_main"
    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.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@color/colorPrimary"
        app:itemIconTint="@color/nav_item_state_list"
        app:itemTextColor="@color/nav_item_state_list"
        app:menu="@menu/bottom_navigation_items"/>

</RelativeLayout>

An interactive menu

Now let’s add a little interactivity to our menu. To do this, go to the Java file of your activity and add the following code:

BottomNavigationView bottomNavigation = (BottomNavigationView) findViewById(R.id.bottom_navigation);
        bottomNavigation.setOnNavigationItemSelectedListener(
                new BottomNavigationView.OnNavigationItemSelectedListener() {
                    @Override
                    public boolean onNavigationItemSelected(@NonNull MenuItem item) {

                        switch (item.getItemId()) {

                            case R.id.home:
                                // Action when tab 1 selected
                                Toast.makeText(MainActivity.this, "home", Toast.LENGTH_SHORT).show();
                                break;
                            case R.id.twitter:
                                // Action when tab 2 selected
                                Toast.makeText(MainActivity.this, "twitter", Toast.LENGTH_SHORT).show();

                                break;
                            default:
                                // Action when tab 3 selected
                                Toast.makeText(MainActivity.this, "other", Toast.LENGTH_SHORT).show();

                                break;
                        }
                        return true;
                    }

                    });

 

Full Activity code – Java

package com.coding180.com.bottomnavigationbar;

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


public class MainActivity extends AppCompatActivity {

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

        BottomNavigationView bottomNavigation = (BottomNavigationView) findViewById(R.id.bottom_navigation);
        bottomNavigation.setOnNavigationItemSelectedListener(
                new BottomNavigationView.OnNavigationItemSelectedListener() {
                    @Override
                    public boolean onNavigationItemSelected(@NonNull MenuItem item) {

                        switch (item.getItemId()) {

                            case R.id.home:
                                // Action when tab 1 selected
                                Toast.makeText(MainActivity.this, "home", Toast.LENGTH_SHORT).show();
                                break;
                            case R.id.twitter:
                                // Action when tab 2 selected
                                Toast.makeText(MainActivity.this, "twitter", Toast.LENGTH_SHORT).show();

                                break;
                            default:
                                // Action when tab 3 selected
                                Toast.makeText(MainActivity.this, "other", Toast.LENGTH_SHORT).show();

                                break;
                        }
                        return true;
                    }

                    });


    }
}

Full Activity code – Kotlin

package com.coding180.com.bottomnavigationbar

import android.os.Bundle
import android.support.design.widget.BottomNavigationView
import android.support.v7.app.AppCompatActivity
import android.view.MenuItem
import android.view.View
import android.widget.Toast


class KotlinMainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val bottomNavigation = findViewById<View>(R.id.bottom_navigation) as BottomNavigationView
        bottomNavigation.setOnNavigationItemSelectedListener { item ->
            when (item.itemId) {

                R.id.home ->
                    // Action when tab 1 selected
                    Toast.makeText(this@KotlinMainActivity, "home", Toast.LENGTH_SHORT).show()
                R.id.twitter ->
                    // Action when tab 2 selected
                    Toast.makeText(this@KotlinMainActivity, "twitter", Toast.LENGTH_SHORT).show()
                else ->
                    // Action when tab 3 selected
                    Toast.makeText(this@KotlinMainActivity, "other", Toast.LENGTH_SHORT).show()
            }
            true
        }


    }
}

Here you now know how to make a new menu in Android just. Feel free to ask questions in the comment, we will be happy to answer.

About The Author

Related posts