[Kotlin][Android]SeekBar의 이미지 변경하기

오늘은 코틀린 언어로 SeekBar의 드래그 할 수 있는 부분 thumb 와 진행막대 부분 ProgressBar 의 이미지를 변경하는 예시를 만들어 보겠습니다.

 

 SeekBar란 기존 ProgressBar 에서 드래그하여 현재 진행 수준 값을 설정하는 기능이 추가된 뷰입니다.

 

 

 

활용할 이미지 준비(ProgressBar 용)

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item><!-- 막대색 설정-->
        <shape>
            <solid android:color="#D3D3D3"/>
        </shape>
    </item>
    <item> <!-- 프로그래스 진행 값 채워진 부분 색 설정 -->
        <clip>
            <shape>
                <gradient
                    android:startColor="#FFEB3B"
                    android:endColor="#FF5722"
                    android:angle="270"/> <!-- 그라데이션 시작,끝색 및 그라데이션 방향 위에서 아래로 설정 -->
            </shape>
        </clip>
    </item>
</layer-list>

 

 => drawable 폴더내에 xml 파일로 생성해 주었습니다.

 

 

 

 

활용할 이미지 준비(thumb 용)

 

 => android studio 내에 있는 Asset Studio의 Configure Vector Asset 기능을 활용하였습니다.

 

 

 

 

 

 

레이아웃 xml 파일 코드(activity_main.xml)

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical">
    <TextView
        android:layout_marginTop="40dp"
        android:gravity="center_horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="레이아웃 파일에서 이미지 미설정한 기본 SeekBar"/>
    <SeekBar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="60dp"
        android:layout_marginEnd="60dp" />

    <TextView
        android:id="@+id/seekbar_state_description"
        android:layout_marginTop="40dp"
        android:gravity="center_horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="레이아웃 파일에서 이미지 설정한 SeekBar"/>
    <SeekBar
        android:id="@+id/seekbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="60dp"
        android:layout_marginEnd="60dp"
        android:progressDrawable="@drawable/progressbar에 설정할 이미지명"
        android:thumb="@drawable/thumb에 설정할 이미지명" />
    <Button
        android:layout_marginTop="40dp"
        android:id="@+id/change_image"
        android:layout_gravity="center_horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="이미지 변경"/>

</LinearLayout>

 

 

 

 

 

액티비티 클래스 코틀린 코드

class MainActivity : AppCompatActivity() {

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

        val seekBar: SeekBar = findViewById(R.id.seekbar) // 이미지를 설정할 SeekBar 뷰
        val changeImage: Button = findViewById(R.id.change_image) // 이미지 변경 관련 버튼
        val seekbarStateDescription: TextView = findViewById(R.id.seekbar_state_description) // 이미지 상태 설명용 텍스트뷰

        // 이미지 변경 버튼 누를 시 이벤트 설정
        changeImage.setOnClickListener {
            // 버튼 누를 시 안드로이드에서 기본제공하는 android.R.drawable.progress_horizontal, android.R.drawable.btn_default 이미지로 변경

            // progressbar 이미지 변경
            seekBar.progressDrawable = ContextCompat.getDrawable(this, android.R.drawable.progress_horizontal)
            // thumb 이미지 변경
            seekBar.thumb = ContextCompat.getDrawable(this, android.R.drawable.btn_default)

            // seekbar 이미지 설명 텍스트 변경
            seekbarStateDescription.text = "코틀린 코드에서 이미지 설정한 SeekBar"
        }
    }
}

 

 

 

실행 영상

ProgressBar 와 thumb에 레이아웃 xml 파일의 이미지 설정, 코드의 이미지 설정이 적용된 것을 확인할 수 있습니다.