[안드로이드]SeekBar RGB 글씨 색상조절 만들어보기

2020/12/07 - [안드로이드] - [안드로이드] SeekBar 볼륨조절, 밝기조절

이번 시간에는 SeekBar를 통해 글씨색깔을 마음대로 변경할 수 있는 앱을 만들어보겠습니다.

R, G, B를 조절할 수 있는 3개의 SeekBar를 만듭니다. 

각 SeekBar를 움직이면 그 값을 RGB값에 적용시켜 글씨 색깔을 바꾸는 것입니다. 

1. 화면구현(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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/rgb_r"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="24dp"
        android:text="색깔이 변해요"
        android:layout_gravity="center"
        android:textSize="30sp" />


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

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

        <SeekBar
            android:id="@+id/rgb_r"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

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

        <SeekBar
            android:id="@+id/rgb_g"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="B:"
            android:textSize="25sp"
            android:textColor="@android:color/holo_blue_light"
            />
        <SeekBar
            android:id="@+id/rgb_b"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            />
    </LinearLayout>
</LinearLayout>

2. 기능구현(MainActivity.java)

시크바에는 값이 변경될 때마다 현재 시크바들의 값들을 변수에 담아 텍스트뷰의 글씨색깔을 변경하도록 만들었습니다.

RGB는 0~255까지이고, SeekBar는 0~100이라 sum이라는 변수를 만들어서 155을 넣어 덧셈을 해주었습니다.

import androidx.appcompat.app.AppCompatActivity;
import android.graphics.Color;
import android.os.Bundle;
import android.util.Log;
import android.widget.SeekBar;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    TextView textView;
    SeekBar seekBar_red;
    SeekBar seekBar_green;
    SeekBar seekBar_blue;

    private int rgb_r;
    private int rgb_g;
    private int rgb_b;

    private int sum = 155;

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

        textView = findViewById(R.id.textView);
        seekBar_red = findViewById(R.id.rgb_r);
        seekBar_green = findViewById(R.id.rgb_g);
        seekBar_blue = findViewById(R.id.rgb_b);

        //빨강 시크바
        seekBar_red.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {

                rgb_r = progress + sum;
                rgb_g = seekBar_green.getProgress();
                if(rgb_g > 0){
                    rgb_g += sum;
                }

                rgb_b = seekBar_blue.getProgress();
                if(rgb_b > 0){
                    rgb_b += sum;
                }

                textView.setTextColor(Color.rgb(rgb_r, rgb_g, rgb_b));
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) { }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) { }
        });

        //녹색 시크바
        seekBar_green.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {

                rgb_r = seekBar_red.getProgress();
                if(rgb_r > 0){
                    rgb_r += sum;
                }
                rgb_g = progress + sum;
                rgb_b = seekBar_blue.getProgress();
                if(rgb_b > 0){
                    rgb_b += sum;
                }
                //글씨색깔 변경
                textView.setTextColor(Color.rgb(rgb_r, rgb_g, rgb_b));
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) { }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) { }
        });

        //파랑 시크바
        seekBar_blue.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {

                rgb_r = seekBar_red.getProgress();
                if(rgb_r > 0){
                    rgb_r += sum;
                }
                rgb_g = seekBar_green.getProgress();
                if(rgb_g > 0){
                    rgb_g += sum;
                }
                rgb_b = progress + sum;

                //글씨색깔 변경
                textView.setTextColor(Color.rgb(rgb_r, rgb_g, rgb_b));
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) { }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) { }
        });
    }
}

3. 실행화면