android - ActionBar tabs set dynamic width according to screen width

Question

I have 5 tabs in all. This is how I am adding them :

for (int i = 0; i < tabs.length; i++) {

                if (i == 0) {
                    actionBar.addTab(
                            actionBar.newTab()
                                    .setText(null)
                                    .setIcon(R.drawable.activity)
                                    .setTabListener(this));
                } else if (i == 1) {
                    actionBar.addTab(
                            actionBar.newTab()
                                    .setText(null)
                                    .setIcon(R.drawable.group)
                                    .setTabListener(this));
                } else if (i == 2) {
                    actionBar.addTab(
                            actionBar.newTab()
                                    .setText(null)
                                    .setIcon(R.drawable.message)
                                    .setTabListener(this));
                } else if(i == 3){
                    actionBar.addTab(
                            actionBar.newTab()
                                    .setText(null)
                                    .setIcon(R.drawable.notification)
                                    .setTabListener(this));
                }
                else
                {
                    actionBar.addTab(
                            actionBar.newTab()
                                    .setText(null)
                                    .setIcon(R.drawable.hamburger)
                                    .setTabListener(this));
                }  

I tried this solution but this sets the width of the tab icon and not the tab itself.

Following are the styles I have applied :

App theme :

<style name="CustomActionBarTheme" parent="Theme.AppCompat.Light">
        <item name="android:windowActionBarOverlay">true</item>
        <item name="android:actionBarTabStyle">@style/actionBarTabBarStyle</item>
        <item name="android:actionBarStyle">@style/MyActionBar</item>
    </style>  

 <style name="actionBarTabBarStyle" parent="@style/Widget.AppCompat.ActionBar.TabView">
        <item name="android:paddingLeft">1dp</item>
        <item name="android:paddingRight">1dp</item>
        <item name="android:minWidth">10dp</item>
        <item name="android:maxWidth">15dp</item>
        <item name="android:showDividers">none</item>
    </style>  

I also tried using customView for the tab but it didn't work.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tabItemLayout"
    android:gravity="center"
    android:layout_width="wrap_content" android:layout_height="match_parent">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:id="@+id/imageViewTab" />
</LinearLayout>

The tabs are too wide and the tabBar is sliding. How can I make the tabs take dynamic width as per the screen width without the sliding effect. i.e. all tabs should fit in the screen width and should be of equal width.

There are 4 tabs visible here. The tabBar is scrollable so the fifth tab appears on scrolling which I don't want.

Answer 1

Tab view width is based on content/yourImage size, so to make tab view width smaller, we have to control the content/Image size. You can do this by putting ImageView inside FrameLayout, for example your customView can be:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/tabItemLayout"
   android:gravity="center"
   android:layout_width="wrap_content" android:layout_height="match_parent">

   <FrameLayout
      android:layout_width="48dp"
      android:layout_height="48dp"
      android:layout_centerInParent="true"
      >

    <ImageView
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:adjustViewBounds="true"
      android:layout_gravity="center"
      android:gravity="center"
      android:id="@+id/imageViewTab" />

   </FrameLayout> 

</RelativeLayout>

and custom style for tab:

<style name="AppTheme" parent="@style/Theme.AppCompat.Light">

             ... ...
    <item name="actionBarTabStyle">@style/ActionBarTabStyle</item>

</style>

<style name="ActionBarTabStyle" parent="@style/Widget.AppCompat.Base.ActionBar.TabView">
   <item name="android:paddingLeft">0dp</item>
   <item name="android:paddingRight">0dp</item>
   <item name="android:paddingTop">0dp</item>
   <item name="android:paddingBottom">0dp</item>
</style>

[SCREENSHOT]

For FrameLayout size with 24dp:

For FrameLayout size with 40dp