Iphone like bottom tabs for Android

Android is doing great job by continuously adding new widgets and other utilities to its support libraries to achieve maximum functionality with minimum code. In this post I'm going to show how to achieve Iphone's bottom tabs with the help of widgets provided by Android.

To achieve this i'm going to use Android support library widgets

• ViewPager
• BottomNavigationView

BottomNavigationDemo.java (Activity)

 package com.hydapps.androiddemossujith;  
 import android.os.Bundle;  
 import android.support.annotation.NonNull;  
 import android.support.design.widget.BottomNavigationView;  
 import android.support.v4.app.Fragment;  
 import android.support.v4.app.FragmentPagerAdapter;  
 import android.support.v4.view.ViewPager;  
 import android.support.v7.app.AppCompatActivity;  
 import android.util.Log;  
 import android.view.MenuItem;  
 import android.view.ViewGroup;  
 public class BottomNavigationDemo extends AppCompatActivity implements BottomNavigationView.OnNavigationItemSelectedListener, ViewPager.OnPageChangeListener {  
   private BottomNavigationView mBottomNav;  
   private ViewPager mViewPager;  
   private static final String TAG = "BottomNavigationDemo";  
   @Override  
   protected void onCreate(Bundle savedInstanceState) {  
     super.onCreate(savedInstanceState);  
     setContentView(R.layout.activity_bottom_navigation_demo);  
     mViewPager = (ViewPager) findViewById(R.id.view_pager);  
     mBottomNav = (BottomNavigationView) findViewById(R.id.bottom_nav) ;  
     FragmentPagerAdapter adapter = new FragmentPagerAdapter(getSupportFragmentManager()) {  
       @Override  
       public Fragment getItem(int position) {  
         Fragment fr = new DisplayFragment();  
         Bundle b = new Bundle();  
         b.putInt("tab", position);  
         fr.setArguments(b);  
         return fr;  
       }  
       @Override  
       public int getCount() {  
         return 3;  
       }  
     };  
     mViewPager.setAdapter(adapter);  
     mBottomNav.setOnNavigationItemSelectedListener(this);  
     mViewPager.addOnPageChangeListener(this);  
   }  
   @Override  
   public boolean onNavigationItemSelected(@NonNull MenuItem item) {  
     switch (item.getItemId()) {  
       case R.id.tab1:  
         mViewPager.setCurrentItem(0);  
         return true;  
       case R.id.tab2:  
         mViewPager.setCurrentItem(1);  
         return true;  
       case R.id.tab3:  
         mViewPager.setCurrentItem(2);  
         return true;  
     }  
     return false;  
   }  
   @Override  
   public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {  
   }  
   @Override  
   public void onPageSelected(int position) {  
     if (position < 3) {  
       ((ViewGroup) mBottomNav.getChildAt(0)).getChildAt(position).callOnClick();  
     } else {  
       Log.wtf(TAG, "onPageSelected: " + position);  
     }  
   }  
   @Override  
   public void onPageScrollStateChanged(int state) {  
   }  
 }  

activity_bottom_navigation_demo.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"  
   android:paddingBottom="@dimen/activity_vertical_margin"  
   android:paddingLeft="@dimen/activity_horizontal_margin"  
   android:paddingRight="@dimen/activity_horizontal_margin"  
   android:paddingTop="@dimen/activity_vertical_margin"  
   tools:context="com.hydapps.androiddemossujith.BottomNavigationDemo">  
   <android.support.v4.view.ViewPager  
     android:id="@+id/view_pager"  
     android:layout_width="match_parent"  
     android:layout_height="wrap_content"  
     android:layout_above="@+id/bottom_nav"></android.support.v4.view.ViewPager>  
   <android.support.design.widget.BottomNavigationView  
     android:id="@+id/bottom_nav"  
     android:layout_width="match_parent"  
     android:layout_height="wrap_content"  
     android:layout_alignParentBottom="true"  
     app:menu="@menu/bottom_nav_menu"  
     >  
   </android.support.design.widget.BottomNavigationView>  
 </RelativeLayout>  

For full source code checkout my https://github.com/sujithkommineni/AndroidDemosSujith