Animar Imagen con vista Master-Detail (Shared Element + Navigation Component) — Parte #1

Agregar animaciones a nuestra aplicación siempre resulta en un gran plus para nuestra app 🙌 , hace que estas se vean más llamativas y profesionales 😎.

Comencemos con lo básico:

Para lograr esta transición junto con el Jetpack Navigation Component necesitamos agregar las dependencias:

implementation 'androidx.navigation:navigation-fragment-ktx:2.3.2'
implementation 'androidx.navigation:navigation-ui-ktx:2.3.2'
// Necesario para las transiciones
implementation 'com.google.android.material:material:1.2.1'

1. Crearemos dos Fragments donde, el primero tendrá la imagen en pequeño y el segundo la imagen en grande.

class FirstFragment : Fragment() { ... }
class SecondFragment : Fragment() { ... }

2. Luego estos dos fragments llevaran un ImageView, cada uno llevara la imagen que queremos mostrar, y agregaremos el atributo mas importante para hacer que funcione el Shared Element:— — — android:transitionName=”sharedElement”

<!-- Este ImageView esta adentro de un ConstraintLayout -->
<!-- Fragment #1 -->
<ImageView
    android:id="@+id/imageView"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:scaleType="centerCrop"
    android:src="@drawable/image"
    android:transitionName="sharedElement"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />
<!-- Fragment #2 -->
<ImageView
    android:id="@+id/imageView"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:scaleType="centerCrop"
    android:src="@drawable/image"
    android:transitionName="sharedElement"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

El nombre “sharedElement” que usamos aquí es solo de ejemplo, le puedes poner lo que quieras. Por ejemplo: “myProfileTransition”, “imageTr”, etc.

3. Teniendo ya establecido el transitionName ahora hay que definir que animación queremos hacer para la transición

Crearemos un archivo para la transición

Colocamos el nombre del archivo y el tipo de resource que es

Copiaremos y pegaremos esto en el nuevo archivo creado

4. Ahora necesitamos decirle al Fragment #1 que cuando se presione la imagen #1 se ejecute la transición al Fragment #2 y navegue utilizando el Navigation Component

Cuando te pida importar el TransitionInflater recuerda siempre importar el de androidx, en otras palabras import androidx.transition.TransitionInflater

Es importante que utilices el mismo nombre del transitionName tanto en el xml como en el código. En este caso usamos el nombre “sharedElement”, si no utilizas el mismo nombre la animación fallara o dará un error.

Puedes ver más a detalle el código en el siguiente repositorio

pablopantaleon/sharedelement_navcomponentmed02

Segunda Parte — Integración con Glide

Animar Imagen con vista Master-Detail y Glide (Shared Element + Navigation Component) — Parte #2