[Android] 바(Bar) 프로그레스 애니메이션

#Bar Progress Animation (with gradient)

간단한 Bar 프로그레스 Animation에 대해 알아보겠습니다.

애니메이션은 여러가지 방법으로 만들 수 있지만, 이 글에서는 'Animation' 클래스를 상속 구현 한 법으로 소개합니다.

 

1. xml에서 Android.widget.ProgressBar를 작성

2. 필요 시 progressDrawable을 작성(그라데이션이 필요하거나 꾸미려면...)

3. Animation 클래스를 상속 후, applyTranformaion을 override 해서 ProgressBar의 pregress를 업데이트

 

 

#1 - xml에 ProgressBar 작성

<ProgressBar
    android:id="@+id/progress_bar"
    style="@android:style/Widget.ProgressBar.Horizontal"
    android:layout_width="match_parent"
    android:layout_height="25dp"
    android:layout_marginTop="100dp"
    android:max="100"
    android:progressDrawable="@drawable/progress_drawable"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

 

#2 -progressDarwable 작성

오른쪽 top/down 코너만 Radius를 설정했습니다

필요에 맞게 사용하시면 되겠습니다

 

<progress_drwable.xml>

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!--프로그레스 배경 필요 시 사용-->
    <!--<item android:id="@android:id/background">
        <shape>
            <corners android:radius="50dp"/>
            <solid android:color="@color/track_color"/>
        </shape>
    </item>-->

    <item
        android:id="@android:id/progress"
        android:bottom="1dp"
        android:left="1dp"
        android:right="1dp"
        android:top="1dp">
        <scale android:scaleWidth="100%">
            <shape>
                <corners
                    android:bottomRightRadius="50dp"
                    android:topRightRadius="50dp" />
                <gradient
                    android:endColor="#1e8f3b"
                    android:startColor="#d0f7da" />
            </shape>
        </scale>
    </item>
</layer-list>

 

#3 -Animation클래스의 applyTransformation 구현

class AnimateProgressBar(
    private var progressBar: ProgressBar,
    private var from: Float,
    private var to: Float
) : Animation() {
    override fun applyTransformation(interpolatedTime: Float, t: Transformation?) {
        super.applyTransformation(interpolatedTime, t)
        val value = from + (to - from) * interpolatedTime
        progressBar.progress = value.toInt()
    }
}

 

그리고 실제 애니메이션은 View(프로그레스바).startAnimation(애니메이션) 으로 시작됩니다

이 때 애니메이션에 applyTransformation을 상속 구현한 클래스를(AnimateProgressBar) 사용합니다

duration도 설정 합니다.

private fun animateProgressBar() {
    val progressBar = findViewById<ProgressBar>(R.id.progress_bar)
    val anim = AnimateProgressBar(progressBar, 0f,90f)
    anim.duration =2000
    progressBar.startAnimation(anim)
}

 

---

 

잘못된 내용이나 궁금한 내용 있으시면 댓글 달아주세요

좋은 하루 되세요!