Hide AppBar when scrolling down

Question

I have an AppBar and a horizontal linearlayout (which includes an edit text and two imagebuttons) and other things in my layout. When user scrolls down, I want AppBar(actually, the Toolbar to hide. This is what I have tried, the appbar isn't hiding it just stays there. I followed the Chris Banes Cheesesquare Sample.

Here is the screenshot of my app:

When user scrolls, I want that AppBar/Toolbar to disappear, and that horizontal layout, which includes the edittext, replace the appbar and stayed there.

Can you tell me what I am doing wrong?

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:fitsSystemWindows="true"> 

<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/main_content"
    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="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/my_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:elevation="4dp"
            android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            xmlns:android="http://schemas.android.com/apk/res/android"
            app:layout_scrollFlags="scroll|enterAlways|snap"
            />

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

        <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            tools:showIn="@layout/activity_show" tools:context="com.example.bimpc1.sozluk.GosterActivity"
            android:background="@color/white"
            android:id="@+id/mylin">

        <View
            android:layout_width="fill_parent"
            android:layout_height="30dp">
        </View>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:id="@+id/topLayout"
            android:layout_alignParentTop="true"
            android:paddingLeft="10dp"
            android:paddingRight="10dp">

            <ImageButton
                android:id="@+id/btn_sil"
                android:layout_width="45dp"
                android:layout_height="45dp"
                android:gravity="center"
                android:src="@drawable/delete"
                android:background="@color/white"
                android:paddingRight="10dp"
                android:paddingLeft="10dp"
                android:paddingTop="0dp"
                android:paddingBottom="15dp"
                />

            <EditText
                android:gravity="center"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:id="@+id/et_word"
                android:ems="12"
                android:background="@android:color/transparent"/>

            <ImageButton
                android:id="@+id/btn_getir"
                android:layout_width="45dp"
                android:layout_height="45dp"
                android:gravity="center"
                android:src="@drawable/search"
                android:background="@color/white"
                android:paddingRight="10dp"
                android:paddingLeft="10dp"
                android:paddingTop="0dp"
                android:paddingBottom="15dp"
                />

        </LinearLayout>

        <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:fillViewport="true"
        android:layout_below="@+id/topLayout"
        xmlns:app="http://schemas.android.com/apk/res-auto">
            <!--many views inside scrollview..... -->

        </ScrollView>

</LinearLayout>

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

</android.support.v4.widget.DrawerLayout>

at first check http://stackoverflow.com/questions/16791100/detect-scroll-up-scroll-down-in-listview — IntelliJ Amiya, Feb 03 '16 at 10:06
check this out : https://mzgreen.github.io/2015/02/28/How-to-hideshow-Toolbar-when-list-is-scrolling(part2)/ — Kapil Rajput, Feb 03 '16 at 10:10

ʍѳђઽ૯ท · Accepted Answer · 2016-02-07T11:44:52.950

Actually, that design seems to be wrong.Why? let me explain that to you.

Except those xmlns:android="http://schemas.android.com/apk/res/android" which it wasn't necessary or using: android:layout_alignParentTop="true" in the LinearLayout or using that ScrollView under the contents or etc, seems like you don't have any idea what's going on.(no problem).

Note: the most important thing was, adding:

app:layout_behavior="@string/appbar_scrolling_view_behavior" which also mentioned here:

http://guides.codepath.com/android/Handling-Scrolls-with-CoordinatorLayout

And this flag should hide that section:(exitUntilCollapsed)

app:layout_scrollFlags="scroll|exitUntilCollapsed"

exitUntilCollapsed: When the scroll flag is set, scrolling down will normally cause the entire content to move.

So finally: https://i.stack.imgur.com/qf1So.gif

Hope this is what you were looking for, if it wasn't please edit your question and add some screenshots.

Feel free to change the flags or add a new to achieve what you exactly need.

UPDATE:

If you want to hide that Toolbar(red section) after collapsing, just use this in the CollapsingToolbarLayout:

app:layout_scrollFlags="scroll|snap"

Finally, you will get the same result(something like googleplay design).

Codes:

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/main_content"
        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"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <!-- Your Scrollable contents should be here - such as,
            ViewPager or etc -->

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:scrollbarSize="15sp"
                android:text="You Contents" />

        </android.support.v4.widget.NestedScrollView>

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsingtoolbarly"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                app:contentScrim="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|snap">

                <android.support.v7.widget.Toolbar
                    android:id="@+id/my_toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    android:elevation="4dp"
                    android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
                    app:layout_collapseMode="pin"
                    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="190dp"
                    android:minHeight="190dp"
                    android:scaleType="fitXY"
                    android:src="@drawable/header"
                    app:layout_collapseMode="parallax" />


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

            <LinearLayout
                android:id="@+id/mylin"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <View
                    android:layout_width="fill_parent"
                    android:layout_height="30dp" />

                <LinearLayout
                    android:id="@+id/topLayout"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">

                    <ImageButton
                        android:id="@+id/btn_sil"
                        android:layout_width="45dp"
                        android:layout_height="45dp"
                        android:background="@drawable/ic_arrow_drop_up_black_24dp"
                        android:gravity="center"
                        android:paddingBottom="15dp"
                        android:paddingLeft="10dp"
                        android:paddingRight="10dp"
                        android:paddingTop="0dp" />

                    <EditText
                        android:id="@+id/et_word"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:background="@android:color/transparent"
                        android:ems="12"
                        android:gravity="center" />

                    <ImageButton
                        android:id="@+id/btn_getir"
                        android:layout_width="45dp"
                        android:layout_height="45dp"
                        android:background="@drawable/ic_arrow_drop_up_black_24dp"
                        android:gravity="center"
                        android:paddingBottom="15dp"
                        android:paddingLeft="10dp"
                        android:paddingRight="10dp"
                        android:paddingTop="0dp" />

                </LinearLayout>

            </LinearLayout>

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


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

    <!-- And finally, NavigationView -->

    <!-- <android.support.design.widget.NavigationView
          android:id="@+id/nav_view"
          android:layout_width="wrap_content"
          android:layout_height="match_parent"
          android:layout_gravity="start"
          app:headerLayout="@layout/app_header"
          app:insetForeground="@color/app_color_primary_dark"
          app:menu="@menu/navigation_menu" /> -->

</android.support.v4.widget.DrawerLayout>

Results: after collapsing, the searchedittext won't hide:

UPDATE: New way :)

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/main_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

            <View
                android:layout_width="fill_parent"
                android:layout_height="30dp" />

            <LinearLayout
                android:id="@+id/topLayout"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <ImageButton
                    android:id="@+id/btn_sil"
                    android:layout_width="45dp"
                    android:layout_height="45dp"
                    android:background="@drawable/ic_arrow_drop_up_black_24dp"
                    android:gravity="center"
                    android:paddingBottom="15dp"
                    android:paddingLeft="10dp"
                    android:paddingRight="10dp"
                    android:paddingTop="0dp" />

                <EditText
                    android:id="@+id/et_word"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:background="@android:color/transparent"
                    android:ems="12"
                    android:gravity="center" />

                <ImageButton
                    android:id="@+id/btn_getir"
                    android:layout_width="45dp"
                    android:layout_height="45dp"
                    android:background="@drawable/ic_arrow_drop_up_black_24dp"
                    android:gravity="center"
                    android:paddingBottom="15dp"
                    android:paddingLeft="10dp"
                    android:paddingRight="10dp"
                    android:paddingTop="0dp" />

            </LinearLayout>

        </LinearLayout>

        <android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <!-- Your Scrollable contents should be here - such as,
            ViewPager or etc -->

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:scrollbarSize="15sp"
                android:text="You Contents" />

        </android.support.v4.widget.NestedScrollView>

        <android.support.design.widget.AppBarLayout
            android:id="@+id/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/my_toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:elevation="4dp"
                app:layout_scrollFlags="scroll|enterAlways"
                android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

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


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

    <!-- And finally, NavigationView -->

    <!-- <android.support.design.widget.NavigationView
          android:id="@+id/nav_view"
          android:layout_width="wrap_content"
          android:layout_height="match_parent"
          android:layout_gravity="start"
          app:headerLayout="@layout/app_header"
          app:insetForeground="@color/app_color_primary_dark"
          app:menu="@menu/navigation_menu" /> -->

</android.support.v4.widget.DrawerLayout>

Results:

Thanks, I added the screenshot of my app, I think what I want is something simpler. — jason, Feb 06 '16 at 15:04
@jason - Please check my updated answer, i think i found what exactly you were trying. — ʍѳђઽ૯ท, Feb 06 '16 at 16:01
Thank you for your answer. It worked! Except the appbar title is gone. Thanks. — jason, Feb 07 '16 at 06:35
That's the another problem, you can search about it in this site.you're welcome, also looking forward to your bounty :) goodluck — ʍѳђઽ૯ท, Feb 07 '16 at 06:55
Also, that section is `Toolbar` and check the following link about that problem: http://stackoverflow.com/a/28265266/4409113 — ʍѳђઽ૯ท, Feb 07 '16 at 07:04
Is collapsingtoolbarlayout a must? I think it is the place that hides title — jason, Feb 07 '16 at 07:33
Why is text showing in your example gif? How did you manage that? Thanks. — jason, Feb 07 '16 at 07:48
Which one? That text `your content`? For that toolbar title you need to check your styles and implement the toolbar, just check the above link.if this answer solved your problem, please accept it. — ʍѳђઽ૯ท, Feb 07 '16 at 08:49
@jason - One more thing , i think you can use that without `CollapsingToolbarLayout` too, take a look at this design, i just implemented it by now: paste.ofcode.org/RxSCyXvSw7aen7R4DrLsBP just put the contents in the `AppBarLayout` and see what happens. — ʍѳђઽ૯ท, Feb 07 '16 at 11:20
@LinX64 Could you edit your code in the answer for that? I checked that link but it didn't help — jason, Feb 07 '16 at 11:32
Jason I believe you need to accept @Linx ans since he explained it well, Otherwise post another question. — Enzokie, Feb 07 '16 at 11:32
The UPDATE answer worked for me. I was using scrollView and BottomAppBar but this solution still worked. I replaced ScrollView with NestedScrollView. — bnayagrawal, Oct 05 '18 at 09:12

Madhur · Answer 2 · 2016-02-03T10:12:06.543

check this out you need to set flag for it in CoordinatorLayout and CollapsingToolbar,

  <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.support.v4.widget.NestedScrollView
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             app:layout_behavior="@string/appbar_scrolling_view_behavior">

         <!-- Your scrolling content -->

     </android.support.v4.widget.NestedScrollView>

     <android.support.design.widget.AppBarLayout
             android:layout_height="wrap_content"
             android:layout_width="match_parent">

         <android.support.v7.widget.Toolbar
                 ...
                 app:layout_scrollFlags="scroll|enterAlways"/>

         <android.support.design.widget.TabLayout
                 ...
                 app:layout_scrollFlags="scroll|enterAlways"/>

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

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

http://developer.android.com/reference/android/support/design/widget/AppBarLayout.html

score 4 · Answer 3 · answered Feb 03 '16 at 10:06

I hope that this article will help you: https://guides.codepath.com/android/Handling-Scrolls-with-CoordinatorLayout

Try using CoordinatorLayout and CollapsingToolbar.

<android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginStart="48dp"
        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_scrollFlags="scroll|enterAlways">    
        </android.support.v7.widget.Toolbar>

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

score 3 · Answer 4 · answered Feb 03 '16 at 10:11

You need to structure your layout like this:

<android.support.design.widget.CoordinatorLayout >
    <android.support.design.widget.AppBarLayout >
        <android.support.design.widget.CollapsingToolbarLayout >
            <ImageView />
            <android.support.v7.widget.Toolbar />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    <!-- Your scrollable content here -->
</android.support.design.widget.CoordinatorLayout>

Complete tutorial at: http://blog.grafixartist.com/toolbar-animation-with-android-design-support-library/

score 2 · Answer 5 · 2016-02-05T23:51:14.723

In the Drawer.Layout add in android:fitsSystemWindows="true".

<android.support.v4.widget.DrawerLayout android:id="@+id/drawer_layout"
    .../...
    // add in
    android:fitsSystemWindows="true">

It's better to separate out your concerns. Using the sample provided by chrisbanes/cheesesquare, your layout would be better looking like this:

<android.support.v4.widget.DrawerLayout android:id="@+id/drawer_layout"
    .../...
    // add in
    android:fitsSystemWindows="true">

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

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

    <android.support.v7.widget.Toolbar 
        // Why are you using two themes?
        // android:theme="@style/ThemeOverlay.AppCompat.ActionBar"/>

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

<android.support.v4.view.ViewPager 
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
</android.support.v4.widget.DrawerLayout>

Replace this:

    <LinearLayout .../...>
    <View .../...>
    </View>
    <LinearLayout .../...>
        <ImageButton
            .../...
            />
    </LinearLayout>
    <ScrollView .../...>
    <!--many views inside scrollview..... -->
    </ScrollView>
    </LinearLayout>

With

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

And then use the ViewPager to populate your list.

 ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
    if (viewPager != null) {
        setupViewPager(viewPager);
    }

private void setupViewPager(ViewPager viewPager) {
    Adapter adapter = new Adapter(getSupportFragmentManager());
    adapter.addFragment(new CheeseListFragment(), "Category 1");
    adapter.addFragment(new CheeseListFragment(), "Category 2");
    adapter.addFragment(new CheeseListFragment(), "Category 3");
    viewPager.setAdapter(adapter);
}

Then you can format this CheeseListFragment to add your image views individually.

It's also unnecessary to keep declaring your schema:

xmlns:app="http://schemas.android.com/apk/res-auto"

This is an indicator that you are copying and pasting code and not understanding it.

You should also be using a nestedScrollView without the view, and linear layout above it. Mind you, it's not clear what you are trying to acheive with that.

Thank you for your answer. What I'm trying to achieve is that when you scroll down, the appbar should hide, but that horizontaly linear layout shouldn't hide. That 's all. I don't think I need a viewpager, I just have scroll view. — jason, Feb 06 '16 at 08:08
@jason - Can you take a screenshot of what you are trying to achieve? it is unclear and seems like out of the rules of Material Design though.And your codes has a lot of problem.That `ScrollView`, that `LinearLayout` everything seems to be incorrect. — ʍѳђઽ૯ท, Feb 06 '16 at 09:43
@MsYvette - Yeah, i saw the answers and most of them were correct since the OP said: `When user scrolls down, I want appbar to hide` i thought he/she wants to achieve something like this flag: `scroll|exitUntilCollapsed`.I'm agree tot, But, needs to edit the question because the OP gave it the question a bounty. — ʍѳђઽ૯ท, Feb 06 '16 at 10:34
@MsYvette - `I think the OP needs to wear the bounty. Maybe learn a lesson from it.` Yeah, it's not clear, it's okay, but let's help him/her somehow :) — ʍѳђઽ૯ท, Feb 07 '16 at 11:22
@MsYvette - Right, i agree too, but the question wasn't so clear The OP was trying to do that, All i want to say is, let's help him/her with anyways or something like my answer with clarifying the codes and fixing them :) that's all, Yeah thanks ;) — ʍѳђઽ૯ท, Feb 07 '16 at 11:33

score 1 · Answer 6 · answered Feb 03 '16 at 10:07

1

In order to hide toolbar use the code below.

toolbar.animate().translationY(-toolbar.getBottom()).setInterpolator(new AccelerateInterpolator()).start();

answered Feb 03 '16 at 10:07

Febi M Felix

2,799
1
10
13

score 1 · Answer 7 · answered Jul 19 '17 at 08:13

Try this code: Use layout_scrollFlags like below:

app:layout_scrollFlags="scroll|enterAlways"

and your XML file change like below:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="MainActivity">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        app:layout_scrollFlags="scroll|enterAlways"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay"/>

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed"
        app:tabGravity="fill"/>

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

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

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

this is content_main XML file

<android.support.v4.widget.NestedScrollView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
app:layout_behavior="@string/appbar_scrolling_view_behavior">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


</LinearLayout>

</android.support.v4.widget.NestedScrollView>

Hide AppBar when scrolling down

7 Answers7

Linked