I have a CoordinatorLayout
with a Toolbar
and a TabLayout
inside the AppBarLayout
. Additionally, I have a ViewPager
inside the CoordinatorLayout
but outside the ViewPager
.
The problem is that the ViewPager's
height is bigger than what is actually available, resulting in some views from my Fragment
being cut.
<?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 what I mean when I say that the ViewPager
has the wrong height.
UDPATE: I do not recommend this anymore. I found that it was causing an infinite loop of calls to onDependentViewChanged
.
Based on Yevhenii's answer above, I think I managed to solve this in an even simpler way:
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"
on your ViewPager
or whatever view you have below the AppBar
.
Take note that this is not a generic solution for all CoordinatorLayout
s, but it seems to work when you have a view below an app bar that you don't want to let extend beyond the bottom of the parent CoordinatorLayout.
UPDATE:
You should also set app:layout_anchor="@id/app_bar"
on your ViewPager for the situation when the keyboard disappears. If you don't the ViewPager
layout will not be refreshed when the keyboard disappears and the ViewPager
will appear cut off.
I've spent a lot of time googling and applying suggested answers, but I've not succeeded, so decided to dive deeper into the problem and find out a complete answer, which I want to share here. Maybe it will help somebody.
So the problem is that when ViewPager is used with Collapsing Toolbar, the first one doesn't calculate its height properly. And if you want the ViewPager fill all the space to the bottom of the screen, but not more - there is a problem. Just adding layout_marginBottom
will not solve the problem because of Collapsing Toolbar will change its height when user scroll.
So if you want your ViewPager to adapt its height accordingly to Collapsing Toolbar height changes, you need 2 things:
Here they are (written in Kotlin, but it's just a separate file and can be placed into Java project directly):
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:
Add the custom behavior to your ViewPager: app:layout_behavior="your.package.ViewPagerScrollingBehavior"
Add custom OnGlobalLayoutListener to your ViewPager: viewPager.getViewTreeObserver().addOnGlobalLayoutListener(new FixHeightGlobalLayoutListener(this, viewPager));
A possible hack can be adding same bottom margin as toolbar which is
?attr/actionBarSize . You can even fiddle around with other possible ui hacks of margins to give you best result.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With