[Java][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="#FF0000"
                    android:endColor="#00FF00"
                    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>

=> android:thumb 속성을 활용해 thumb 이미지 설정, android:progressDrawable 속성을 활용해 ProgressBar 이미지 설정을 할 수 있습니다.

 

액티비티 클래스 코드

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

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

        // 이미지 변경 버튼 누를시 이벤트 설정
        change_image.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 버튼 누를시 안드로이드에서 기본제공하는 android.R.drawable.progress_horizontal, android.R.drawable.btn_default 이미지로 변경

                //progressbar 이미지 변경
                seekBar.setProgressDrawable(ContextCompat.getDrawable(MainActivity.this, android.R.drawable.progress_horizontal));
                //thumb 이미지 변경
                seekBar.setThumb(ContextCompat.getDrawable(MainActivity.this, android.R.drawable.btn_default));

                //seekbar 이미지 설명 텍스트 변경
                seekbar_state_description.setText("자바 코드상에서 이미지 설정한 SeekBar");
            }
        });
    }
}

 

실행 영상

 

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