Saturday, 7 January 2017

Bottom Navigation Menu in Android



STEP 1 : Add this dependency in gradle and sync

compile 'com.roughike:bottom-bar:1.2.1'

STEP 2 : color.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#E91E63</color>
    <color name="colorPrimaryDark">#C2185B</color>
    <color name="colorAccent">#4CAF50</color>
</resources>

STEP 3 : Create menu folder in res and then add three_buttons_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/recent_item"
        android:icon="@drawable/ic_update_white_24dp"
        android:title="Recents" />
    <item
        android:id="@+id/location_item"
        android:icon="@drawable/ic_location_on_white_24dp"
        android:title="Location" />
    <item
        android:id="@+id/favorite_item"
        android:icon="@drawable/ic_favorite_white_24dp"
        android:title="Favorire" />
</menu>

STEP 4 : Create ThreeButtonsActivity.java

package com.example.admin.bottomnavigation;
import android.support.design.widget.CoordinatorLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import com.roughike.bottombar.BottomBar;
import com.roughike.bottombar.OnMenuTabSelectedListener;

public class MainActivity extends AppCompatActivity {
    private CoordinatorLayout coordinatorLayout;

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

        coordinatorLayout = (CoordinatorLayout) findViewById(R.id.three_buttons_activity);
        BottomBar bottomBar = BottomBar.attach(this, savedInstanceState);
        bottomBar.setItemsFromMenu(R.menu.three_buttons_menu, new OnMenuTabSelectedListener() {

            @Override
            public void onMenuItemSelected(int itemId) {
                switch (itemId) {
                    case R.id.recent_item:
                        //Snackbar.make(coordinatorLayout, "Recent Item Selected", Snackbar.LENGTH_LONG).show();
                        break;

                    case R.id.favorite_item:
                       // Snackbar.make(coordinatorLayout, "Favorite Item Selected", Snackbar.LENGTH_LONG).show();
                        break;

                    case R.id.location_item:
                       // Snackbar.make(coordinatorLayout, "Location Item Selected", Snackbar.LENGTH_LONG).show();
                        break;
                }
            }
        });

        // Set the color for the active tab. Ignored on mobile when there are more than three tabs.
        bottomBar.setActiveTabColor("#C2185B");

        // Use the dark theme. Ignored on mobile when there are more than three tabs.
        //bottomBar.useDarkTheme(true);

        // Use custom text appearance in tab titles.
        //bottomBar.setTextAppearance(R.style.MyTextAppearance);

        // Use custom typeface that's located at the "/src/main/assets" directory. If using with
        // custom text appearance, set the text appearance first.
        //bottomBar.setTypeFace("MyFont.ttf");
    }
}

STEP 5 : activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/three_buttons_activity"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#fff">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="Three Buttons Bar"
            android:id="@+id/textView"
            android:layout_centerVertical="true"
            android:layout_centerHorizontal="true"
            android:textColor="@color/colorPrimary"
            android:textSize="35sp" />
    </RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

STEP 6 : Run the application


No comments:

Post a Comment