DEV Community

shogo.yamada
shogo.yamada

Posted on

3 1

How to create Material animation for ListView in Android

Preview

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"/>
Enter fullscreen mode Exit fullscreen mode

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"
            />
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started