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

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'
// Para cargar imagenes
implementation 'com.github.bumptech.glide:glide:4.12.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.12.0'
  1. Crearemos dos Fragments como en el post anterior
class FirstFragment : Fragment() { ... }
class SecondFragment : Fragment() { ... }
<!-- 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" />
  • postponeEnterTransition: Llamamos este método porque queremos detener la transición del Fragment y reanudarla hasta que la imagen que estamos cargando con Glide este lista. Tomemos en cuenta que esto provoca que el Fragment se congele y la única forma de descongelarlo es usando: startPostponedEnterTransition() o executePendingTransactions()
  • Glide.donAnimate(): Con Glide podemos animar cuando una imagen se coloca en el ImageView, entonces para evitar cualquier tipo de animación como la de un FadeIn por ejemplo, vamos a forzar a que no se anime.
  • listener: Aquí viene una de las partes más importantes, porque aquí es donde Glide nos dice: OK, la imagen ya esta lista y disponible para ser cargada en el ImageView. Entonces cuando Glide nos notifica esto, nosotros mandamos a llamar: startPostponedEnterTransition() Que lograra que el Fragment se descongele y la animación de transición se vea fluida.

--

--

Senior Android & Flutter Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Pablo Reyes

Pablo Reyes

Senior Android & Flutter Developer