Ocultar la barra de aplicaciones al desplazarse hacia abajo

Tengo un AppBar y un lineal lineal horizontal (que incluye un texto de edición y dos imagebuttons) y otras cosas en mi diseño. Cuando el usuario se desplaza hacia abajo, quiero AppBar (en realidad, la Toolbar de Toolbar para ocultar Esto es lo que he intentado, la appbar no es ocultar sólo se queda allí. Seguí el ejemplo de Chris Banes Cheesesquare .

Esta es la captura de pantalla de mi aplicación:

Introduzca aquí la descripción de la imagen

Cuando el usuario se desplaza, quiero que AppBar/Toolbar de AppBar/Toolbar para desaparecer, y que el diseño horizontal, que incluye el edittext, reemplazar la appbar y se quedó allí.

¿Puedes decirme qué estoy haciendo mal?

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

En realidad, ese diseño parece estar equivocado.¿Por qué? Déjame explicarte eso

Excepto los xmlns:android="http://schemas.android.com/apk/res/android" que no era necesario o usando: android:layout_alignParentTop="true" en el LinearLayout o usando ese ScrollView bajo el contenido o Etc, parece que no tienes ni idea de lo que está pasando. (No hay problema).

Nota: lo más importante fue, agregando:

app:layout_behavior="@string/appbar_scrolling_view_behavior" que también se menciona aquí:

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

Y esta bandera debe ocultar esa sección 🙁 exitUntilCollapsed )

 app:layout_scrollFlags="scroll|exitUntilCollapsed"

exitUntilCollapsed: Cuando se establece el indicador de desplazamiento, el desplazamiento hacia abajo normalmente hará que se mueva todo el contenido.

Así que finalmente: http://i.stack.imgur.com/qf1So.gif

Espero que esto es lo que estabas buscando, si no fue por favor edita tu pregunta y añade algunas capturas de pantalla.

No dude en cambiar las banderas o añadir un nuevo para lograr lo que usted necesita exactamente.

ACTUALIZAR:

Si desea ocultar la Toolbar (sección roja) después de colapsar, utilice esta CollapsingToolbarLayout en el CollapsingToolbarLayout :

 app:layout_scrollFlags="scroll|snap"

Por último, obtendrá el mismo resultado (algo como el diseño de googleplay).

Códigos:

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

Resultados: después de colapsar, el texto buscado no ocultará:

Introduzca aquí la descripción de la imagen

ACTUALIZACIÓN: 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>

Resultados:

Introduzca aquí la descripción de la imagen

Espero que este artículo le ayude: https://guides.codepath.com/android/Handling-Scrolls-with-CoordinatorLayout

Intente usar CoordinatorLayout y 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>

Usted necesita estructurar su disposición como esto:

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

Tutorial completo en: http://blog.grafixartist.com/toolbar-animation-with-android-design-support-library/

Compruebe esto que necesita para establecer la bandera para que en CoordinatorLayout y 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

En el Drawer.Layout añadir en android:fitsSystemWindows="true" .

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

Es mejor separar sus preocupaciones. Utilizando la muestra proporcionada por chrisbanes / cheesesquare , su diseño sería mejor parecido a esto:

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

Reemplazar esto:

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

Con

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

A continuación, utilice ViewPager para rellenar su lista.

  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); }

A continuación, puede formatear este CheeseListFragment para agregar sus vistas de imagen de forma individual.

También es innecesario mantener declarando su esquema:

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

Este es un indicador de que está copiando y pegando código y no lo entiende.

También debe estar usando un nestedScrollView sin la vista, y el diseño lineal por encima de él. Mente usted, no está claro lo que está tratando de lograr con eso.

Para ocultar la barra de herramientas, utilice el siguiente código.

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

Pruebe este código: Use layout_scrollFlags como a continuación:

App: layout_scrollFlags = "scroll | enterAlways"

Y su archivo XML cambiar como a continuación:

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

Este es el archivo XML 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>