CODEWITHSUNDEEP
androidbottomnavigationviewandroid-design-libraryandroid-bottomnav
Govinda P
Govinda P

Reputation: 3319

How to implement bottom navigation tab as per the google new guideline

How to implement bottom navigation tab as per the google new guideline (Pure android). Is there any example.?

Ref: https://www.google.com/design/spec/components/bottom-navigation.html

Upvotes: 26

Views: 27535

Answers (11)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 363795

You can use the support library v25.

Add in your build.gradle

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

Add the BottomNavigationView in your layout:

<android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        app:menu="@menu/bottom_navigation_menu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:itemBackground="@color/colorPrimary"
        app:itemIconTint="@color/mycolor"
        app:itemTextColor="@color/mycolor"/>

Then create a menu file (menu/bottom_navigation_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/my_action1"
        android:enabled="true"
        android:icon="@drawable/my_drawable"
        android:title="@string/text"
        app:showAsAction="ifRoom" />
    ....
</menu>

Then add the listener:

BottomNavigationView 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.my_action1:
                        //Do something...
                        break;

                }
                return false;
            }
        });

Upvotes: 13

kevz
kevz

Reputation: 2737

You can use TabLayout for that. It can be easily aligned at bottom of screen.

Upvotes: 0

user2604179
user2604179

Reputation:

You can use google design support libraries for BottomNavigationView. Read the answer here.

Upvotes: 1

Priyank Patel
Priyank Patel

Reputation: 12382

Now, BottomNavigationView is added in design support lib v25.0.0 released on October 2016

Add BottomNavigationView into your xml file.

For ex. 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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="priyank.patel.bottomnavigationdemo.MainActivity">

    <FrameLayout
        android:id="@+id/main_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottom_navigation"
        android:layout_alignParentTop="true">
    </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="@android:color/white"
        app:itemTextColor="@android:color/white"
        app:menu="@menu/bottom_navigation_main" />
</RelativeLayout>

Add xml for menu items into menu folder.

For ex. bottom_navigation_main.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_favorites"
        android:enabled="true"
        android:icon="@drawable/ic_favorite_white_24dp"
        android:title="@string/text_favorites"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_video"
        android:enabled="true"
        android:icon="@drawable/ic_music_video_white_24dp"
        android:title="@string/text_video"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_music"
        android:enabled="true"
        android:icon="@drawable/ic_audiotrack_white_24dp"
        android:title="@string/text_music"
        app:showAsAction="ifRoom" />

</menu>

Set OnNavigationItemSelectedListener on BottomNavigationView in your activity class.

For ex. MainActivity.java

import android.support.design.widget.BottomNavigationView;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {

private Fragment fragment;
private FragmentManager fragmentManager;

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

    fragmentManager = getSupportFragmentManager();
    fragment = new FavouriteFragment();
    final FragmentTransaction transaction = fragmentManager.beginTransaction();
    transaction.add(R.id.main_container, fragment).commit();

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

    bottomNavigationView.setOnNavigationItemSelectedListener(
            new BottomNavigationView.OnNavigationItemSelectedListener() {
                @Override
                public boolean onNavigationItemSelected(MenuItem item) {
                    switch (item.getItemId()) {
                        case R.id.action_favorites:
                            fragment = new FavouriteFragment();
                            break;
                        case R.id.action_video:
                            fragment = new VideoFragment();
                            break;
                        case R.id.action_music:
                            fragment = new MusicFragment();
                            break;
                    }
                    final FragmentTransaction transaction = fragmentManager.beginTransaction();
                    transaction.replace(R.id.main_container, fragment).commit();
                    return true;
                }
            });
    }
}

Checkout here for BottomNavigation-Demo

Upvotes: 10

silentsudo
silentsudo

Reputation: 6963

Repository I have added complete project at this link have a look https://gitlab.com/ashish29agre/android-bottom-navigation-view-support-lib

Hi This might be little late here is the xml 

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">


    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>


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


    <android.support.design.widget.BottomNavigationView
        android:id="@+id/nm_bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@color/colorPrimaryDark"
        app:itemIconTint="@android:color/white"
        app:itemTextColor="@android:color/white"
        app:layout_scrollFlags="scroll|enterAlways"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        app:menu="@menu/nav_menu" />

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/nm_bottom"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</RelativeLayout>

Upvotes: 1

Geralt_Encore
Geralt_Encore

Reputation: 3771

Here first custom solution as far as I know.

UPDATE:

Official BottomNavigationView is out in Support lib 25.

Upvotes: 13

ninjachippie
ninjachippie

Reputation: 552

As user6146138 said, https://github.com/roughike/BottomBar is a great implementation. And you can check out a great tutorial on it here, which is really easy to follow and part 2 shows you how to use it with fragments attached.

Another nice implementation is https://github.com/aurelhubert/ahbottomnavigation if you want to check it out. I don't know of any tutorial on it, but the instructions at the link are good enough IMO.

Upvotes: 2

user6146138
user6146138

Reputation: 1

There is no official example but check below link.
Very good implementation. https://github.com/roughike/BottomBar

Upvotes: 0

Fareed
Fareed

Reputation: 560

There are no code examples yet. But there are custom libraries in android arsenal and this is a detailed tutorial you can check it Android material design bottom navigation

Upvotes: 0

Gopal
Gopal

Reputation: 101

There are no code examples out there. Although there are custom libraries which can do the job as of now.(as mentioned in the posts above) I would not recommend using TabLayout to achieve this, since in the design guidelines for Bottom Navigation Tab its clearly mentioned that swiping the screen should not scroll pages horizontally. However, TabLayout extends HorizontalScrollView and its main motive is to facilitate scrolling, even though you can disable that, it won't be ideal.

Upvotes: 5

Niels Masdorp
Niels Masdorp

Reputation: 2428

As of now there are no code examples and the Bottom bar is not in the support library (yet). I have found a third party library that mimics the guidelines though. It can be found here.

Upvotes: 1

Related Questions