Hide Toolbar with Coordinatorlayout + Tablayout + Viewpager

Asked

Viewed 229 times

1

Good morning, I’m trying to implement the features of google Material Design and wanted to hide the Toolbar when I scroll in Viewpager (has a Recyclerview inside), however I’m not getting the intended effect (although I have all the necessary tags in XML). I think the problem is that I have the Appbar inside a Linearlayout (I used because the Viewpager was cut at the bottom and that solved the problem), however when the shot still does not do the intended effect. I send the layouts in question:

skeleton_view.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">

<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:id="@+id/appbarlayout">
    <android.support.v7.widget.Toolbar
        android:id="@+id/tool_bar"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/colorTeal200"
        app:popupTheme="@style/AppTheme"
        android:elevation="6dp"
        app:layout_scrollFlags="scroll|enterAlways"/>

    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="52dp"
        app:tabGravity="fill"
        app:tabMode="fixed"
        android:layout_gravity="bottom"
        android:background="@color/colorText"
        app:tabIndicatorColor="@color/colorTeal500"
        android:id="@+id/tab_layout"/>
</android.support.design.widget.AppBarLayout>

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

<android.support.design.widget.FloatingActionButton
    android:id="@+id/gallery_fab"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_marginRight="160dp"
    android:layout_marginBottom="16dp"
    android:src="@drawable/ic_photo_library_white_24px"
    app:backgroundTint="@color/colorAccent700"
    app:borderWidth="0dp"
    app:elevation="12dp"
    app:pressedTranslationZ="12dp"
    android:visibility="invisible"/>

<android.support.design.widget.FloatingActionButton
    android:id="@+id/camera_fab"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_marginRight="90dp"
    android:layout_marginBottom="16dp"
    android:src="@drawable/ic_camera_alt_white_24px"
    app:backgroundTint="@color/colorAccent700"
    app:borderWidth="0dp"
    app:elevation="12dp"
    app:pressedTranslationZ="12dp"
    android:visibility="invisible"/>

<android.support.design.widget.FloatingActionButton
    android:id="@+id/floating_button"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:layout_gravity="bottom|right"
    android:layout_margin="16dp"
    android:src="@drawable/ic_add_white_24px"
    app:backgroundTint="@color/colorAccent700"
    app:borderWidth="0dp"
    app:elevation="12dp"
    app:layout_behavior="com.draft.meal.testing.ScrollFABAction.ScrollOffBottomBehaviour"
    app:layout_anchorGravity="bottom|right|end"
    app:layout_anchor="@id/view_pager"/>

Skeleton.xml

<android.support.v4.widget.DrawerLayout
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="fill_parent"
android:id="@+id/nav_drawer"
android:layout_alignParentRight="true"
android:fitsSystemWindows="true"
android:elevation="7dp"
tools:openDrawer="end"
android:gravity="left"
android:layout_gravity="end">

<include layout="@layout/skeleton_view"/>

<android.support.design.widget.NavigationView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/navigation_view"
    android:layout_gravity="end"
    android:gravity="left"
    app:headerLayout="@layout/navigation_header"
    app:elevation="4dp"
    app:menu="@menu/drawer">
</android.support.design.widget.NavigationView>

Thanks for the help!

  • Exact, the AppBarLayout must be the direct son of CoordinatorLayout. Is there any problem when this is done?

  • When I take the Linearlayout, it also does not make the effect of hiding the Toolbar. Linearlayout is only there to prevent the last image (in Viewpager’s Recyclerview) from being "cropped" below. The application normally runs either with or without Linearlayout, however it seems that it does not correctly assume the scroll in the viewpager fragment..

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.