[Android][Java]TransitionAnimation 을 이용해 Activity 전환 애니메이션 만들기

액티비티 전환시 특정 뷰를 공유하면서 다음 액티비티를 자연스럽게 실행하는 예제를 구현해 보겠습니다.

결과는 다음과 같습니다.

 

실행 예시

 

전환시킬 두 액티비티를 준비해 줍니다.

 

레이아웃 먼저 설정해 주겠습니다.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:transitionName="transition"
        android:src="@color/purple_500"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
         />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="MainActivity"
        app:layout_constraintBottom_toTopOf="@+id/imageView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

activity_main2.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity2">

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:transitionName="transition"
        android:src="@color/purple_500"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
         />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="MainActivity2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView2" />
</androidx.constraintlayout.widget.ConstraintLayout>

액티비티 전환 시 애니메이션을 주고싶은 두개의 View에

android:transitionName  속성을 추가해 줍니다.

 

이름은 어떤것이든 상관 없지만 변화를 주고싶은 View 들끼린 속성의 이름이 같아야 합니다. 
예제에선 "transition" 으로 설정해 주었습니다.

 

각각의 액티비티의 imageView ,imageView2 에 동일하게 android:transitionName = "transition" 으로 입력되어 있는것을 확인할 수 있습니다.

 

다음은 액티비티 코드 입니다.

이미지 뷰에 클릭이벤트를 작성해 주었고

클릭 시 액티비티 전환을 위해 다음과 같이 작성 하였습니다.

 

imageview.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {

        Intent mIntent = new Intent(getApplicationContext(), MainActivity2.class);
        Pair[] pairs = new Pair[1];
        pairs[0] = new Pair<View, String>(imageview,"transition");

        ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(MainActivity.this, pairs);
        startActivity(mIntent, options.toBundle());

    }
});

Intent는 이동을 원하는 액티비티의 경로를 지정해 주시면 되고 

Pair 배열을 생성하여 전환 효과를 주기 위한 View 정보와 레이아웃 작성시 설정 해 둔 transitionName 의 값을 입력해 줍니다.(예제상 "transition" 입니다.)

 

ActivityOptions.makeSceneTransitionAvimation() 함수를 선언합니다. 파라미터로 전환이 시작될 위치의 액티비티 값과 이전에 선언해 둔 pair을 입력해 줍니다.

 

이후 앞서 선언해둔 Intent 와 ActivityOptions 객체의 번들을   startActivity 파라미터로 전달해 줍니다.

 

다음은 전체 코드입니다.

 

MainActivity

package com.example.transitionanimationex;
import android.app.ActivityOptions;
import android.content.Intent;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.util.Pair;
import android.view.View;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

    ImageView imageview;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        imageview = findViewById(R.id.imageView);
        imageview.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                Intent mIntent = new Intent(getApplicationContext(), MainActivity2.class);
                Pair[] pairs = new Pair[1];
                pairs[0] = new Pair<View, String>(imageview,"transition");

                ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(MainActivity.this, pairs);
                startActivity(mIntent, options.toBundle());

            }
        });


    }
}

 

MainActivity2

 

public class MainActivity2 extends AppCompatActivity {

    ImageView imageview2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);

        imageview2 = findViewById(R.id.imageView2);

        imageview2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

            onBackPressed();

            }
        });
    }
}

MainActivity2 의 경우 이미지 클릭 시 onBackPressed 를 호출하여 주었습니다.

finish() 로 처리할 경우 애니메이션이 실행없이 이전 액티비티를 보여주게 됩니다. 

 

ImageView이외에 다양한 뷰에서도 적용이 가능하니 필요에 따라 

자연스러운 액티비티 전환을 원할때 사용해보면 좋을 듯 합니다.