开源地址：https://github.com/roughike/BottomBar

PS：如果觉得这个系列的每篇文章太长，那就直接看视频吧

运行效果

使用步骤

1. 在Module的build.gradle添加依赖

compile 'com.roughike:bottom-bar:2.0.2'

2. 创建底部Tab的配置文件res/xml/bottombar_tabs.xml:

<tabs>
    <tab
        id="@+id/tab_favorites"
        icon="@drawable/ic_favorites"
        title="Favorites"
        barColorWhenSelected="#5D4037" />
    <tab
        id="@+id/tab_nearby"
        icon="@drawable/ic_nearby"
        title="Nearby"
        barColorWhenSelected="#5D4037" />
    <tab
        id="@+id/tab_friends"
        icon="@drawable/ic_friends"
        title="Friends"
        barColorWhenSelected="#5D4037" />
</tabs>

icon：Tab的图片，注意图片不能是透明的，不能存在padding, 可使用Generic Icon Generator生成，
选择“Trim”, Padding设置为0dp

barColorWhenSelected: 当Tab被选中时BottomBar的背景颜色

3. 在布局中添加BottomBar

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <!-- This could be your fragment container, or something -->
    <FrameLayout
        android:id="@+id/contentContainer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottomBar" />

    <com.roughike.bottombar.BottomBar
        android:id="@+id/bottomBar"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        app:bb_inActiveTabColor="#222222"
        app:bb_activeTabColor="@color/colorPrimary"
        app:bb_tabXmlResource="@xml/bottombar_tabs" />
</RelativeLayout>

bb_tabXmlResource: 指定BottomBar底部Tab的布局文件

bb_inActiveTabColor: 设置未选中Tab的文本颜色

bb_activeTabColor：设置选中Tab的文本颜色

4. 设置点击监听

public class MainActivity extends Activity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        BottomBar bottomBar = (BottomBar) findViewById(R.id.bottomBar);
        bottomBar.setOnTabSelectListener(new OnTabSelectListener() {
            @Override
            public void onTabSelected(@IdRes int tabId) {
                if (tabId == R.id.tab_favorites) {
                    // The tab with id R.id.tab_favorites was selected,
                    // change your content accordingly.
                }
            }
        });
    }
}

欢迎关注微信公众号