ViewPager height in coordinator layout greater than available

Question

I have a CoordinatorLayout with a Toolbar and a TabLayout inside an AppBarLayout . In addition, I have a ViewPager inside the CoordinatorLayout , but outside the ViewPager .

The problem is that ViewPager's height is greater than the one that is actually available, which leads to a reduction in some views from my Fragment .

 <?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:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/lightGray" android:fitsSystemWindows="true"> <android.support.design.widget.AppBarLayout android:id="@+id/app_bar_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/AppTheme.AppBarOverlay"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar2" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:popupTheme="@style/AppTheme.PopupOverlay" app:layout_scrollFlags="scroll|enterAlways"/> <android.support.design.widget.TabLayout android:id="@+id/tabLayout" android:scrollbars="horizontal" 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/pager" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"/> </android.support.design.widget.CoordinatorLayout> 

And this is what I mean when I say that the ViewPager has the wrong height.

Answer 1

A possible hack may be to add the same bottom margin as the toolbar , which

? attr / actionBarSize . You can even play with other possible field ui hacks to give you the best score.

Answer 2

I spent a lot of time searching and applying the proposed answers, but I did not succeed, so I decided to delve deeper into the problem and find the full answer that I want to share here. Maybe this will help someone.

So the problem is that when the ViewPager is used with a collapsing toolbar , the former does not calculate its height properly. And if you want the ViewPager to fill all the space to the bottom of the screen, but no more - there is a problem. Just adding layout_marginBottom will not solve the problem, because the Collapsing Toolbar will change its height when the user scrolls.

Therefore, if you want your ViewPager to adapt its height to fit the height of the folding toolbar , you need 2 things:

1. Custom scroll behavior.
2. GlobalLayoutListener, which will correct the height of the ViewPager on first drawing.

Here they are (written in Kotlin, but this is just a separate file and can be placed directly in a Java project):

 import android.app.Activity import android.content.Context import android.graphics.Point import android.support.design.widget.AppBarLayout import android.support.design.widget.CoordinatorLayout import android.util.AttributeSet import android.view.View import android.view.ViewGroup import android.view.ViewTreeObserver /** * Custom extension of AppBarLayout.ScrollingViewBehavior to deal with ViewPager height * in a bunch with Collapsing Toolbar Layout. Works dynamically when AppBar Layout height is changing. */ class ViewPagerScrollingBehavior(context: Context, attributeSet: AttributeSet? = null) : AppBarLayout.ScrollingViewBehavior(context, attributeSet) { override fun onDependentViewChanged(parent: CoordinatorLayout, child: View, dependency: View): Boolean { val layoutParams = child.layoutParams as CoordinatorLayout.LayoutParams layoutParams.height = child.height - (dependency.bottom - child.top) child.layoutParams = layoutParams child.requestLayout() return super.onDependentViewChanged(parent, child, dependency) } } /** * Custom implementation of ViewTreeObserver.OnGlobalLayoutListener to fix the View height * in a bunch with Collapsing Toolbar Layout. Works when View is drawn on the screen for first time. * To be used with ViewPagerScrollingBehavior. */ class FixHeightGlobalLayoutListener(val activity: Activity, val view: View) : ViewTreeObserver.OnGlobalLayoutListener { override fun onGlobalLayout() { val display = activity.windowManager.defaultDisplay val size = Point() display.getSize(size) val height = size.y val location = IntArray(2) view.getLocationOnScreen(location) view.post { val layoutParams = view.layoutParams as ViewGroup.LayoutParams layoutParams.height = height - location[1] view.layoutParams = layoutParams view.requestLayout() } view.viewTreeObserver.removeOnGlobalLayoutListener(this) } } 

And use them in your code:

1. Add custom behavior to your ViewPager : app:layout_behavior="your.package.ViewPagerScrollingBehavior"

2. Add a custom OnGlobalLayoutListener to your ViewPager : viewPager.getViewTreeObserver().addOnGlobalLayoutListener(new FixHeightGlobalLayoutListener(this, viewPager));

Answer 3

Based on Eugene’s answer above, I think I managed to solve this problem even easier:

 class KeepWithinParentBoundsScrollingBehavior : AppBarLayout.ScrollingViewBehavior { constructor() : super() constructor(context: Context, attrs: AttributeSet) : super(context, attrs) override fun onDependentViewChanged(parent: CoordinatorLayout, child: View, dependency: View): Boolean { if (dependency !is AppBarLayout) { return super.onDependentViewChanged(parent, child, dependency) } val layoutParams = child.layoutParams as CoordinatorLayout.LayoutParams layoutParams.height = parent.height - dependency.bottom child.layoutParams = layoutParams return super.onDependentViewChanged(parent, child, dependency) } } 

Then set app:layout_behavior="your.package.KeepWithinParentBoundsScrollingBehavior" to your ViewPager or any other view under the AppBar .

Please note that this is not a general solution for all CoordinatorLayout , but it seems to work when you have a view under the application panel that you do not want to extend beyond the bottom of the parent CoordinatorLayout.