[안드로이드 코틀린] 애니메이션 적용해서 배터리 충전하는 방법

이번 시간에는 애니메이션(Animation)과 이미지를 이용해서 배터리 충전하는 모습을 보여주는 방법을 알아보겠습니다.

---

목차

1. 실행 화면
2. 애니메이션 battery_animation.xml
3. 메인 화면 activity_main.xml
4. 메인 코드 MainActivity.kt

---

1. 실행 화면

 

2. 애니메이션 battery_animation.xml

 res -> drawable -> 마우스 오른쪽 -> New -> Drawable Resource File

 - 설명 -

 1. animation-list 태그에 아이템(이미지)를 만든다. 

 2. duration: 지속 시간(1000 = 1초)

 3. 이미지 res -> drawable

ic_battery_full.xml

0.00MB

ic_battery_4.xml

0.00MB

ic_battery_2.xml

0.00MB

ic_battery_0.xml

0.00MB

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/ic_battery_0"
        android:duration="500"/>
    <item
        android:drawable="@drawable/ic_battery_2"
        android:duration="500"/>
    <item
        android:drawable="@drawable/ic_battery_4"
        android:duration="500"/>
    <item
        android:drawable="@drawable/ic_battery_full"
        android:duration="500"/>
</animation-list>

 

3. 메인 화면 activity_main.xml

- 설명 -

 1.  배터리 충전을 보여줄 ImageView

 2.  애니메이션 시작 기능 Button

 3. 애니메이션 정지 기능 Button

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:id="@+id/rootView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    tools:context=".MainActivity">


    <ImageView
        android:id="@+id/batteryImage"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:src="@drawable/ic_battery_0"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/startBtn"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:layout_weight="1"
            android:text="시작"
            android:textSize="25sp" />


        <Button
            android:id="@+id/stopBtn"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:layout_weight="1"
            android:text="정지"
            android:textSize="25sp" />
    </LinearLayout>
</LinearLayout>

 

4. 메인 코드 MainActivity.kt

- 설명 -

 1.  AnimationDrawable

  Drawable 개체로 정의된 프레임별 애니메이션을 만드는 데 사용되는 개체

 2.  batteryAnimation = batteryImage.background as AnimationDrawable

   애니메이션 적용

 3.  batteryAnimation.start()

   애니메이션 시작

 4. batteryAnimation.stop()

   애니메이션 정지

class MainActivity : AppCompatActivity() {

    lateinit var batteryAnimation: AnimationDrawable

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

        val batteryImage: ImageView = findViewById(R.id.batteryImage)

        //이미지 설정
        batteryImage.setBackgroundResource(R.drawable.battery_animation)

        //애니메이션 초기화
        batteryAnimation = batteryImage.background as AnimationDrawable

        //시작 버튼
        val startBtn: Button = findViewById(R.id.startBtn)
        startBtn.setOnClickListener {

            //시작
            batteryAnimation.start()
        }

        //정지 버튼
        val stopBtn: Button = findViewById(R.id.stopBtn)
        stopBtn.setOnClickListener {

            //정지
            batteryAnimation.stop()
        }
    }

    /**
     * 앱 실행 시 호출되는 함수
     */
    override fun onStart() {
        super.onStart()
        batteryAnimation.start()
    }
}

2022.09.05 - [안드로이드] - [안드로이드 코틀린] 애니메이션 적용해서 주사위 던지는 방법

[안드로이드 코틀린] 애니메이션 적용해서 주사위 던지는 방법

2022.09.01 - [안드로이드] - [안드로이드 코틀린] 숫자 맞추기 게임 Up&Down 만드는 방법

[안드로이드 코틀린] 숫자 맞추기 게임 Up&Down 만드는 방법

2022.08.25 - [안드로이드] - [안드로이드 코틀린] 동적 메뉴(ActionMode) 만드는 방법

[안드로이드 코틀린] 동적 메뉴(ActionMode) 만드는 방법