Hide AppBar while scrolling down

Question

I have an AppBar and a horizontal linearlayout (which includes editing text and two image buttons) and other things in my layout. When the user scrolls down, I want the AppBar (actually, the Toolbar to hide . This is what I tried, the application panel does not hide it, it just stays there. Href = "https://github.com/chrisbanes/cheesesquare" rel = "noreferrer"> Chris Banes Cheesesquare Sample.

Here is a screenshot of my application:

When the user scrolls, I want the AppBar/Toolbar disappear, and this horizontal layout, including edittext, replace the application bar and stay there.

Can you tell me what I'm 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> 

Answer 1

Actually, this design seems wrong. Why? let me explain it to you.

Except for those xmlns:android="http://schemas.android.com/apk/res/android" that were not needed or used: android:layout_alignParentTop="true" in LinearLayout or using this ScrollView under the contents or and etc., it looks like you do not know what is happening. (no problem).

Note: the most important thing by adding:

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

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

And this flag should hide this section: ( exitUntilCollapsed )

 app:layout_scrollFlags="scroll|exitUntilCollapsed" 

exitUntilCollapsed: When the scroll flag is set, scrolling down will usually result in moving all content.

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

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

Feel free to change flags or add new ones to achieve what you need.

---

UPDATE:

If you want to hide this Toolbar (red section) after folding, just use this in 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 folding, lookittext will not 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:

Answer 2

I hope this article helps 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> 

Answer 3

check this, you need to set a 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

Answer 4

You need to structure your layout as follows:

 <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> 

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

Answer 5

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

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

It’s better to highlight your problems. Using the sample provided by chrisbanes / cheesesquare , your layout will look 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 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); } 

You can then format this CheeseListFragment to individually add images.

Also, you do not need to specify your scheme:

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

This is an indicator that you copy and paste the code and do not understand it.

You should also use nestedScrollView with no view and a linear layout above it. Keep in mind that it is not clear what you are trying to achieve with this.

Answer 6

To hide the toolbar, use the code below.

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

Answer 7

Try using this code: Use layout_scrollFlags, as shown below:

Application: layout_scrollFlags = "Spiral | enterAlways"

and your XML file will change as shown 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 the XML file content_main

 <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>