Extra white space on SlidingTabLayout bar in Android 7.0 N?

Question

Just upgraded to Android 7.0 and all my SlidingTabLayout bars now have extra white space on the bottom. Not sure if this is intended by the Android team or not, but is there anyway of getting rid of the new white space?

I am using code provided by Android which can be found here:

Sliding Tab Layout: https://developer.android.com/samples/BasicTransition/src/com.example.android.common/view/SlidingTabLayout.html

Sliding Tab Strip: https://developer.android.com/samples/BasicTransition/src/com.example.android.common/view/SlidingTabStrip.html

Here is a snippet of my layout code:

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/tool_bar"
        android:layout_height="56dp"
        android:layout_width="match_parent"
        android:background="@drawable/toolbar_gradient"
        app:layout_scrollFlags="scroll|enterAlways"
        android:theme="@style/Base.ThemeOverlay.AppCompat.Dark" />

    <com.airsenze.wineinsider.controllers.SlidingTabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"/>

</android.support.design.widget.AppBarLayout>

<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:layout_width="match_parent">
</android.support.v4.view.ViewPager>

Thanks! Let me know if you need anymore information.

"Not sure if this is intended by the Android team or not" -- that is your code, not the Android team's code. You started with an Android example, but Android examples like this are not necessarily guaranteed to remain consistent across API levels. They are examples, not support library classes. In effect, you need to maintain your modified version of their code yourself. — CommonsWare, Aug 23 '16 at 19:28
Yeah I understand that. Not trying to blame the Android team for anything. I have been trying all morning to get rid of the white space, but nothing seems to work. Just wondering if anyone has a quick solution to get rid of it. — Aidan Laing, Aug 23 '16 at 19:30
There isn't really any reason. I changed it to wrap_content and everything is the same. — Aidan Laing, Aug 23 '16 at 19:36
Created an issue on github, so maybe some will fix it: https://github.com/google/iosched/issues/218 — yooouuri, Dec 17 '16 at 23:46

Afshin · Accepted Answer · 2023-08-01T07:52:27.737

15

Thanks to MihaiW, This happens when distributeEvenly is true. Just replace this line:

lp.width = 0;

With:

lp.width = ViewGroup.LayoutParams.MATCH_PARENT

in the populateTabStrip() method in the SlidingTabLayout.java class and your problem will be solved.

edited Aug 01 '23 at 07:52

answered Mar 21 '17 at 23:41

Afshin

340
4
8

This works well for nougat devices! I wonder if it affects the already working previous versions though... Thanks a bunch! – Stefan Petit-Freres May 29 '17 at 22:14
1

Yes. I tested it on Android 4.0 to last version(7.0), it's OK. – Afshin May 31 '17 at 14:04
1

While it fixes the initial problem, this solution add another one, the tabs are not distributed evenly anymore. I've replaced "lp.width=0" with "lp.width=ViewGroup.LayoutParams.MATCH_PARENT". This seems to work. – MihaiW Oct 16 '17 at 10:58
What really worked for me was this answer https://stackoverflow.com/a/35824027/1315405 – André Lourenço Jul 12 '18 at 04:24
@Afshin please help problem still not solved. https://stackoverflow.com/questions/51806016/extraline-is-added-in-slidingtablayout – Mihir Aug 16 '18 at 10:13

score 0 · Answer 2 · answered Sep 23 '16 at 06:57

Does your component style file has declare

 --<item name="android:windowIsFloating">false</item>--

I just find a similar bug with BottomDialog,I delete

--<item name="android:windowIsFloating">false</item>--

this line in my component style file otherwise the component will show 30dp above the real bottom. I think you should check this file:

android:theme="@style/AppTheme.AppBarOverlay"

delete item one by one to find which item acuse this bug.

score 0 · Answer 3 · answered Feb 16 '17 at 09:04

I don't think it will work for you or not but still try this in your layout. Set custom height (48dp) and set a condition for nougat. It unfortunately works for me:) .

  <com.airsenze.wineinsider.controllers.SlidingTabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:background="@color/white"/>

score 0 · Answer 4 · answered Mar 31 '17 at 13:20

You should set max lines to 1 to tab's TextView.

There are two ways:

1. Change SlidingTabLayout:

protected TextView createDefaultTabView(Context context) {
    TextView textView = new TextView(context);
    textView.setMaxLines(1);
    ...
}

2. Use custom tab layout

For example:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:background="?selectableItemBackground"
              android:gravity="center_horizontal"
              android:orientation="vertical"
              android:paddingBottom="8dp"
              android:paddingTop="8dp">

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAllCaps="true"
        android:textColor="@color/text_tab"
        android:maxLines="1" <=============attention==============
        android:textSize="12dp"
        android:textStyle="bold"/>

</LinearLayout>

score 0 · Answer 5 · answered Jun 21 '18 at 21:11

Afshin given a excellent answer. I have runned on some issues with API lower than 25. This is maybe late answer but it could help someone.

if (android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
                    lp.weight = 1;
                }else{
                    lp.width = 0;
                    lp.weight = 1;
                }

Extra white space on SlidingTabLayout bar in Android 7.0 N?

5 Answers5