BottomNavigation in Android Using Support Library

Step: 1
======

Add latest support library to build.gradle file under app folder

compile 'com.android.support:design:25.0.0'

Step: 2
======
create an xml file under menu folder for the bottom navigation.

bottom_bar_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_hotnews"
        android:enabled="true"
        android:icon="@drawable/ic_whatshot_white_24px"
        android:title="@string/news"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_movies"
        android:enabled="true"
        android:icon="@drawable/ic_movie_white_24px"
        android:title="@string/movies"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_music"
        android:enabled="true"
        android:icon="@drawable/ic_music_note_white_24px"
        android:title="@string/music"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_games"
        android:enabled="true"
        android:icon="@drawable/ic_games_white_24px"
        android:title="@string/games"
        app:showAsAction="ifRoom" />


    <item
        android:id="@+id/action_more"
        android:enabled="true"
        android:icon="@drawable/ic_more_white_24px"
        android:title="More"
        app:showAsAction="ifRoom" />


</menu>

Step: 3
======
Create an xml Layout file for the Activity Class

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">


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


    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemBackground="@color/colorPrimary"
        app:itemIconTint="@drawable/color_selector"
        app:itemTextColor="@drawable/color_selector"

        app:menu="@menu/bottom_bar_menu" />

</RelativeLayout>

Step: 4
======
Create an Activity Class like below

package com.pratap.bottombar;

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;

public class MainActivity extends AppCompatActivity {

    private BottomNavigationView bottomNavigationView;


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

        bottomNavigationView = (BottomNavigationView)
                findViewById(R.id.bottom_navigation);

        bottomNavigationView.setOnNavigationItemSelectedListener(
                new BottomNavigationView.OnNavigationItemSelectedListener() {
                    @Override
                    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                        switch (item.getItemId()) {

                            case R.id.action_hotnews:
                                Utils.showToast(MainActivity.this, "News");
                                break;
                            case R.id.action_movies:
                                Utils.showToast(MainActivity.this, "Movies");
                                break;
                            case R.id.action_music:
                                Utils.showToast(MainActivity.this, "Music");
                                break;
                            case R.id.action_games:
                                Utils.showToast(MainActivity.this, "Games");
                                break;
                            case R.id.action_more:
                                Utils.showToast(MainActivity.this, "More");
                                break;

                        }
                        return false;
                    }
                });

    }


}

ScreenShot
========

 



Source Code
=========

Download Link


Demo Video
=========

BottomBar in android

I have created BottomBar example using this beautiful library.
https://github.com/roughike/BottomBar

Credits : Iiro Krankka

Step: 1
======
Add this library to your gradle file

1 2 3

dependencies { compile 'com.roughike:bottom-bar:1.2.4' }

Step: 2
======
Now create menu folder under res folder.

res/menu/bottombar_menu.xml

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/nav_home" android:icon="@drawable/ic_home_white_24dp" android:title="Home" /> <item android:id="@+id/nav_fav" android:icon="@drawable/ic_favorite_white_24dp" android:title="Favourites" /> <item android:id="@+id/nav_gallery" android:icon="@drawable/ic_dashboard" android:title="Gallery" /> <item android:id="@+id/nav_events" android:icon="@drawable/ic_event_note_black_24dp" android:title="Events" /> <item android:id="@+id/nav_notifications" android:icon="@drawable/ic_notifications_black_24dp" android:title="Alerts" /> </menu>

Step: 3
======

Now create an xml layout for the activity.

activity_main.xml

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/myCoordinator" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" android:elevation="4dp" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:id="@+id/tvLabel" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:text="" android:textSize="20sp" /> </LinearLayout> </LinearLayout> </android.support.design.widget.CoordinatorLayout>

Step: 4
======
Create an activity and add the bottom bar from menu items

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127

package com.pratap.bottombar; import android.os.Bundle; import android.support.annotation.IdRes; import android.support.v4.content.ContextCompat; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; import android.widget.TextView; import com.roughike.bottombar.BottomBar; import com.roughike.bottombar.BottomBarBadge; import com.roughike.bottombar.OnMenuTabClickListener; public class MainActivity extends AppCompatActivity { private BottomBar mBottomBar; private TextView tvLabel; private Toolbar toolbar; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); tvLabel = (TextView) findViewById(R.id.tvLabel); mBottomBar = BottomBar.attach(this, savedInstanceState); mBottomBar.noNavBarGoodness(); mBottomBar.setItemsFromMenu(R.menu.bottombar_menu, new OnMenuTabClickListener() { @Override public void onMenuTabSelected(@IdRes int menuItemId) { if (menuItemId == R.id.nav_home) { updateTextView("Home"); } else if (menuItemId == R.id.nav_fav) { updateTextView("Favourites"); } else if (menuItemId == R.id.nav_gallery) { updateTextView("Gallery"); } else if (menuItemId == R.id.nav_events) { updateTextView("Events"); } else if (menuItemId == R.id.nav_notifications) { updateTextView("Alerts"); } } @Override public void onMenuTabReSelected(@IdRes int menuItemId) { if (menuItemId == R.id.nav_home) { // The user reselected item number one, scroll your content to top. } } }); // Setting colors for different tabs when there's more than three of them. // You can set colors for tabs in three different ways as shown below. mBottomBar.mapColorForTab(0, ContextCompat.getColor(this, R.color.colorPrimaryDark)); mBottomBar.mapColorForTab(1, ContextCompat.getColor(this, R.color.colorPrimaryDark)); mBottomBar.mapColorForTab(2, ContextCompat.getColor(this, R.color.colorPrimaryDark)); mBottomBar.mapColorForTab(3, ContextCompat.getColor(this, R.color.colorPrimaryDark)); mBottomBar.mapColorForTab(4, ContextCompat.getColor(this, R.color.colorPrimaryDark)); // Set the color for the active tab. Ignored on mobile when there are more than three tabs. // mBottomBar.setActiveTabColor("#009688"); // mBottomBar.selectTabAtPosition(1, true); setNotificationBadge(); } private void setNotificationBadge() { // Make a Badge for the first tab, with red background color and a value of "13". BottomBarBadge unreadMessages = mBottomBar.makeBadgeForTabAt(4, "#FF0000", 10); // Control the badge's visibility unreadMessages.show(); // unreadMessages.hide(); // Change the displayed count for this badge. unreadMessages.setCount(4); // Change the show / hide animation duration. unreadMessages.setAnimationDuration(200); // If you want the badge be shown always after unselecting the tab that contains it. unreadMessages.setAutoShowAfterUnSelection(false); } @Override protected void onSaveInstanceState(Bundle outState) { super.onSaveInstanceState(outState); // Necessary to restore the BottomBar's state, otherwise we would // lose the current tab on orientation change. mBottomBar.onSaveInstanceState(outState); } public void updateTextView(String text) { tvLabel.setText(text); } }

Screenshots
=========

                                          

Source Code
=========
BottomBar

BottomBarWithFragments


Demo
=====

How to create a bottom bar in android

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

  <--  <ListView
        android:id="@+id/listview1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottombar"
        android:fastScrollEnabled="true" >
    </ListView>  -->



    <LinearLayout
        android:id="@+id/bottombar"
        style="?android:buttonBarStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:divider="?android:dividerVertical"
        android:dividerPadding="8dp"
        android:gravity="center_horizontal"
        android:showDividers="middle" >

        <Button
            android:id="@+id/events_list_view_organizing_button"
            style="?android:buttonBarButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="onClick"
            android:text="Cancel" >
        </Button>

        <Button
            android:id="@+id/events_list_view_attending_button"
            style="?android:buttonBarButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="onClick"
            android:text="Done" >
        </Button>
    </LinearLayout>

</RelativeLayout>

ScreenShot

Android Bottom Tabs with ViewPagerIndicator Libary

Hello,

In previous post, I have used ViewPagerIndicator Libary from JakeWharton

with ActionBarCompat Libary.

We Can Place Tabs in the bottom in android through VPI Library.

Android Design Guideliness suggests tabs must in the top. But this is not a recommended.

This is the ScreenShot of the app




Source code will be updated soon in the Dropbox