[Android Studio] Animation을 이용해 커스텀 로딩 창(Custom Dialog) 만들기

저번에 Animation의 종류와 사용 방법에 대해 알아보았습니다. 이번엔 이를 응용해 특정 요청 시 나타나는 로딩 창을 만들어보겠습니다.

---

 

로딩창이란 주로 무언가 명령을 내리고 기다릴 때 나타납니다.

 

무언갈 검색하고 기다리는 동안 로딩창 없이 아무런 반응이 없다면 실행이 되고 있는건지, 아닌건지 헷갈리겠죠?

 

 

몇몇 앱을 보면 재미있는 애니메이션으로 기다리는 시간을 지루하지 않게 해줍니다. 기본 로딩창 외에 직접 애니메이션을 만들어 적용한다면 더 퀄리티 높은 앱을 완성할 수 있을 것입니다.

 

 

거두절미하고 바로 코드부터 알아보겠습니다.

 

 

 

1. custom_loading_dialog.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"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent">
        <ImageView
            android:id="@+id/loading_img"
            android:layout_margin="20dp"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:src="@drawable/icon_arrow_under"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:layout_gravity="center_vertical"
            android:text="로딩중입니다"/>
        <ImageView
            android:id="@+id/loading_img2"
            android:layout_margin="20dp"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:src="@drawable/icon_arrow_under"/>
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

 

 

2. CustomLoadingDialog.kt

import android.app.Dialog
import android.content.Context
import android.os.Bundle
import android.view.animation.Animation
import android.view.animation.AnimationUtils
import kotlinx.android.synthetic.main.custom_loading_dialog.*

class CustomLoadingDialog(context: Context):Dialog(context) {

    lateinit var turnHorizontal : Animation
    lateinit var turnAround : Animation

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.custom_loading_dialog)

        turnHorizontal = AnimationUtils.loadAnimation(context, R.anim.turn_horizontal)
        turnAround = AnimationUtils.loadAnimation(context, R.anim.turn_around)

        loading_img.startAnimation(turnHorizontal)
        loading_img2.startAnimation(turnAround)
    }
}

Dialog를 상속받은 CustomLoadingDialog 클래스입니다. Dialog 실행 시 turnHorizontal, turnAround 애니메이션을 실행하는 코드가 담겨있습니다.

turnHorizontal은 지난 포스팅에서 다룬 turn_horizontal.xml 을 그대로 사용했습니다. 

 

 

3. turn_around.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="2000"
        android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="infinite"
        android:repeatMode="restart"/>
</set>

• rotate : 회전 효과
• duration : 해당 애니메이션을 몇초에 걸쳐 진행할 것인지. 위 예제에서는 2초에 걸쳐 회전
• fromDegrees, toDegrees : 회전하는 각도
• pivotX, pivotY : 회전축. 애니메이션을 걸 이미지의 중심을 축으로 해서 회전
• repeatCount = "infinite" : 반복 횟수 무제한
• repeatMode : 한번의 회전이 끝난 후 실행할 모드. restart와 reverse가 있으며, restart는 정방향으로 계속 진행하고 reverse는 역방향으로 진행

 

 

4. MainActiivty.kt

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        custom_loading_btn.setOnClickListener {
            val loadingAnimDialog = CustomLoadingDialog(this)
            loadingAnimDialog.show()
            Handler().postDelayed({
                loadingAnimDialog.dismiss()
            }, 5000)
        }
    }
}

• 로딩 버튼을 누르면 CustomLoadingDialog의 객체를 생성해 .show() 메소드를 불러 실행합니다.
• Handler().postDelayed( { } , 5000 ) : 중괄호 안의 코드를 5초 후에 실행 ( 5초 후에 dialog 종료 )

 

 

 

 

보시다시피 필요한 코드는 많지 않습니다. Dialog를 실행할 시점과, 종료할 시점을 정확히 판단하여 설정해 주시는 것이 중요하다 여겨집니다.

 

 

 

실행영상

좌측 아이콘이 지난 포스팅에서 다룬 turn_horizontal이며 우측 아이콘이 이번 포스팅에서 다룬 turn_around입니다.