エンジニアの独り言

日常のことやプログラミングのことを気ままに書いています

【Android】SeekBarを使用して色(RGB)を変えてみる

Android プログラミング

お久しぶりです、今回はSeekBarを使用して、色を変化させるアプリを作ってみました。

開発環境&使用言語

Android Studio 2021.1.1 Patch 3
Java

RGB変更処理

まずは画面レイアウトから作成していきます

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0"
        android:orientation="vertical"
        android:paddingRight="0dp">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="RGBサンプル" />

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

            <Space
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1" />

            <TextView
                android:id="@+id/custom_color"
                android:layout_width="188dp"
                android:layout_height="161dp"
                android:layout_marginLeft="0dp"
                android:layout_marginRight="0dp"
                android:text="" />

            <Space
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1" />

        </LinearLayout>

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

            <TextView
                android:layout_width="50dp"
                android:layout_height="wrap_content"
                android:layout_weight="0"
                android:text="赤(R)" />

            <EditText
                android:id="@+id/Red_EditText"
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:layout_weight="0"
                android:ems="0"
                android:imeOptions="actionDone"
                android:inputType="number"
                tools:text="0" />

            <SeekBar
                android:id="@+id/Red_SeekBar"
                android:layout_width="150dp"
                android:layout_height="match_parent"
                android:layout_weight="0"
                android:max="255"
                android:min="0" />

        </LinearLayout>

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

            <TextView
                android:layout_width="50dp"
                android:layout_height="wrap_content"
                android:layout_weight="0"
                android:text="緑(G)" />

            <EditText
                android:id="@+id/Green_EditText"
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:ems="0"
                android:imeOptions="actionDone"
                android:inputType="number"
                tools:text="0" />

            <SeekBar
                android:id="@+id/Green_SeekBar"
                android:layout_width="150dp"
                android:layout_height="match_parent"
                android:max="255"
                android:min="0" />

        </LinearLayout>

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

            <TextView
                android:layout_width="50dp"
                android:layout_height="wrap_content"
                android:layout_weight="0"
                android:text="青(B)" />

            <EditText
                android:id="@+id/Blue_EditText"
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:ems="0"
                android:imeOptions="actionDone"
                android:inputType="number"
                tools:text="0" />

            <SeekBar
                android:id="@+id/Blue_SeekBar"
                android:layout_width="150dp"
                android:layout_height="match_parent"
                android:max="255"
                android:min="0" />
        </LinearLayout>

    </LinearLayout>

</LinearLayout>

次に処理を書いていきます

package com.example.rgbseekbarsampleapplication;

import androidx.appcompat.app.AppCompatActivity;

import android.graphics.Color;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.inputmethod.EditorInfo;
import android.widget.EditText;
import android.widget.SeekBar;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private EditText Red_EditText;
    private EditText Green_EditText;
    private EditText Blue_EditText;
    private TextView custom_color;

    private SeekBar Red_SeekBar;
    private SeekBar Green_SeekBar;
    private SeekBar Blue_SeekBar;

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

        Red_EditText = findViewById(R.id.Red_EditText);
        Green_EditText = findViewById(R.id.Green_EditText);
        Blue_EditText = findViewById(R.id.Blue_EditText);
        custom_color = findViewById(R.id.custom_color);

        Red_SeekBar = findViewById(R.id.Red_SeekBar);
        Green_SeekBar = findViewById(R.id.Green_SeekBar);
        Blue_SeekBar = findViewById(R.id.Blue_SeekBar);

        Red_EditText.setText("0");
        Green_EditText.setText("0");
        Blue_EditText.setText("0");
        Red_SeekBar.setProgress(0);
        Green_SeekBar.setProgress(0);
        Blue_SeekBar.setProgress(0);


        custom_color.setBackgroundColor(Color.rgb(Integer.valueOf(Red_EditText.getText().toString()),
                Integer.valueOf(Green_EditText.getText().toString()),
                Integer.valueOf(Blue_EditText.getText().toString())));

        //数値直入力
        Red_EditText.setOnEditorActionListener(new TextView.OnEditorActionListener() {
            @Override
            public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
                if(actionId == EditorInfo.IME_ACTION_DONE)//Enterキー押下時
                {
                    try
                    {
                        //入力された値が空または255を超えていないか判定する
                        if(Red_EditText.getText().toString().equals(""))
                        {
                            Red_EditText.setText("0");
                        }
                        else if(Integer.valueOf(Red_EditText.getText().toString()) > 255)
                        {
                            Red_EditText.setText("255");
                        }

                    }catch (NumberFormatException e)
                    {
                        Red_EditText.setText("255");
                    }

                    //値を反映
                    int r = Integer.valueOf(Red_EditText.getText().toString());
                    int g = Integer.valueOf(Green_EditText.getText().toString());
                    int b = Integer.valueOf(Blue_EditText.getText().toString());

                    Red_SeekBar.setProgress(r);//入力された値をシークバーに反映させる
                    custom_color.setBackgroundColor(Color.rgb(r,g,b));//色を変化させる
                }
                return false;
            }
        });
        Green_EditText.setOnEditorActionListener(new TextView.OnEditorActionListener() {
            @Override
            public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
                if(actionId == EditorInfo.IME_ACTION_DONE)//Enterキー押下時
                {
                    try
                    {
                        //入力された値が空または255を超えていないか判定する
                        if(Green_EditText.getText().toString().equals(""))
                        {
                            Green_EditText.setText("0");
                        }
                        else if(Integer.valueOf(Green_EditText.getText().toString()) > 255)
                        {
                            Green_EditText.setText("255");
                        }

                    }catch (NumberFormatException e)
                    {
                        Green_EditText.setText("255");
                    }

                    //値を反映
                    int r = Integer.valueOf(Red_EditText.getText().toString());
                    int g = Integer.valueOf(Green_EditText.getText().toString());
                    int b = Integer.valueOf(Blue_EditText.getText().toString());
                    Green_SeekBar.setProgress(g);//入力された値をシークバーに反映させる
                    custom_color.setBackgroundColor(Color.rgb(r,g,b));//色を変化させる
                }
                return false;
            }
        });
        Blue_EditText.setOnEditorActionListener(new TextView.OnEditorActionListener() {
            @Override
            public boolean onEditorAction(TextView v, int actionId, KeyEvent event)
            {
                if(actionId == EditorInfo.IME_ACTION_DONE)//Enterキー押下時
                {
                    try
                    {
                        //入力された値が空または255を超えていないか判定する
                        if(Blue_EditText.getText().toString().equals(""))
                        {
                            Blue_EditText.setText("0");
                        }
                        else if(Integer.valueOf(Blue_EditText.getText().toString()) > 255)
                        {
                            Blue_EditText.setText("255");
                        }

                    }catch (NumberFormatException e)
                    {
                        Blue_EditText.setText("255");
                    }

                    //値を反映
                    int r = Integer.valueOf(Red_EditText.getText().toString());
                    int g = Integer.valueOf(Green_EditText.getText().toString());
                    int b = Integer.valueOf(Blue_EditText.getText().toString());
                    Blue_SeekBar.setProgress(b);//入力された値をシークバーに反映させる
                    custom_color.setBackgroundColor(Color.rgb(r,g,b));//色を変化させる
                }
                return false;
            }
        });


        //シークバータッチ時
        Red_SeekBar.setOnSeekBarChangeListener(
                new SeekBar.OnSeekBarChangeListener()
                {
                    public void onProgressChanged(SeekBar seekBar,
                                                  int progress, boolean fromUser)
                    {
                        Red_EditText.setText(String.valueOf(Red_SeekBar.getProgress()));
                        int r = Integer.valueOf(Red_EditText.getText().toString());
                        int g = Integer.valueOf(Green_EditText.getText().toString());
                        int b = Integer.valueOf(Blue_EditText.getText().toString());
                        custom_color.setBackgroundColor(Color.rgb(r,g,b));
                    }
                    public void onStartTrackingTouch(SeekBar seekBar) {
                    }

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

        Green_SeekBar.setOnSeekBarChangeListener(
                new SeekBar.OnSeekBarChangeListener()
                {
                    public void onProgressChanged(SeekBar seekBar,
                                                  int progress, boolean fromUser) {
                        Green_EditText.setText(String.valueOf(Green_SeekBar.getProgress()));
                        int r = Integer.valueOf(Red_EditText.getText().toString());
                        int g = Integer.valueOf(Green_EditText.getText().toString());
                        int b = Integer.valueOf(Blue_EditText.getText().toString());
                        custom_color.setBackgroundColor(Color.rgb(r,g,b));
                    }

                    public void onStartTrackingTouch(SeekBar seekBar) {
                    }

                    public void onStopTrackingTouch(SeekBar seekBar) {

                    }
                }
        );

        Blue_SeekBar.setOnSeekBarChangeListener(
                new SeekBar.OnSeekBarChangeListener()
                {
                    public void onProgressChanged(SeekBar seekBar,
                                                  int progress, boolean fromUser) {
                        Blue_EditText.setText(String.valueOf(Blue_SeekBar.getProgress()));
                        int r = Integer.valueOf(Red_EditText.getText().toString());
                        int g = Integer.valueOf(Green_EditText.getText().toString());
                        int b = Integer.valueOf(Blue_EditText.getText().toString());
                        custom_color.setBackgroundColor(Color.rgb(r,g,b));
                    }

                    public void onStartTrackingTouch(SeekBar seekBar) {
                    }

                    public void onStopTrackingTouch(SeekBar seekBar) {

                    }
                }
        );
    }
}

実際の実行画面

下の画像のようにシークバーを動かすと画像の色が変わります