Android bottom navigation bar implementation (IV) TabLayout+ViewPager

Here is a brief record of implementing the Android bottom navigation bar through TabLayout+ViewPager.

layout

 <?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"  
                android:orientation= "vertical" > 
 
    <include layout= "@layout/fragment_content" /> 
 
 <LinearLayout
        android:layout_width= "match_parent"  
        android:layout_height= "match_parent"  
        android:orientation= "vertical" > 
 
 
        < android.support.v4.view.ViewPager
            android:id= "@+id/view_pager"  
            android:layout_width= "match_parent"  
            android:layout_height= "0dp"  
            android:layout_weight= "1" ></android.support.v4. view .ViewPager> 
 
        <android.support.design.widget.TabLayout
            android:id= "@+id/tab_layout"  
            android:layout_width= "match_parent"  
            android:layout_height= "56dp"  
            app:tabBackground= "@color/white"  
            app:tabIndicatorHeight= "0dp"  
            app:tabSelectedTextColor= "@color/colorPrimary"  
            app:tabTextAppearance= "@style/tabTextSizeStyle"  
            app:tabTextColor= "@color/black_1" ></android.support.design.widget.TabLayout>
 </LinearLayout>
 </RelativeLayout>

Code

 mViewPager = (ViewPager) view .findViewById(R.id.view_pager);
        mTabLayout = (TabLayout) view .findViewById(R.id.tab_layout);
 initTabList();
        mAdapter = new TabLayoutFragmentAdapter(getChildFragmentManager(), mTabList, getActivity(), mFragments, mTabImgs);
        mViewPager.setAdapter(mAdapter);
        mViewPager.setCurrentItem(0);
        mTabLayout.setupWithViewPager(mViewPager);
 mTabLayout.setTabMode(TabLayout.MODE_FIXED); //Set the mode of TabLayout
 for ( int i = 0; i < mTabLayout.getTabCount(); i++) {
            mTabLayout.getTabAt(i).setCustomView(mAdapter.getTabView(i));
 }
 mTabLayout.addOnTabSelectedListener(this); //Set the selected listener of TabLayout

What needs to be noted here is the use of TabLayout. TabLayout is used in conjunction with ViewPager. Use mTabLayout.setupWithViewPager(mViewPager); to connect the two. In addition, customView is used here. Of course, TabLayout's own methods can also achieve the icon+text effect. That is, the effect: TabLayout + ViewPager 2

Display the Tab key effect according to the Tab selection state

 @Override
 public void onTabSelected(TabLayout.Tab tab) {
       setTabSelectedState(tab);
 } 
 
 @Override
 public void onTabUnselected(TabLayout.Tab tab) {
       setTabUnSelectedState(tab);
 } 
 
 
 @Override
 public void onTabReselected(TabLayout.Tab tab) { 
 
 } 
 
 
 
 
 private void setTabSelectedState(TabLayout.Tab tab) {
 View customView = tab.getCustomView();
       TextView tabText = (TextView) customView.findViewById(R.id.tv_tab_text);
       ImageView tabIcon = (ImageView) customView.findViewById(R.id.iv_tab_icon);
       tabText.setTextColor(ContextCompat.getColor(getActivity(), R.color.colorPrimary));
       String s = tabText.getText().toString();
       if (getString(R.string.item_home).equals(s)) {
           tabIcon.setImageResource(R.drawable.home_fill);
       } else if (getString(R.string.item_location).equals(s)) {
           tabIcon.setImageResource(R.drawable.location_fill);
       } else if (getString(R.string.item_like).equals(s)) {
           tabIcon.setImageResource(R.drawable.like_fill);
       } else if (getString(R.string.item_person).equals(s)) {
           tabIcon.setImageResource(R.drawable.person_fill);
 }
 } 
 
   private void setTabUnSelectedState(TabLayout.Tab tab) {
 View customView = tab.getCustomView();
       TextView tabText = (TextView) customView.findViewById(R.id.tv_tab_text);
       ImageView tabIcon = (ImageView) customView.findViewById(R.id.iv_tab_icon);
       tabText.setTextColor(ContextCompat.getColor(getActivity(), R.color.black_1));
       String s = tabText.getText().toString();
       if (getString(R.string.item_home).equals(s)) {
           tabIcon.setImageResource(R.drawable.home);
       } else if (getString(R.string.item_location).equals(s)) {
           tabIcon.setImageResource(R.drawable.location);
       } else if (getString(R.string.item_like).equals(s)) {
           tabIcon.setImageResource(R.drawable. like );
       } else if (getString(R.string.item_person).equals(s)) {
           tabIcon.setImageResource(R.drawable.person);
 }
 }

There is no need to set defaultFragment here, TabLayout will display the first one by default;

In addition, here is also posted the code to use TabLayout's own method to achieve the effect

It is worth mentioning that the built-in method cannot customize the spacing between icon and text. It is very convenient to use, but it may not be the size you require. I have not studied the source code in depth. If anyone knows how to change this built-in method, please let me know.

 mViewPager = (ViewPager) view .findViewById(R.id.view_pager);
        mTabLayout = (TabLayout) view .findViewById(R.id.tab_layout);
 initTabList();
        mAdapter = new TabLayoutFragment2Adapter(getChildFragmentManager(), mTabList, getActivity(), mFragments, mTabImgs);
        mViewPager.setAdapter(mAdapter);
        mViewPager.setCurrentItem(0);
        mTabLayout.setupWithViewPager(mViewPager);
        mTabLayout.setTabMode(TabLayout.MODE_FIXED);
 // for ( int i = 0; i < mTabLayout.getTabCount(); i++) {
 // mTabLayout.getTabAt(i).setCustomView(mAdapter.getTabView(i));
 // }
        mTabLayout.addOnTabSelectedListener(this);
 // mViewPager.setCurrentItem(0);
 mTabLayout.getTabAt(0).setIcon(R.drawable.home_fill); //Own method to add icon
        mTabLayout.getTabAt(1).setIcon(R.drawable.location);
        mTabLayout.getTabAt(2).setIcon(R.drawable. like );
        mTabLayout.getTabAt(3).setIcon(R.drawable.person);

Tab Switching

 @Override
 public void onTabSelected(TabLayout.Tab tab) {
 // setTabSelectedState(tab);//This is also not necessary
 resetTabIcon();
 int position = tab.getPosition();
        Log.e( "Kevin" , "position--->" + position);
 switch (position) {
 case 0:
                tab.setIcon(R.drawable.home_fill);
 break;
 case 1:
                tab.setIcon(R.drawable.location_fill);
 break;
 case 2:
                tab.setIcon(R.drawable.like_fill);
 break;
 case 3:
                tab.setIcon(R.drawable.person_fill);
 break; 
 
 }
 } 
 
 
 private void resetTabIcon() {
        mTabLayout.getTabAt(0).setIcon(R.drawable.home);
        mTabLayout.getTabAt(1).setIcon(R.drawable.location);
        mTabLayout.getTabAt(2).setIcon(R.drawable. like );
        mTabLayout.getTabAt(3).setIcon(R.drawable.person);
 }

Note: These articles do not have too much text description, because these things are not very difficult, and they are commonly used. I believe that many people are familiar with them. It is nonsense to say more. It is clearer to read the code directly.