How to customize the tablayout of viewpager with diagonal dividers?

Question

Here the white one is selected tab. The image is attached here>>>>>>>>>

Answer 1

This is the easiest I can think. You can get two png background images for Tablayout background for both cases.

You will have two png in your case. Say bg_tab_first.png and bg_tab_second.png. Now change background accordingly.

tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener(){
    @Override
    public void onTabSelected(TabLayout.Tab tab){
        int selected = tab.getPosition();
        tabLayout.setBackground(ContextCompat.getDrawable(context, selected == 0 ? R.drawable.bg_tab_first : R.drawable.bg_tab_second));
    }
});

I would suggest make drawable instead of using PNG cause flexibility. Follow this answer to get diagonal view.