Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to autohide v7 appbar when scrollin hides it partially - android

Following a tutorial, I created this layout:

enter image description here

Here's my layout xml file:

<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/tabanim_maincontent"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.design.widget.AppBarLayout
    android:id="@+id/tabanim_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/tabanim_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/tabanim_tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

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

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

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

What I want is that when I leave the scroll in the mid (when just lower part of App bar is visible), then the appbar should either hide itself or show itself completely like it happens in google play store:

Please note that in case of google play, the app bar is never half hidden when no finger is touching the screen

how to make the app bar like this?

Thanks

like image 818
penduDev Avatar asked Oct 30 '15 12:10

penduDev


People also ask

How to hide the appbar when the appbar is half scrolled?

snap-when the AppBar is half scrolled and content scrolling stopped, this will allow the AppBar to settle either hidden or appear based on the scrolled size of Toolbar.

How to hide and show Toolbar while scrolling in recyclerview?

Add a app:layout_behavior to a RecyclerView or any other View prepared of nested scrolling such as NestedScrollView. By Adding the above property in your XML, you can achieve the ability to hide and showing toolbar while scrolling.

How to scroll off-screen with appbar?

Once content starts scrolling, the app bar will scroll faster than the content until it gets out of the overlapping content view. Once the content reaches top, app bar comes upside of the content and content goes underneath and scrolls smoothly. The whole AppBar can scroll off-screen along with content and can be returned while reverse scrolling.

What are the different types of scrolling behavior in appbars?

App bars contains four main aspects, that plays huge role in scrolling behavior. They are, Example of a status bar, navigation bar, tab/search bar, and flexible space. Image from material.io AppBar scrolling behavior enriches the way contents in a page presented.


1 Answers

Add the snap flag to the scroll flags:

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_scrollFlags="scroll|enterAlways|snap" />

This was just added in Support Library v23.1.0.

like image 174
Daniel Zolnai Avatar answered Sep 30 '22 21:09

Daniel Zolnai