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

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() { ... }
<!-- 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" />
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
Cuando te pida importar el TransitionInflater recuerda siempre importar el de androidx, en otras palabras import androidx.transition.TransitionInflater

--

--

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