Animación de barra de herramientas con AndroidX


Demostración de los diferentes tipos de desplazamiento (scroll) de la barra de herramientas en vistas de android.

Para animar la barra de herramientas se hace con la propiedad app:layout_scrollFlags y puede tener los siguientes valores y también combinados usando el carácter | como separador

Scroll

Con está bandera, al realizar un desplazamiento hacia arriba para mostrar más contenido, la barra de herramienta se ocultará, volverá a aparecer justo cuando volvemos al inicio del contenido

Código de ejemplo

<com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="?actionBarTheme">

    <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll"
            app:popupTheme="?actionBarPopupTheme" />

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

EnterAlways

Con esa bandera al realizar un desplazamiento de mostrar más contenido se ocultará la barra de herramientas y volverá aparecer cuando se haga el desplazamiento inverso

Código de ejemplo

<com.google.android.material.appbar.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="?actionBarTheme">

<androidx.appcompat.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="?actionBarPopupTheme" />

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

Snap

Esta bandera proporciona un comportamiento de desplazamiento «pegajoso». Según cuando hacemos scroll y la parte visible sea suficiente se mostrará la barra de herramientas al completo, como un efecto imantado.

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

    <androidx.appcompat.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|snap"
            app:popupTheme="?actionBarPopupTheme" />

    <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabTextColor="?attr/actionMenuTextColor"
            android:background="?attr/colorPrimary" />
</com.google.android.material.appbar.AppBarLayout>

EnterAlwaysCollapsed

Se debe usar con combinación con la bandera enterAlways y sobre un CollapsingToolbarLayout , al hacer desplzamiento inverso se mostrará la barra de herramientas en su tamaño mínimo (Collapsed) y si nos deslizamos al inicio del contenido se expenderá .

app:layout_scrollFlags=»scroll|enterAlways|enterAlwaysCollapsed»

Más documentación

Apuntes basados del articulo AppBarLayout scroll behavior with layout_scrollFlags

Anuncio publicitario

Publicado por Codelaby

Mobile DevDesigner

Deja una respuesta

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Salir /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Salir /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Salir /  Cambiar )

Conectando a %s

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

A %d blogueros les gusta esto: