主布局

1、主布局文件：layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/tabs_rg" />

    <RadioGroup
        android:id="@+id/tabs_rg"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_alignParentBottom="true"
        android:background="#f4f6f8"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/home_tab"
            style="@style/Custom.TabRadioButton"
            android:checked="true"
            android:drawableTop="@drawable/tab_home_selector"
            android:textSize="10dp"
            android:text="主页" />

        <RadioButton
            android:id="@+id/vip_tab"
            style="@style/Custom.TabRadioButton"
            android:drawableTop="@drawable/tab_vip_selector"
            android:textSize="10dp"
            android:text="会员" />

        <RadioButton
            android:id="@+id/grow_up_tab"
            style="@style/Custom.TabRadioButton"
            android:drawableTop="@drawable/tab_grow_up_selector"
            android:textSize="10dp"
            android:text="成长" />

        <RadioButton
            android:id="@+id/mine_tab"
            style="@style/Custom.TabRadioButton"
            android:drawableTop="@drawable/tab_mine_selector"
            android:textSize="10dp"
            android:text="我的" />
    </RadioGroup>
</RelativeLayout>

2、自义定控件的风格：values/style.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- 自定义控件风格-->
    <style name="Custom" />

    <style name="Custom.TabRadioButton">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_weight">1</item>
        <item name="android:layout_height">match_parent</item>
        <item name="android:padding">5dp</item>
        <item name="android:gravity">center</item>
        <item name="android:button">@null</item>
        <item name="android:textSize">14sp</item>
        <item name="android:textColor">@color/tab_text_color_selector</item>
    </style>
</resources>

3、设置默认与高亮的文本颜色：color/tab_text_color_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#3e7cff" android:state_checked="true" />
    <item android:color="#707070" />
</selector>

4、定义Tab项的图标与颜色：color/drawable/tab_home_selector.xml，图标放在 mipmap 目录下 ，这是拿 home tab项举例，剩下三个tab项参照定义即可

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 高亮的图标 -->
    <item android:drawable="@mipmap/tabbar_home_pressed" android:state_checked="true"/>
    <!-- 默认的图标 -->
    <item android:drawable="@mipmap/tabbar_home_default" />
</selector>

Activity中使用

main/MainActivity.java

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.widget.RadioButton;
import android.widget.RadioGroup;

import com.afei.bottomtabbar.R;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    private ViewPager mViewPager;
    private RadioGroup mTabRadioGroup;

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

    private void initView() {
        // find view
        mViewPager = findViewById(R.id.fragment_vp);
        mTabRadioGroup = findViewById(R.id.tabs_rg);
        // 初始化对应的 四个fragment
        String[] titles = {"主页", "会员", "成长", "我的"};
        List<Fragment> mFragments = new ArrayList<>(titles.length);
        mFragments.add(HomeFragment.newInstance(titles[0]));
        mFragments.add(VipFragment.newInstance(titles[1]));
        mFragments.add(GrowUpFragment.newInstance(titles[2]));
        mFragments.add(MineFragment.newInstance(titles[3]));
        // 初始化分页器
        FragmentPagerAdapter mAdapter = new MainFragmentPagerAdapter(getSupportFragmentManager(), mFragments);
        mViewPager.setAdapter(mAdapter);
        // 注册事件监听
        mViewPager.addOnPageChangeListener(mPageChangeListener);
        mTabRadioGroup.setOnCheckedChangeListener(mOnCheckedChangeListener);
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        mViewPager.removeOnPageChangeListener(mPageChangeListener);
    }

    private final ViewPager.OnPageChangeListener mPageChangeListener = new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {
            RadioButton radioButton = (RadioButton) mTabRadioGroup.getChildAt(position);
            radioButton.setChecked(true);
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    };

    private final RadioGroup.OnCheckedChangeListener mOnCheckedChangeListener = new RadioGroup.OnCheckedChangeListener() {
        @Override
        public void onCheckedChanged(RadioGroup group, int checkedId) {
            for (int i = 0; i < group.getChildCount(); i++) {
                if (group.getChildAt(i).getId() == checkedId) {
                    mViewPager.setCurrentItem(i);
                    return;
                }
            }
        }
    };

    private static class MainFragmentPagerAdapter extends FragmentPagerAdapter {
        private final List<Fragment> mList;

        public MainFragmentPagerAdapter(FragmentManager fm, List<Fragment> list) {
            super(fm);
            this.mList = list;
        }

        @Override
        public Fragment getItem(int position) {
            return this.mList == null ? null : this.mList.get(position);
        }

        @Override
        public int getCount() {
            return this.mList == null ? 0 : this.mList.size();
        }
    }
}

HomeFragment 页项

这里以主页的 HomeFragment 页项举例，剩下的三个 VipFragment、GrowUpFragment、MineFragment参照定义即可

layout/home_fragment.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:background="#ffffff"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textSize="24sp"
        android:textColor="@android:color/black"
        android:text="这是主页" />
</LinearLayout>

fragment/HomeFragement.java

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class HomeFragement extends Fragment {
    // the fragment initialization parameters, e.g. ARG_ITEM_NUMBER
    private static final String ARG_SHOW_TEXT = "text";

    private String mTitle;


    public HomeFragement() {
        // ....
    }

    public static HomeFragement newInstance(String param1) {
        HomeFragement fragment = new HomeFragement();
        Bundle args = new Bundle();
        args.putString(ARG_SHOW_TEXT, param1);
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            mTitle = getArguments().getString(ARG_SHOW_TEXT);
        }
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.home_fragment, container, false);
    }
}