안녕하세요. 이번 포스팅에서는 안드로이드 스튜디오를 활용하여 간단한 타이머 앱을 만드는 방법을 소개해 드리겠습니다.
이번 예제는 기존 강의에서 다루었던 내용을 바탕으로 구성되었습니다. 직접 실습을 진행하실 분들은 이전 강의 내용을 미리 참고해 보시는 것도 큰 도움이 될 것입니다. 그럼 바로 시작해 보겠습니다.
1. 타이머 UI 만들기
가장 먼저 앱의 외관인 UI(User Interface)를 설계해야 합니다. 프로젝트를 생성한 후 리소스 폴더(res/layout)에 있는 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">
<TextView
android:id="@+id/text"
android:layout_width="match_parent"
android:layout_height="0dp"
android:text="타이머 예제"
android:textSize="30sp"
android:textColor="#ffffff"
android:gravity="center"
android:background="#80000000"
app:layout_constraintHeight_percent="0.1"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/time"
android:layout_width="match_parent"
android:layout_height="300dp"
android:text="00 : 00"
android:textSize="50sp"
android:textColor="#0001FF"
android:gravity="center"
app:layout_constraintTop_toBottomOf="@+id/text"
app:layout_constraintBottom_toTopOf="@id/seekerBar" />
<androidx.appcompat.widget.AppCompatSeekBar
android:id="@+id/seekerBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="3600"
app:layout_constraintTop_toBottomOf="@id/time"
app:layout_constraintBottom_toTopOf="@id/start"/>
<Button
android:id="@+id/start"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="start"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="@id/seekerBar"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@id/stop"/>
<Button
android:id="@+id/stop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="stop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="@id/seekerBar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/start"/>
</androidx.constraintlayout.widget.ConstraintLayout>상단에는 앱의 제목을 표시하는 TextView를 배치했습니다. 배경은 50% 투명도의 검정색으로, 글자는 흰색으로 설정하여 가독성을 높였습니다. 중앙의 time TextView는 현재 시간을 표시하며, 그 아래에는 SeekBar(시크바)를 배치하여 최대 3,600초(1시간)까지 설정할 수 있도록 했습니다.
2. MainActivity.kt 코딩하기
UI 배치가 끝났다면 이제 앱이 실제로 동작하도록 MainActivity.kt 파일을 수정해 보겠습니다.
package com.pemblem.basicTimer
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.SeekBar
import android.widget.TextView
import kotlinx.android.synthetic.main.activity_main.*
import kotlin.concurrent.timer
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val seekbar : SeekBar = findViewById(R.id.seekerBar)
val time : TextView = findViewById(R.id.time)
var timeTick = 0
var minute = 0
var second = 0
seekbar.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener{
override fun onProgressChanged(seekBar: SeekBar?, progress: Int, fromUser: Boolean) {
timeTick = progress
time.text = String.format("%02d : %02d", timeTick / 60, timeTick % 60)
}
override fun onStartTrackingTouch(seekBar: SeekBar?) {}
override fun onStopTrackingTouch(seekBar: SeekBar?) {}
})
start.setOnClickListener {
minute = timeTick / 60
second = timeTick % 60
timer(period = 1000, initialDelay = 1000) {
runOnUiThread {
time.text = String.format("%02d : %02d", minute, second)
}
if (second == 0 && minute == 0) {
cancel()
}
if (second == 0) {
if (minute > 0) {
minute--
second = 60
}
}
second--
stop.setOnClickListener { cancel() }
}
}
}
}주요 로직을 설명해 드리겠습니다. 먼저 시크바의 리스너를 통해 사용자가 조절하는 progress 값을 timeTick 변수에 저장하고 이를 화면에 실시간으로 표시합니다.
이후 Start 버튼을 누르면 코틀린의 timer 함수가 실행됩니다. 타이머 내부에서는 매초 runOnUiThread를 호출하여 UI를 업데이트하며, 시간이 모두 경과하거나 Stop 버튼을 누를 경우 cancel()을 통해 타이머를 종료합니다.
타이머 실행 영상
아래는 위 코드를 기반으로 안드로이드 스튜디오에서 실제로 실행해 본 영상입니다.
오늘은 안드로이드 스튜디오를 활용해 간단한 타이머 앱을 제작해 보았습니다. 글로만 설명하기에는 한계가 있어 아쉽지만, 코드를 차근차근 따라 해보시면 금방 이해하실 수 있을 것입니다.
도움이 되셨기를 바라며, 다음에도 유용한 프로그래밍 강좌로 돌아오겠습니다. 궁금한 점은 댓글로 남겨주세요. 감사합니다!
관련 강의 및 다른 글 읽기
- 코틀린 timer 함수 기본 사용법과 println 차이점
- 코틀린 타이머 만드는 방법 기초 강좌
- Constraint Layout 기본 사용법 – 위젯 관계 설정
- 안드로이드 버튼 클릭 이벤트 기본 사용법
- 텍스트뷰(TextView) 정렬, 색상, 크기 변경 방법
이 글의 저작권은 전적으로 작성자인 P_Emblem에게 있으며 허락 없는 무단 복제 및 사용을 금합니다.