Prevent ActionBar tabs from horizontal scrolling

Question

I have 4 tabs in an actionBar. I'm using a RelativeLayout with an ImageView and a TextView as a customView for the tabs.

The actionBar overflows the width of the screen and the tabs become horizontally scrollable.

The actual width of my customView is not much, but the Tabs take up extra space (varies on different devices).

How can I restrict the tabs to occupy not more than 1/4th of the screen width.

On an Sony Xperia Z2 running 4.4.2

On a Moto E2 running Android 5.0

I have answered this question in [ActionBar tabs set dynamic width according to screen width](http://stackoverflow.com/questions/29339797/actionbar-tabs-set-dynamic-width-according-to-screen-width/29428695#29428695) — Xcihnegn, Apr 07 '15 at 18:44
@Xcihnegn the fixed width worked for me. Can you please put in an answer, so that I may accept it. Thanks — manishKungwani, Apr 08 '15 at 10:18

score 1 · Answer 1 · answered Apr 07 '15 at 18:46

Instead of Using the ActionBar, you will need to either implement a ToolBar or something similar in your UI which you can control the width of that has Tab's inside it...

ActionBar is meant to take up the full width of the Screen whereas you can specify the width of a Toolbar yourself...

create a tab_layout.xml:

 <?xml version="1.0" encoding="utf-8"?>
 <android.support.v7.widget.Toolbar 
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      android:layout_width="200dp"
      android:layout_height="wrap_content"
      app:popupTheme="@style/Theme.AppCompat.Light.NoActionBar">

    <!-- Add your Tabs here -->

  </android.support.v7.widget.Toolbar>

Then just include this layout in your activity:

<include layout="@layout/tab_layout 
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"/>

The problem is not that the actionBar takes up the complete width, the issue is that the tabs overflow the screen, making it scrollable. — manishKungwani, Apr 08 '15 at 06:17

score 1 · Accepted Answer · edited May 23 '17 at 11:56

1

Tab view width is based on content/yourImage size, so to make tab view width smaller, you have to control the content/Image size. You can use CustomView for your Tab by putting ImageView inside FrameLayout.

For detail please go to the answer for post ActionBar tabs set dynamic width according to screen width.

edited May 23 '17 at 11:56

Community

1
1

answered Apr 08 '15 at 12:21

Xcihnegn

11,579
10
33
33

Prevent ActionBar tabs from horizontal scrolling

2 Answers2