How to create Material animation for ListView in Android

shogo.yamada — Fri, 09 Nov 2018 07:54:33 +0000

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)
    }
}

DEV Community: shogo.yamada

How to create Material animation for ListView in Android

Setting transition name

Screen transitions implementation in Android applications with Kotlin

　Screen transitions implementation in Android applications with Kotlin