Android custom tablayout

Question

I want to create tablayout view like this:

Here is code which I written for tab Layout:

public class MainActivity extends AppCompatActivity {

    TabLayout tabLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        toolbar.setTitle("Suman Restaurant");

        tabLayout = findViewById(R.id.tabLayout);

        tabLayout.addTab(tabLayout.newTab().setText("Chinese"));
        tabLayout.addTab(tabLayout.newTab().setText("Noodles"));
        tabLayout.addTab(tabLayout.newTab().setText("Snacks"));
        tabLayout.addTab(tabLayout.newTab().setText("Pizza"));
    }
}

How can I style the tab layout like the attached image?

Answer 1

I know this is too late to post this answer but i feel this will be helpful for someone in future so i'm posting it.

I was doing similar kind of tab layout, i searched a lot but dint find any useful solution. here is bit length solution but it will work which you looking for.

add one method which will add the tabs in tab layout like

private void addTabsOnTablayout() {
    tablayout.addTab(tablayout.newTab().setText("Chinese"), 0);
    tablayout.addTab(tablayout.newTab().setText("Noodles"), 1);
    tablayout.addTab(tablayout.newTab().setText("Snacks"), 2);
    tablayout.addTab(tablayout.newTab().setText("Pizza"), 3);
    tablayout.addOnTabSelectedListener(this);

    for (int i = 0; i < tablayout.getTabCount(); i++) {
        TabLayout.Tab tab = tablayout.getTabAt(i);
        if (tab != null) {
            TextView tabTextView = new TextView(getActivity());
            tabTextView.setTextAlignment(View.TEXT_ALIGNMENT_CENTER);
            tabTextView.setTextSize(16);
            tabTextView.setPadding(0, 4, 0, 4);
            tabTextView.setBackgroundResource(R.drawable.tab_inactive);
            tabTextView.setTextColor(getResources().getColor(R.color.tab_unselected_text_color));
            tab.setCustomView(tabTextView);

            tabTextView.setText(tab.getText());

            // First tab is the selected tab, so if i==0 then set BOLD typeface
            if (i == 0) {
                tabTextView.setBackgroundResource(R.drawable.tab_active);
                tabTextView.setTextColor(getResources().getColor(R.color.tab_selected_text_color));
                tab.setCustomView(tabTextView);
            }
        }
    }
}

Implement TabLayout.OnTabSelectedListener and override appropriate methods and write code for on tabSelected and on notselected

 @Override
public void onTabSelected(TabLayout.Tab tab) {
    TextView tabTextView = (TextView) tab.getCustomView();
    tabTextView.setBackgroundResource(R.drawable.tab_active);
    tabTextView.setTextColor(getResources().getColor(R.color.tab_selected_text_color));
    tab.setCustomView(tabTextView);
    showSnack();

}

@Override
    public void onTabUnselected(TabLayout.Tab tab) {
        TextView tabTextView = (TextView) tab.getCustomView();
        tabTextView.setBackgroundResource(R.drawable.tab_inactive);
        tabTextView.setTextColor(getResources().getColor(R.color.tab_unselected_text_color));
        tab.setCustomView(tabTextView);
    }

Finally create a drawable for tab_active and tab_inactive.

Answer 2

Their is no short easy answer; but you can do this in a Linear Layout, all you will have to do is add a relative layout and then have the very most left button be centered vertically, and to the left, and then every other button would be relative, to that button. slightly to the right. Video's that might be helpful. Hope this will help you, remember to do some research on anything before asking question.