This animation is Material Transitions.
https://material.io/design/navigation/navigation-transitions.html#hierarchical-transitions
Create this animation with Kotlin.
Setting transition name
Create transition name to xml files.
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:id="@+id/profile_url"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintVertical_bias="0.32"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="8dp"
android:transitionName="profileUrl"
app:layout_constraintStart_toStartOf="parent"
android:scaleType="fitXY"
android:layout_marginStart="8dp"/>
Set android:transitionName="profileUrl"
to the part where make to animate the view.
And Make the same setting for the transition destination view.
<ImageView
android:layout_width="383dp"
android:layout_height="185dp"
tools:srcCompat="@tools:sample/avatars"
android:id="@+id/material_image"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:transitionName="profileUrl"
android:scaleType="fitXY"
/>
Screen transitions implementation in Android applications with Kotlin
Before transition screen code
Glide.with(context).load(userModel.profileUrl).into(profileUrl)
val intent = ListViewDetailActivity.createIntent(requireActivity(), userModel.profileUrl)
val viewPair = Pair(p0.profileUrl as View, ViewCompat.getTransitionName(p0.profileUrl))
val activityCompatOption = ActivityOptionsCompat.makeSceneTransitionAnimation(requireActivity(), viewPair)
ActivityCompat.startActivity(requireContext(), intent, activityCompatOption.toBundle())
After transition screen code
class ListViewDetailActivity : AppCompatActivity() {
companion object {
fun createIntent(activity: Activity, url: String) : Intent {
val intent = Intent(activity, ListViewDetailActivity::class.java)
intent.putExtra("url", url)
return intent
}
}
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_list_view_detail)
val intent = intent
val url = intent.getStringExtra("url")
Glide.with(this).load(url).into(material_image)
}
}
Top comments (0)