Android bottom navigation bar implementation (Part 3) TextView+LinearLayout

Here is a brief record of implementing the Android bottom navigation bar through TextView+LinearLayout+Fragment.

layout

 <! --fragment_text_tab.xml-->   
 
 <?xml version= "1.0" encoding= "utf-8" ?>
 <LinearLayout xmlns:android= "http://schemas.android.com/apk/res/android"  
              android:layout_width= "match_parent"  
              android:layout_height= "match_parent"  
              android:orientation= "vertical" > 
 
 <FrameLayout
        android:id= "@+id/sub_content"  
        android:layout_width= "match_parent"  
        android:layout_height= "0dp"  
        android:layout_weight= "1" > 
 
 <TextView
            android:id= "@+id/activity_text_view"  
            android:layout_width= "wrap_content"  
            android:layout_height= "wrap_content"  
            android:layout_centerHorizontal= "true"  
            android:text= "@string/tips"  
            android:textColor= "@color/colorPrimary"  
            android:textSize= "18sp"  
            android:textStyle= "bold|italic" />
 </FrameLayout> 
 
 < View  
        android:layout_width= "match_parent"  
        android:layout_height= "1px"  
        android:background= "@color/grey_300" /> 
 
    <include layout= "@layout/tab_layout_for_bottom" /> 
 
 </LinearLayout> 
 
 
 
 <! --tab_layout_for_bottom-->   
 
 <?xml version= "1.0" encoding= "utf-8" ?> 
 
 
 <LinearLayout
    xmlns:android= "http://schemas.android.com/apk/res/android"  
    xmlns:tools= "http://schemas.android.com/tools"  
    android:layout_width= "match_parent"  
    android:layout_height= "56dp"  
    android:background= "@color/white"  
    android:orientation= "horizontal"  
    tools:showIn= "@layout/fragment_text_tab" > 
 
 <TextView
        android:id= "@+id/tv_home"  
        style= "@style/viewpager_navigation_bar_tab_style"  
        android:drawableTop= "@drawable/home"  
        android:text= "@string/item_home" /> 
 
 <TextView
        android:id= "@+id/tv_location"  
        style= "@style/viewpager_navigation_bar_tab_style"  
        android:drawableTop= "@drawable/location"  
        android:text= "@string/item_location" /> 
 
 <TextView
        android:id= "@+id/tv_like"  
        style= "@style/viewpager_navigation_bar_tab_style"  
        android:drawableTop= "@drawable/like"  
        android:text= "@string/item_like" /> 
 
 <TextView
        android:id= "@+id/tv_person"  
        style= "@style/viewpager_navigation_bar_tab_style"  
        android:drawableTop= "@drawable/person"  
        android:text= "@string/item_person" />
 </LinearLayout>

Code

 mTHome.setOnClickListener(this);
    mTLocation.setOnClickListener(this);
    mTLike.setOnClickListener(this);
    mTMe.setOnClickListener(this);
 setDefaultFragment(); //Set the default display Fragment 
         
 @Override
 public void onClick( View   view ) {
        resetTabState();//reset the tab state
        switch ( view .getId()) {
 case R.id.tv_home:
 setTabState(mTHome, R.drawable.home_fill, getColor(R.color.colorPrimary)); //Set Tab state
 switchFrgment(0);//Switch Fragment
 break;
 case R.id.tv_location:
                setTabState(mTLocation, R.drawable.location_fill, getColor(R.color.colorPrimary));
                switchFrgment(1);
 break;
 case R.id.tv_like:
                setTabState(mTLike, R.drawable.like_fill, getColor(R.color.colorPrimary));
                switchFrgment(2);
 break;
 case R.id.tv_person:
                setTabState(mTMe, R.drawable.person_fill, getColor(R.color.colorPrimary));
                switchFrgment(3);
 break;
 }
 }

Fragment switching

 /**
     * switch the fragment accordting to id
 * @param i id
 */
    private void switchFrgment( int i) {
        FragmentTransaction transaction = getChildFragmentManager().beginTransaction();
 switch (i) {
 case 0:
                if (mHomeFragment == null ) {
                    mHomeFragment = mHomeFragment.newInstance(getString(R.string.item_home));
 }
 transaction .replace ( R.id.sub_content , mHomeFragment);
 break;
 case 1:
                if (mLocationFragment == null ) {
                    mLocationFragment = LocationFragment.newInstance(getString(R.string.item_location));
 }
 transaction .replace ( R.id.sub_content , mLocationFragment);
 break;
 case 2:
                if (mLikeFragment == null ) {
                    mLikeFragment = LikeFragment.newInstance(getString(R.string.item_like));
 }
 transaction .replace ( R.id.sub_content , mLikeFragment);
 break;
 case 3:
                if (mPersonFragment == null ) {
                    mPersonFragment = PersonFragment.newInstance(getString(R.string.item_person));
 }
 transaction .replace ( R.id.sub_content , mPersonFragment);
 break;
 }
 transaction . commit ();
 }

What is worth noting here is that getChildFragmentManager() must be used, otherwise the content of the switched Fragment will not be displayed.

Set Tab State

 /**
     * set the tab state of bottom navigation bar
 *
     * @param textView the text to be shown
     * @param image the image
     * @param color the text color
 */
    private void setTabState(TextView textView, int image, int color) {
        textView.setCompoundDrawablesRelativeWithIntrinsicBounds(0, image, 0, 0);//Call requires API level 17
        textView.setTextColor(color);
 } 
 
 
 
 /**
     * revert the image color and text color to black
 */
    private void resetTabState() {
        setTabState(mTHome, R.drawable.home, getColor(R.color.black_1));
        setTabState(mTLocation, R.drawable.location, getColor(R.color.black_1));
        setTabState(mTLike, R.drawable. like , getColor(R.color.black_1));
        setTabState(mTMe, R.drawable.person, getColor(R.color.black_1)); 
 
 }

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.