还是谷歌的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方法内部会remove所有的tabs上的text，这里重新设置一遍tabs的text，否则tabs的text不显示
        for (int i = 0; i < s.length; i++) {
            tabLayout.getTabAt(i).setText(s[i]);
        }
    }
}