Android Bottom Navigation

Bottom Navigation

Bottom Navigation:

The Bottom Navigation is a Material Design pattern applicable to Android apps that shows a navigator in the bottom of the screen.

Depending on the design, it may include several symbols or titles reflecting the app’s sub-areas or targets.

When the icons are touched, they will take the users to various views or other aspects of that particular application.

Example:

                                    
                                        // 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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/frame_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/bottom_navigation">

        <TextView
            android:id="@+id/text_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Bottom Navigation Name"
            android:textColor="@color/colorWhite"
            android:textStyle="bold"
            android:textSize="28sp"
            android:layout_gravity="center"/>

    </FrameLayout>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@color/design_default_color_on_secondary"
        app:itemIconTint="@color/colorWhite"
        app:itemTextColor="@color/colorWhite"
        app:menu="@menu/menu_item"
        />

</RelativeLayout>


// menu_item.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_home_black_24dp"
        android:title="Home" />
    <item
        android:id="@+id/navigation_favourite"
        android:icon="@drawable/ic_baseline_favorite_24"
        android:title="Favourite" />
    <item
        android:id="@+id/navigation_notification"
        android:icon="@drawable/ic_baseline_notifications_24"
        android:title="Notification" />
</menu>

                                    
                                        // MainActivity.java

import android.graphics.Color;
import android.os.Bundle;
import android.view.MenuItem;
import android.widget.FrameLayout;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import com.google.android.material.bottomnavigation.BottomNavigationView;

public class MainActivity extends AppCompatActivity {

    BottomNavigationView bottomNavigationView;
    TextView textView;
    FrameLayout frameLayout;

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

        // Initialize views
        bottomNavigationView = findViewById(R.id.bottom_navigation);
        textView = findViewById(R.id.text_view);
        frameLayout = findViewById(R.id.frame_container);

        // Set default background color and text
        frameLayout.setBackgroundColor(Color.CYAN);
        textView.setText("Home");

        // Set navigation item selection listener
        bottomNavigationView.setOnNavigationItemSelectedListener(nav);
    }

    // Navigation item selection listener
    private BottomNavigationView.OnNavigationItemSelectedListener nav
            = new BottomNavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            switch (item.getItemId()) {
                case R.id.navigation_home:
                    // Change background color and text for Home
                    frameLayout.setBackgroundColor(Color.CYAN);
                    textView.setText("Home");
                    break;
                case R.id.navigation_favourite:
                    // Change background color and text for Favourite
                    frameLayout.setBackgroundColor(Color.DKGRAY);
                    textView.setText("Favourite");
                    break;
                case R.id.navigation_notification:
                    // Change background color and text for Notification
                    frameLayout.setBackgroundColor(Color.RED);
                    textView.setText("Notification");
                    break;
            }
            return true;
        }
    };
}

                                      
                                        // MainActivity.kt

import android.graphics.Color
import android.os.Bundle
import android.view.MenuItem
import android.widget.FrameLayout
import android.widget.TextView
import androidx.annotation.NonNull
import androidx.appcompat.app.AppCompatActivity
import com.google.android.material.bottomnavigation.BottomNavigationView

class MainActivity : AppCompatActivity() {

    private lateinit var bottomNavigationView: BottomNavigationView
    private lateinit var textView: TextView
    private lateinit var frameLayout: FrameLayout

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

        // Initialize views
        bottomNavigationView = findViewById(R.id.bottom_navigation)
        textView = findViewById(R.id.text_view)
        frameLayout = findViewById(R.id.frame_container)

        // Set default background color and text
        frameLayout.setBackgroundColor(Color.CYAN)
        textView.text = "Home"

        // Set navigation item selection listener
        bottomNavigationView.setOnNavigationItemSelectedListener(nav)
    }

    // Navigation item selection listener
    private val nav = BottomNavigationView.OnNavigationItemSelectedListener { item ->
        when (item.itemId) {
            R.id.navigation_home -> {
                // Change background color and text for Home
                frameLayout.setBackgroundColor(Color.CYAN)
                textView.text = "Home"
                return@OnNavigationItemSelectedListener true
            }
            R.id.navigation_favourite -> {
                // Change background color and text for Favourite
                frameLayout.setBackgroundColor(Color.DKGRAY)
                textView.text = "Favourite"
                return@OnNavigationItemSelectedListener true
            }
            R.id.navigation_notification -> {
                // Change background color and text for Notification
                frameLayout.setBackgroundColor(Color.RED)
                textView.text = "Notification"
                return@OnNavigationItemSelectedListener true
            }
            else -> return@OnNavigationItemSelectedListener false
        }
    }
}