Change tab width in ActionBar.Tab

Question

I'm creating an app with Tab navigation. I display icons instead of text.

I want the tabs to only wrap the image, so I won't have to scroll to reach all the tabs.

How can I create tabs that just fills the screen?

This is how the tabs currently look:

You can see I need to scroll... There is another tab that is unseen in this screenshot.

This is my code for creating the tabs:

    final ActionBar actionBar = getSupportActionBar();
    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

    // Create the adapter that will return a fragment for each of the three

    actionBar.addTab(
            actionBar.newTab()
                    .setIcon(R.drawable.tabs_bar_add_item)
                    .setContentDescription(TAB_ADD_ITEM)
                    .setTabListener(this)
                    .setCustomView(R.layout.add_item_tab)
    );

    actionBar.addTab(
            actionBar.newTab()
                    .setIcon(R.drawable.tabs_bar_shopping_list)
                    .setContentDescription(TAB_SHOW_LIST)
                    .setTabListener(this)
    );

    actionBar.addTab(
            actionBar.newTab()
                    .setIcon(R.drawable.tabs_bar_map)
                    .setContentDescription(TAB_SHOW_MAP)
                    .setTabListener(this)
    );

    actionBar.addTab(
            actionBar.newTab()
                    .setIcon(R.drawable.tabs_bar_specials)
                    .setContentDescription(TAB_SHOW_SPECIALS)
                    .setTabListener(this)
    );

The first R.layout.add_item_tab is just a simple imageView. I tried it that way...

Any ideas?

Answer 1

Finally I've found the cause, maybe it can help someone...

The error was that my icons were too big to fit into a single tab. Even though they were scaled-down, their calculation size for the Tab width was the original size.

MY solution was to wrap those images with ImageView, and set its width to

ImageWidth = ScreenWidth/NumOfTabs - 2*16dp(Converted to pixels)

The extra 16*2 is for the padding.

In addition, it is possible to disable the padding.

Answer 2

I found this code here. It gets the job done, combined with the above answer; I just couldn't get my 6 icons at a satisfactory size, and I couldn't figure out how to get rid of the extra spacing around my icons.

private void setTabsMaxWidth() {
   DisplayMetrics displaymetrics = new DisplayMetrics();
   getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
   int screenWidth = displaymetrics.widthPixels;
   final ActionBar actionBar = getActionBar();
   final View tabView = actionBar.getTabAt(0).getCustomView();
   final View tabContainerView = (View) tabView.getParent();
   final int tabPadding = tabContainerView.getPaddingLeft() + tabContainerView.getPaddingRight();
   final int tabs = actionBar.getTabCount();
   for(int i=0 ; i < tabs ; i++) {
      View tab = actionBar.getTabAt(i).getCustomView();
      TextView text1 = (TextView) tab.findViewById(R.id.text1);
      text1.setMaxWidth(screenWidth/tabs-tabPadding-1);
  }
}