[안드로이드 코틀린] SeekBar RGB 글씨 색상 조절 만드는 방법

이번 시간에는 SeekBar를 이용해서 색상 RGB 조절하는 방법을 알아보겠습니다. 

---

목차

1. 실행 화면
2. 메인 화면 activity_main.xml
3. 메인 코드 MainActivity.kt

---

1. 실행 화면

 

2. 메인 화면 activity_main.xml

- 설명 -

 1. 빨간색 조절하는 SeekBar

 2. 초록색 조절하는 SeekBar

 3. 파랑색 조절하는 SeekBar

 4. 이미지 res -> drawable

color_wheel.png

0.00MB

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/rootView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/colorText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:gravity="center"
        android:text="색깔이 변합니다. "
        android:textSize="40sp"
        android:textStyle="bold" />

    <!-- 빨강 조절-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="R"
            android:textColor="@android:color/holo_red_light"
            android:textSize="30sp" />

        <SeekBar
            android:id="@+id/seekBarR"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:max="255"
            android:thumb="@drawable/color_wheel" />
    </LinearLayout>

    <!-- 초록 조절-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="G"
            android:textColor="@android:color/holo_green_light"
            android:textSize="30sp" />

        <SeekBar
            android:id="@+id/seekBarG"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:max="255"
            android:thumb="@drawable/color_wheel" />
    </LinearLayout>

    <!-- 파랑 조절-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="B"
            android:textColor="@android:color/holo_blue_light"
            android:textSize="30sp" />

        <SeekBar
            android:id="@+id/seekBarB"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:max="255"
            android:thumb="@drawable/color_wheel" />
    </LinearLayout>
</LinearLayout>

 

3. 메인 코드 MainActivity.kt

- 설명 -

 1. onProgressChanged

   SeekBar 값 변경 시 실행되는 이벤트

 2. onStartTrackingTouch

   SeekBar 처음 탭 하여 드래그할 때 실행

 3. onStopTrackingTouch

   SeekBar 탭 멈췄을 때 실행

 4. seekBarR.progress

   Seekbar 위치 값 

class MainActivity : AppCompatActivity() {

    lateinit var colorText: TextView
    lateinit var seekBarR: SeekBar
    lateinit var seekBarG: SeekBar
    lateinit var seekBarB: SeekBar

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

        colorText = findViewById(R.id.colorText)
        seekBarR = findViewById(R.id.seekBarR)
        seekBarG = findViewById(R.id.seekBarG)
        seekBarB = findViewById(R.id.seekBarB)

        //빨강 시크바 이벤트
        seekBarR.setOnSeekBarChangeListener(object: SeekBar.OnSeekBarChangeListener{
            override fun onProgressChanged(seekBar: SeekBar?, progress: Int, fromUser: Boolean) {

                //텍스트 색상 설정
                showTextColorChnage()
            }

            override fun onStartTrackingTouch(p0: SeekBar?) {}

            override fun onStopTrackingTouch(p0: SeekBar?) {}

        })

        //초록 시크바 이벤트
        seekBarG.setOnSeekBarChangeListener(object: SeekBar.OnSeekBarChangeListener{
            override fun onProgressChanged(seekBar: SeekBar?, progress: Int, fromUser: Boolean) {

                //텍스트 색상 설정
                showTextColorChnage()
            }

            override fun onStartTrackingTouch(p0: SeekBar?) {}

            override fun onStopTrackingTouch(p0: SeekBar?) {}

        })

        //파랑 시크바 이벤트
        seekBarB.setOnSeekBarChangeListener(object: SeekBar.OnSeekBarChangeListener{
            override fun onProgressChanged(seekBar: SeekBar?, progress: Int, fromUser: Boolean) {

                //텍스트 색상 설정
                showTextColorChnage()
            }

            override fun onStartTrackingTouch(p0: SeekBar?) {}

            override fun onStopTrackingTouch(p0: SeekBar?) {}

        })
    }

    /**
     * 텍스트 색상 변경
     */
    private fun showTextColorChnage(){

        //각 SeekBar 값 가져오기
        var red = seekBarR.progress
        var green = seekBarG.progress
        var blue = seekBarB.progress

        //텍스트 색상 변경
        colorText.setTextColor(Color.rgb(red, green, blue))
    }

}

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

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

2022.08.29 - [안드로이드] - [안드로이드 코틀린] 야구 게임 만드는 방법 part1 - 화면 구성

[안드로이드 코틀린] 야구 게임 만드는 방법 part1 - 화면 구성

2022.08.23 - [안드로이드] - [안드로이드 코틀린] 옵션 메뉴(OptionMenu), 서브메뉴(Sub Menu) 만드는 방법

[안드로이드 코틀린] 옵션메뉴(OptionMenu), 서브메뉴(Sub Menu) 만드는 방법