ViewPager with Toolbar and TabLayout has wrong height

Question

I have a ViewPager below an AppBarLayout (with a Toolbar and a TabLayout). I cannot understand why the height of the loaded fragments is more than the available space, even if there are no elements so big, making the tab scrollable.

This is the main layout xml:

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabGravity="fill"
            app:tabMode="fixed" />
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

As you can see in my Fragment I have a Button with a layout_alignParentBottom but I guess it's stretching the height of the viewpager too much.

Here the layout from the design view:

Lh

Can you shoot screen your app? – Losse

@NguyễnTrungHiếu Yeah, sure. Added a screen. – Lh

@Lh did you find out the solution to your problem?Asking because i am facing the exact same issue. :( – Tesch

@Droidwala nope, in the end I've changed slightly the design.. :( – Lh

Looks like that's the only option left..what design change you made then in your case?Moved logout somewhere else? – Tesch

@Droidwala yes, exactly. I didn't finish the app because I'm working also on other project but the plan is to redesign it without the tabs! – Lh

do you solve this problem? – Abigailabigale

Answer 1

you can try to add a LinearLayout between AppBarLayout and ViewPager. It works for me. :)

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="fixed"
            app:tabGravity="fill"/>

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


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

</LinearLayout>

Buckling

This will have side effect of sticky action bar, will not hide on scroll. – Somme

Answer 2

Adding a padding to the ViewPager did the trick for me:

<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="?attr/actionBarSize"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

Note that the padding has the exact same size as the toolbars height.
Instead of ?attr/actionBarSize, ?actionBarSize is also valid.

Rosina

Answer 3

Try with this.

Here you need to declare android:fillViewport="false" property in Tab Bar.

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabGravity="fill"
            app:tabMode="fixed" />
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout> 

Do change here in Tab Bar.

<android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fillViewport="false" />

EDIT 1:

This is what working for me Refer this.

<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_scrollFlags="scroll|enterAlways|snap" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fillViewport="false" />

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

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


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

Hamlin

Still the same. As you can see from the screenshot the logout button should be at the bottom, but the height of the fragment is more of the space available, and so all the view is scrollable. (I've added a screenshot from the design view) – Lh

Answer 4

If you need a fixed toolbar without scrolling, then you can remove CoordinatorLayout and AppBarLayout from the layout design and use RelativeLayout instead. It is support library bug, and has no solution upto this date. You can simply use following layout code for ViewPager along with Toolbar and TabLayout. ViewPager won't overflow in this case as it has been pointed out in question.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".HomeActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="@android:color/white"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        android:background="?attr/colorPrimary"
        android:layout_below="@id/toolbar"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/tabs"/>

</RelativeLayout>

Hope it helps someone!

Thriller

Answer 5

I have used Relative layout inside of CoordinatorLayout

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways|snap"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Dark" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fillViewport="false" />

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/appbar"
         />

</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

Hydrazine

Answer 6

You have to keep the TabLayout outside the AppBarLayout.

Something like this.

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

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

<android.support.design.widget.TabLayout
        android:id="@+id/home_tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        app:tabGravity="fill"
        app:tabIndicatorColor="@color/primary_blue_dark"
        app:tabMode="fixed"
        app:tabSelectedTextColor="@color/primary_blue"
        app:tabTextColor="@color/primary_blue_light"
        app:tabTextAppearance="@style/tab_layout_font_style"/>

<android.support.v4.view.ViewPager
        android:id="@+id/home_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="fill_horizontal"/>

This worked for me.

Edrick

Wrong answer, it works because view pager has no behavior – Meritocracy

Answer 7

For me the only sollution that worked with a Coordinator Layout, so that Viewpager layout_height stays within limits was adding layout_behaviour to the Toolbar, like this:

 <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="?attr/colorPrimary"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        app:popupTheme="@style/AppTheme.AppBarOverlay">

Probably too late for you, but maybe it helps someone else.

This didn't bother me when I started my app, but later when I wanted to add a snackbar on another tab, the snackbar was only visible if I scrolled the page.

Strength

Answer 8

I solved this problem by changing

android:layout_height="wrap_content"

to

android:layout_height="0dp"

and setting

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="@id/tl_WelcomeTabs"

in the ViewPager's XML attributes. 0dp in this case means something like match_constraint.

For example this layout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <android.support.design.widget.TabLayout
        android:id="@+id/tl_WelcomeTabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:elevation="6dp"
        android:minHeight="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"

        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        >

        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Start"
            />

        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Mission"
            />

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

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_welcomePager"
        android:layout_width="wrap_content"
        android:layout_height="0dp"

        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tl_WelcomeTabs"
        />


</android.support.constraint.ConstraintLayout>

Left image: android:layout_height="wrap_content" right image: android:layout_height="0dp"

tldr;

Change

android:layout_height="wrap_content"

to

android:layout_height="0dp"

and set layout_constraintBottom_toBottomOf and layout_constraintBottom_toBottomOf in the ViewPager's XML attributes.

Hexamerous

Answer 9

Override behavior of your view pager wit, and add your view pager to this.layouts

override fun onDependentViewChanged(parent: CoordinatorLayout, child: View, dependency: View): Boolean =
            super.onDependentViewChanged(parent, child, dependency).also {
                layouts.forEach { it.setPadding(it.paddingLeft, it.paddingTop, it.paddingRight, it.top) }
            }

Meritocracy