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>

Trahurn

at first check #16791600 – Decanter

check this out : mzgreen.github.io/2015/02/28/… – Haemophilic

Answer 1

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.sstatic.net/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:

Nineveh

Thanks, I added the screenshot of my app, I think what I want is something simpler. – Trahurn

@Trahurn - Please check my updated answer, i think i found what exactly you were trying. – City

Thank you for your answer. It worked! Except the appbar title is gone. Thanks. – Trahurn

That's the another problem, you can search about it in this site.you're welcome, also looking forward to your bounty :) goodluck – City

Also, that section is Toolbar and check the following link about that problem: https://mcmap.net/q/668818/-title-etc-not-showing-in-android-toolbar – City

Is collapsingtoolbarlayout a must? I think it is the place that hides title – Trahurn

Yeah that's the reason why that Toolbar has gone i guess. – City

Why is text showing in your example gif? How did you manage that? Thanks. – Trahurn

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. – City

@Trahurn - 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. – City

@LinX64 Could you edit your code in the answer for that? I checked that link but it didn't help – Trahurn

Jason I believe you need to accept @Linx ans since he explained it well, Otherwise post another question. – Retake

The UPDATE answer worked for me. I was using scrollView and BottomAppBar but this solution still worked. I replaced ScrollView with NestedScrollView. – Briareus

Answer 2

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

Internationale

Answer 3

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>

District

Answer 4

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/

Nexus

Answer 5

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.

Natal

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. – Trahurn

@Trahurn - 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. – City

@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. – City

Thanks, I added a screenshot of my app. – Trahurn

@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 :) – City

@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 ;) – City

Answer 6

In order to hide toolbar use the code below.

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

Horton

Answer 7

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>

Recipience