Agregar vistas debajo de la barra de herramientas en CoordinatorLayout


176

Tengo el siguiente diseño:

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_content"
    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.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.ActionBar">

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

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

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

Añado Fragments en el FrameLayout, reemplazándolos. Uno de mis Fragments es una lista, que tiene el siguiente diseño:

<android.support.v7.widget.RecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

Mi problema aquí es que la barra de herramientas se dibuja sobre la lista . Traté de resolver eso envolviendo el contenido del CoordinatorLayouten un LinearLayout, que resolvió el sobregiro, pero de esa manera el comportamiento de desplazamiento de la barra de aplicaciones ya no funciona.

¡Cualquier ayuda es muy apreciada!

Respuestas:


355

Toma el atributo

app:layout_behavior="@string/appbar_scrolling_view_behavior"

fuera RecyclerViewy póngalo en el FrameLayoutque está tratando de mostrar debajo de Toolbar.

Descubrí que una cosa importante que hace el comportamiento de la vista de desplazamiento es diseñar el componente debajo de la barra de herramientas. Debido a que FrameLayouttiene un descendiente que se desplazará ( RecyclerView), CoordinatorLayoutobtendrá esos eventos de desplazamiento para mover el Toolbar.


Otra cosa a tener en cuenta: ese comportamiento de diseño hará que la FrameLayoutaltura se dimensione como si ya estuviera Toolbardesplazada , y con la Toolbarvisualización completa, toda la vista simplemente se empuja hacia abajo para que la parte inferior de la vista esté debajo de la parte inferior del CoordinatorLayout.

Esta fue una sorpresa para mi. Esperaba que la vista cambiara de tamaño dinámicamente a medida que la barra de herramientas se desplaza hacia arriba y hacia abajo. Entonces, si tiene un componente de desplazamiento con un componente fijo en la parte inferior de su vista, no verá ese componente inferior hasta que haya desplazado completamente el Toolbar.

Entonces, cuando quería anclar un botón en la parte inferior de la interfaz de usuario, solucioné este problema colocando el botón en la parte inferior de CoordinatorLayout( android:layout_gravity="bottom") y agregando un margen inferior igual a la altura del botón a la vista debajo de la barra de herramientas.


1
Muchas gracias, esto realmente funciona! Mi único problema después de eso si la barra de herramientas se movió, no volvió después de reemplazar el Fragmentcontenido con una lista por otra Fragment. Logré mostrar manualmente la barra de herramientas de esta manera.
WonderCsabo

Guau. Siempre pensé que el diseño de Fragment reemplazaba completamente el "marcador de posición" FrameLayout, pero veo que ese no es el caso en absoluto. Gracias por esta respuesta! Me ayudó mucho.
Aspirante a Dev

@Surendar D, compruebe esto si puede stackoverflow.com/questions/42968587/…
Mohamed Rihan

Agradable. ¡Gracias!
Razvan

86

Logré arreglar esto agregando:

android: layout_marginTop = "? android: attr / actionBarSize"

al FrameLayout así:

 <FrameLayout
        android:id="@+id/content"
        android:layout_marginTop="?android:attr/actionBarSize"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
       />

9
En lugar de agregar marginTop, agregue la aplicación: layout_behavior = "@ string / appbar_scrolling_view_behavior"
Naveed Ahmad

3
Solución perfecta cuando @ string / appbar_scrolling_view_behavior no está disponible
Julius

Por favor, useandroid:layout_marginTop="?android:attr/actionBarSize"
Martin Pfeffer

66
Esto es un poco hacky, agregando un margen de cuál podría ser el tamaño (suponiendo que siempre tenga una barra de herramientas de ese tamaño) se romperá en algún momento
Kenny

0

A partir de Android Studio 3.4, debe poner esta línea en su diseño que contiene el RecyclerView.

app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior"

0

Para usar la barra de herramientas superior plegable o usar ScrollFlags de su elección, podemos hacer lo siguiente: desde Diseño de materiales, elimine FrameLayout

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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">

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleGravity="top"
            app:layout_scrollFlags="scroll|enterAlways">


        <androidx.appcompat.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin">

            <ImageView
                android:id="@+id/ic_back"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_arrow_back" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="back"
                android:textSize="16sp"
                android:textStyle="bold" />

        </androidx.appcompat.widget.Toolbar>


        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/post_details_recycler"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:padding="5dp"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.