[Android Kotlin] RecyclerView Animation Transition 구현하기

RecyclerView의 아이템을 클릭할 때 좀 더 자연스러운 화면전환이 하고 싶어서 찾아보다가 알게 된 것을 정리해 보려고 한다. 아이템의 정보가 다음 Activity에 연결되듯이 전환되는 Animation Transition이다. 결과물은 아래처럼 나온다.

1. style item 추가하기 

Animation Tranition 을 적용하기 위해서 앱 테마에 해당하는 style에 item을 추가. 

<item name="android:windowContentTransitions">true</item>

적용한 코드 

<style name="Theme.IntoDig" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->

        <!--BottomSheet-->
        <item name="bottomSheetDialogTheme">@style/CustomBottomSheetDialogTheme</item>
        
        <!--transition-->
        <item name="android:windowContentTransitions">true</item>
    </style>

 

2. transitionName 옵션 추가

- 아이템을 눌러서 전환 될 화면의 xml로 가서 아이템의 정보가 이어져서 보여졌으면 하는 뷰에 transitionName옵션 추가.

나는 아이템 제목 -> 다음화면의 제목으로 이어지길 원해서 제목을 띄울 TextView에 적용했다. 이름은 template_topic이라고 함.

activity_template_data_page.xml

android:transitionName="template_topic"

적용한 코드 

<TextView
    android:id="@+id/tv_template_data_topic"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:transitionName="template_topic"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/appBarLayout" />

- RecyclerView의 item layout으로 가서 아이템 제목을 반영하는 TextView에서 같은 이름을 적어준다. 꼭 같은 이름 쓰기!

item_template.xml

<TextView
            android:id="@+id/tv_template_topic"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="4dp"
            android:textSize="20sp"
            android:transitionName="template_topic"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

 

 3. AcitivityOptions.makeScenceTransitonAnimation() 적용

item을 클릭해서 다음 화면으로 넘어가는 것이기 때문에 Adapter클래스에서 구현했다.(Viewbinding이 적용된 코드임)

 

- android.util.Pair를 import해서 Pair를 생성

 transitionName이 적용된 뷰와 transitionName을 적어주자(전환 전 화면의 transitionName이 적용된 뷰)

import android.util.Pair

//View자리에 아이템 제목을 반영하는 TextView을 넣어줌 
val Pair1 = Pair<View,String>(holder.tvTemplateTopic,"template_topic")

- ActivityOptions.makeSceneTransitionAnimation() 를 이용해서 AcitivyOptions 객체 생성

매개변수로 Activity와 위에서 만든 Pair를 넣어준다. 

 var options : ActivityOptions = ActivityOptions.makeSceneTransitionAnimation(context as Activity?,Pair1)

- Intent에  Bundle로 전달

startActivity(context,intent,options.toBundle())

적용 코드 - onBindViewHolder에 작성함

override fun onBindViewHolder(holder: ItemViewHolder, position: Int) {
        val item = templateData[position]
        holder.onBind(context, item)

        holder.itemView.setOnClickListener {
            val intent = Intent(context, TemplateDataPage::class.java)
            Log.i("템플릿고유아이디 확인", item.templateId.toString())
            intent.putExtra("templateId", item.templateId)
            intent.putExtra("templateTopic", item.topic)

            //transition
            val Pair1 = Pair<View,String>(holder.tvTemplateTopic,"template_topic")
            var options : ActivityOptions = ActivityOptions.makeSceneTransitionAnimation(context as Activity?,Pair1)
            startActivity(context,intent,options.toBundle())
        }
    }

 

4. 전환되어 보여질 페이지에서 값 받아서 적용

나는 값이 전달되는 형태로 진행해서 Intent로 넘긴 값을 transitionName을 정해준 TextView에 반영해줌. 굳이 이렇게 안해도 가능함. 이전 페이지랑 같은 값만 있으면 됨. (Viewbinding 적용된 코드)

        templateId = intent.getIntExtra("templateId",0)
        templateTopic = intent.getStringExtra("templateTopic").toString()

        Log.i("받은 템플릿 고유아이디 확인", templateId.toString())

        binding.tvTemplateDataTopic.text = templateTopic