效果图：

技术：TabLayout+ViewPager+Fragment

步骤：

xml布局
关联TabLayout和ViewPager
设置ViewPager
    创建ViewPagerAdapter
    关联ViewPager和ViewPagerAdapter
    给ViewPager设置pagerChange改变的事件
设置TabLayout
  设置TabLayout中的TabView，也就是每一个标签的View布局样式
  将TabView添加到TabLayout中，且设置每一个TabView的onClick

代码如下

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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/mainTabLayout"
        android:layout_width="match_parent"
        android:layout_height="@dimen/nav_height"
        android:layout_alignParentBottom="true"
        android:background="@drawable/main_nav_bg"
        app:tabIndicatorHeight="0dp" />


    <android.support.v4.view.ViewPager
        android:id="@+id/mainTabViewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/mainTabLayout"
        android:layout_alignParentTop="true" />
</RelativeLayout>

关联TabLayout和ViewPager：

tabLayout.setupWithViewPager(viewPager)

创建ViewPagerAdapter：

inner class ViewPagerAdapter(fm: FragmentManager) : FragmentPagerAdapter(fm) {

    var fm: FragmentManager? = null
    
    init {
        this.fm = fm
    }

    override fun getItem(position: Int): Fragment {
        return fragmentList.get(position)
    }

    override fun getCount(): Int {
        return fragmentList.size
    }
}

关联ViewPager和ViewPagerAdapter：

//设置ViewPager
mViewPagerAdapter = ViewPagerAdapter(supportFragmentManager)
viewPager.adapter = mViewPagerAdapter

给ViewPager设置pagerChange改变的事件：

//设置监听
viewPager.addOnPageChangeListener(TabViewOnPageChangeListener())

private inner class TabViewOnPageChangeListener : ViewPager.OnPageChangeListener {
    override fun onPageScrollStateChanged(state: Int) {
    }

    override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {
    }

    override fun onPageSelected(position: Int) {
        setTabShow(position)
    }
}

private fun setTabShow(id: Int) {
    var count = mViewPagerAdapter?.count as Int
    var i = 0
    while (i < count) {
        var btn: ToggleButton = tabLayout.getTabAt(i)?.customView as ToggleButton
        btn.isChecked = (i == id)
        i++
    }
}

设置TabLayout中的TabView，也就是每一个标签的View布局样式：

fun getTabView(position: Int): ToggleButton {
    var resID: Int = 0
    var mToggleButton: ToggleButton =
            View.inflate(applicationContext, R.layout.main_tab_togglebutton, null) as ToggleButton
    when (position) {
        0 ->
            resID = R.drawable.main_tab_home_selector
        1 ->
            resID = R.drawable.main_tab_movie_selector
        2 ->
            resID = R.drawable.main_tab_vedio_selector
        3 ->
            resID = R.drawable.main_tab_movieinfo_selector
        4 ->
            resID = R.drawable.main_tab_person_selector

        else -> null

    }

    formatToggleButtonTab(mToggleButton, resID, titleList[position])
    return mToggleButton
}

fun formatToggleButtonTab(mToggleButton: ToggleButton, resId: Int, txt: String) {
    var width: Int = resources.getDimension(R.dimen.d40).toInt()
    var height = width
    var drawable = AppCompatResources.getDrawable(applicationContext, resId)
    if (drawable != null) {
        drawable.setBounds(0, 0, width, height)
        mToggleButton.setCompoundDrawables(null, drawable, null, null)
    }
    mToggleButton.textOff = txt
    mToggleButton.textOn = txt
    mToggleButton.text = txt
}

将TabView添加到TabLayout中，且设置每一个TabView的onClick：

//设置TabLayout
  titleList.add(getString(R.string.main_tab_home))
  titleList.add(getString(R.string.main_tab_movie))
  titleList.add(getString(R.string.main_tab_cinema))
  titleList.add(getString(R.string.main_tab_movieshow))
  titleList.add(getString(R.string.main_tab_my))
  tabLayout.tabMode = TabLayout.MODE_FIXED
  var i = 0
  while (i < titleList.size) {
      var tab: TabLayout.Tab? = tabLayout.getTabAt(i)
      if (tab != null) {
          var toggleBtn: ToggleButton = getTabView(i)

          if (toggleBtn != null) {
              tab.customView = toggleBtn
              toggleBtn.setOnClickListener(TabClickListener())
              toggleBtn.tag = i
          }
      }
      i++
  }

/**
 * tabLayout中TablView的点击监听，
 * 更改当前显示的Fragment
 */
private inner class TabClickListener : View.OnClickListener {
    override fun onClick(p0: View?) {
        var viewId: Int = p0?.tag as Int
        viewPager.currentItem = viewId
    }
}

Demo地址