이 튜토리얼에서는 Kotlin을 활용해 Android 앱에서 원형 커스텀 진행률 표시줄(Circular Custom Progress Bar)을 구현하는 방법을 단계별로 살펴봅니다. 기본 제공되는 ProgressBar의 모양을 커스텀 드로어블(Drawable)로 교체하고, 백그라운드 스레드와 Handler를 이용해 진행 상태를 실시간으로 갱신하는 과정까지 함께 다룹니다.
Step 1 — 새 프로젝트 생성
Android Studio에서 File → New Project를 선택한 뒤, 필요한 정보를 모두 입력하여 새 프로젝트를 생성합니다. 언어는 Kotlin으로 설정하는 것을 잊지 마세요.
Step 2 — 레이아웃 작성 (res/layout/activity_main.xml)
레이아웃 파일에 아래와 같이 중앙 정렬된 TextView를 추가합니다. 이 TextView는 진행률을 백분율(%)로 화면 가운데에 표시하는 역할을 합니다.
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_marginTop="50dp" android:text="Tutorials Point" android:textAlignment="center" android:textColor="@android:color/holo_green_dark" android:textSize="32sp" android:textStyle="bold" />
원형 진행률 표시줄이 정상적으로 동작하려면 레이아웃에 circularProgressbar라는 ID를 가진 ProgressBar도 함께 배치하고, res/drawable/circularprogressbar.xml과 같은 커스텀 드로어블 리소스를 미리 준비해 두어야 합니다.
Step 3 — 메인 코드 작성 (src/MainActivity.kt)
MainActivity에서는 커스텀 드로어블을 ProgressBar에 적용하고, 별도의 스레드에서 진행률을 1씩 증가시키며 Handler를 통해 UI를 갱신합니다.
import android.content.res.Resources
import android.graphics.drawable.Drawable
import android.os.Bundle
import android.os.Handler
import android.widget.ProgressBar
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
class MainActivity : AppCompatActivity() {
var status = 0
private val handler: Handler = Handler()
lateinit var textView: TextView
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
title = "KotlinApp"
val resources: Resources = resources
val drawable: Drawable = resources.getDrawable(R.drawable.circularprogressbar)
val progressBar: ProgressBar = findViewById(R.id.circularProgressbar)
progressBar.progress = 0
progressBar.secondaryProgress = 100
progressBar.max = 100
progressBar.progressDrawable = drawable
textView = findViewById(R.id.textView)
Thread(Runnable {
while (status < 100) {
status += 1
handler.post {
progressBar.progress = status
textView.text = String.format("%d%%", status)
}
try {
Thread.sleep(16)
} catch (e: InterruptedException) {
e.printStackTrace()
}
}
}).start()
}
}핵심 포인트: UI 요소는 메인 스레드에서만 수정할 수 있으므로, 백그라운드 스레드에서 계산한 진행 값은 반드시 Handler.post()를 통해 메인 스레드로 전달해야 합니다. Thread.sleep(16)은 약 60FPS에 해당하는 갱신 주기로, 부드러운 애니메이션 효과를 만들어 줍니다.
Step 4 — 매니페스트 설정 (AndroidManifest.xml)
마지막으로 AndroidManifest.xml에 아래 코드를 추가하여 MainActivity를 런처(Launcher) 액티비티로 등록합니다.
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="https://schemas.android.com/apk/res/android" package="com.example.q11"> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/AppTheme"> <activity android:name=".MainActivity"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest>
앱 실행하기
이제 애플리케이션을 실행해 결과를 확인해 보겠습니다. 실제 Android 기기를 컴퓨터에 연결한 상태라고 가정합니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 연 뒤, 툴바에서 Run(실행) 아이콘
을 클릭하세요. 목록에서 연결된 모바일 기기를 선택하면, 기기 화면에 원형 진행률 표시줄이 0%부터 100%까지 부드럽게 채워지는 것을 확인할 수 있습니다.
