How to implement bottom navigation tab as per the google new guideline
Here first custom solution as far as I know.
UPDATE:
Official BottomNavigationView is out in Support lib 25.
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; } });
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;@Overrideprotected 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