本人很懒，直接上代码了。

布局文件：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.ztd.nahu.activity.HomeActivity">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabIndicatorColor="@android:color/transparent"
            app:tabIndicatorHeight="0dp"
            app:tabSelectedTextColor="@android:color/holo_red_light"
            app:tabTextColor="@android:color/black"
            android:layout_alignParentBottom="true">
        </android.support.design.widget.TabLayout>
        <android.support.v4.view.ViewPager
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@+id/tab_layout"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    </RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

Tab自定义布局：

<?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:gravity="center"
    android:orientation="horizontal">
    <ImageView
        android:id="@+id/img"
        android:layout_width="20dp"
        android:layout_height="20dp" />
    <TextView
        android:id="@+id/title_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/tab_text_color"/>
</LinearLayout>

Activity代码：

public class HomeActivity extends AppCompatActivity {
    @BindView(R.id.tab_layout)
    TabLayout mTabLayout;
    @BindView(R.id.container)
    ViewPager mViewPager;
    private TabPagerAdapter mSectionsPagerAdapter;
    private String[] titleArra = new String[]{"最新", "娱乐", "财经", "体育"};
    private int[] imgArra = {R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_home);
        ButterKnife.bind(this);

        // Create the adapter that will return a fragment for each of the three
        // primary sections of the activity.
        mSectionsPagerAdapter = new TabPagerAdapter(this, getSupportFragmentManager(), titleArra, imgArra);

        //TabLayout设置为宽度占满屏幕或者为可滚动
        mTabLayout.setTabMode(TabLayout.MODE_FIXED);

        // Set up the ViewPager with the sections adapter.
        mViewPager.setAdapter(mSectionsPagerAdapter);
        mTabLayout.setupWithViewPager(mViewPager);

        //Add the tag elements
        for (int i = 0; i < titleArra.length; i++) {
            TabLayout.Tab tab = mTabLayout.getTabAt(i);
            tab.setCustomView(mSectionsPagerAdapter.getTabView(i));
        }
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_home, menu);
        return true;
    }
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

适配器：

public class TabPagerAdapter extends FragmentPagerAdapter {
    private Context mContext;
    private String[] titleArra = null;
    private int[] imgArra = null;
    public TabPagerAdapter(Context context, FragmentManager fm, String[] titleArra, int[] imgArra) {
        super(fm);
        this.mContext = context;
        this.titleArra = titleArra;
        this.imgArra = imgArra;
    }
    @Override
    public Fragment getItem(int position) {
        // getItem is called to instantiate the fragment for the given page.
        // Return a PlaceholderFragment (defined as a static inner class below).
        switch (position) {
            case 0:
                break;
            case 1:
                break;
            case 2:
                break;
            case 3:
                break;
        }
        return MapFragment.newInstance(position + 1);
    }
    @Override
    public int getCount() {
        return titleArra == null ? 0 : titleArra.length;
    }
    @Override
    public CharSequence getPageTitle(int position) {
        return titleArra != null ? titleArra[position] : null;
    }

    public View getTabView(int position) {
        View view = LayoutInflater.from(mContext).inflate(R.layout.icon_layout, null);
        TextView tv = (TextView) view.findViewById(R.id.title_tv);
        ImageView imageView = (ImageView) view.findViewById(R.id.img);
        if (imgArra == null || titleArra == null) {
            return view;
        }
        tv.setText(titleArra[position]);
        imageView.setImageResource(imgArra[position]);
        return view;
    }
}

TabLayout+ViewPager+Fragment制作页卡