Publicado en Android

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

Publicado en Android

Añadir una Toolbar a la app Android usando Kotlin y AndroidX


Funcionalidad ir hacia atrás

Para añadir la función de ir hacia atrás y aparezca la flechita en la barra de herrramientas de la app (Toolbar) se debe habilitar con la función setDisplayHomeAsUpEnabled()

import kotlinx.android.synthetic.main.activity_main.*
...
setSupportActionBar(toolbar)
supportActionBar?.setDisplayHomeAsUpEnabled(true)

Interceptar la pulsación del botón atrás

Para interceptar la pulsación del botón atrás desde la toolbar de la aplicación se hace en el evento onOptionsItemSelected

override fun onOptionsItemSelected(item: MenuItem): Boolean {
    return when (item.itemId) {
        android.R.id.home -> {
            onBackPressed()
            return true
        }
    }
}

Personalización

Modificar el icono

Se puede personalizar el botón ir hacia atrás de la barra de herramientas, una de ellas es cambiar el icono, se realiza con la función

setSupportActionBar(toolbar)
toolbar.setNavigationIcon(R.drawable.ic_close_24dp)

Para que sea compatible con el modo oscuro el icono se debe modificar para que adopte el color del control normal

<vector
    android:tint="?attr/colorControlNormal">

Añadir funcionalidad pulsar 2 veces para salir

A veces es necesario implementar dos pasos para salir de la app, el famoso Press again to exit, para ello debemos obtener cuando se realizo la acción ir hacia atrás y si en un determinado tiempo se vuelve a producir que procede a salir de la app o bien mostrar el mensaje de que es necesario pulsar otra vez para salir

class MainActivity : AppCompatActivity() {

    var lastClickTime = 0L

...
override fun onBackPressed() {
    if (lastClickTime.plus(2000L) > System.currentTimeMillis()) {
        super.onBackPressed()
    } else {
        Toast.makeText(this, getText(R.string.press_again_exit), Toast.LENGTH_SHORT).show()
        lastClickTime = System.currentTimeMillis()
    }
}