Collapsing toolbar with viewpager and bottom button

Question

I have an activity with a collapsing toolbar and a view pager. On one of those pages, there is a webview with a button below it:

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@+id/button"
    android:layout_alignParentTop="true">

    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:isScrollContainer="false" />
</android.support.v4.widget.NestedScrollView>

<Button
    android:id="@+id/button"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true" />

</RelativeLayout>

edit: and the other XML

<android.support.design.widget.CoordinatorLayout android:id="@+id/coordinator"
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.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="90dp"
    app:elevation="0dp">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">


        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:layout_scrollFlags="scroll|enterAlways">

        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">


    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="center"
        app:tabMode="scrollable"
        app:tabSelectedTextColor="@color/accent" />

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_weight="1"
            android:layout_width="match_parent"
            android:layout_height="0px" />

</LinearLayout>

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

The button should always be visible. The problem is, that when the toolbar is not collapsed, it gets pushed out of the screen, and gets only visible, when you collapse the toolbar

I've been searching a lot but can't find a solution. Also I had a look into the xml of the snackbar, as it is always shown on the correct position, but I couldn't see anything special. You have any idea on how to fix this, or is it not possible with a ViewPager?

edit2: in this answer, the problem is described pretty good, however the suggested fix, to add the view to the coordinator view directly won't work, as the button only belongs to on of the pages and setting visibility off the button based on whether the correct page is shown seems like REALLY bad style :) https://stackoverflow.com/a/32959820/1625744

Can you add a screenshot of your problem. Also remember that layouts are measured in dp, not in px. Change your ViewPager to "0dp" instead of "0px" — Pedro Varela, Jan 16 '17 at 15:42
Indeed, my solution is most appropriate for buttons/views that aren't specific to one page in the `ViewPager`. Here's the problem: the `ScrollingViewBehavior` will handle moving the dependent view (in your case, the `LinearLayout` containing the `ViewPager`); however, the child views e.g. your bottom-anchored button won't get access to any of those events. You would have to have some custom code for layout or behavior that would be able to tell the button where the bottom of the `CoordinatorLayout` is *in relation to the button's `RelativeLayout` parent*, which doesn't know any of this. — kris larson, Jan 16 '17 at 17:21
If I get some free time, I'll take a deeper look and see if I can come up with a solution for this. — kris larson, Jan 16 '17 at 17:23

score 1 · Accepted Answer · answered Jan 17 '17 at 10:01

so I found a working solutions that doesn't seem so bad. I extended AppBarLayout.ScrollingViewBehavior and added this method:

@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, View child,
                                      View dependency) {
    final CoordinatorLayout.Behavior behavior =
            ((CoordinatorLayout.LayoutParams) dependency.getLayoutParams()).getBehavior();
    if (behavior instanceof AppBarLayout.Behavior) {
        if (childBottom == 0) {
            childBottom = child.getBottom();
            int offset = childBottom - parent.getHeight();
            ViewGroup.LayoutParams params = child.getLayoutParams();
            initialHeigth = child.getHeight() - offset;
            params.height = initialHeigth;
            child.setLayoutParams(params);
        } else {
            int offset = dependency.getHeight() - dependency.getBottom();
            ViewGroup.LayoutParams params = child.getLayoutParams();
            params.height = initialHeigth + offset;
            child.setLayoutParams(params);
        }
    }
    return super.onDependentViewChanged(parent, child, dependency);
}

not sure if this is a good solution, as the layout gets size reset all the time. Also the offset is calculated way more complicated in the super method, but all that stuff is in private methods and variables

Collapsing toolbar with viewpager and bottom button

1 Answers1