還是谷歌的design25.3.1包下的布局
可以和viewpager配合使用，代碼如下所示：

public class ShiYan extends AppCompatActivity {
    @BindView(R.id.tablayout)
    TabLayout tabLayout;
    @BindView(R.id.viewpager)
    ViewPager viewPager;
    private List<View> list;
    private String[] s = {"第一個", "第二個", "第三個"};

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.shiyan);
        ButterKnife.bind(this);
        
        tabLayout.addTab(tabLayout.newTab().setText("第一個"));
        tabLayout.addTab(tabLayout.newTab().setText("第二個"));
        tabLayout.addTab(tabLayout.newTab().setText("第三個"));
        list = new ArrayList<>();
        list.add(View.inflate(ShiYan.this, R.layout.viewpager, null));
        list.add(View.inflate(ShiYan.this, R.layout.viewpager, null));
        list.add(View.inflate(ShiYan.this, R.layout.viewpager, null));
        viewPager.setAdapter(new PagerAdapter() {
            @Override
            public int getCount() {
                return list.size();
            }

            @Override
            public boolean isViewFromObject(View view, Object object) {
                return view == object;
            }

            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                container.addView(list.get(position));
                return list.get(position);
            }

            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
                container.removeView((View) object);
            }
        });
        tabLayout.setupWithViewPager(viewPager);
       // setupWithViewPager方法內(nèi)部會remove所有的tabs上的text，這里重新設(shè)置一遍tabs的text，否則tabs的text不顯示
        for (int i = 0; i < s.length; i++) {
            tabLayout.getTabAt(i).setText(s[i]);
        }
    }
}