【Android】画像にRGBコードで色設定してみた

主流は16進数カラーコード<b>（#FF0022）</b>だと思いますが、
RGBカラーコード<b>（255, 0, 34）</b>の形式で色変更を行いました。

実際の業務でやった内容の備忘録っす！

・backGroundcolor()をセットするのではなく、colorFilterを適用する！
・RGB値はColor.rgb()でRGB値を変換して適用する！


#クラス：カラーマスタ(MstColor)
データベースのカラム情報をそのまま使います。

・カラーコード（番号）
・カラー名
・R値
・G値
・B値

本当はもっとあるけど...とりあえず必要なものだけ。

```kotlin
data class MstColor(
    val color_code: String,
    val color_name: String,
    val r_code: Int,
    val g_code: Int,
    val b_code: Int
)
```

#レイアウトと画像

サンプルのレイアウトにImageView追加しただけです。

```xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".SecondFragment">

    <ImageView
        android:id="@+id/triforce"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:orientation="horizontal"
        android:src="@drawable/triforce"
        app:layout_constraintBottom_toTopOf="@id/button_second"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button_second"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/previous"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/triforce" />
</androidx.constraintlayout.widget.ConstraintLayout>

```

使う画像はこれ。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238700/402b2c6c-61e2-ccc0-8bc7-e33c21a084d6.jpeg" width=20%>

```xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="450dp"
    android:height="450dp"
    android:viewportWidth="450"
    android:viewportHeight="450">
  <path
      android:pathData="M215.8,41.8c-3.1,5.3 -25.4,44.1 -49.7,86.1 -24.3,42 -44.1,76.5 -44.1,76.7 0,0.2 44.8,0.4 99.5,0.4 54.7,-0 99.5,-0.4 99.5,-0.8 0,-0.8 -6.3,-11.9 -19.7,-34.7 -3.8,-6.6 -23.1,-39.9 -42.8,-74 -19.6,-34.1 -36,-62.3 -36.4,-62.7 -0.4,-0.4 -3.2,3.6 -6.3,9z"
      android:fillColor="#000000"
      android:strokeColor="#00000000"/>
  <path
      android:pathData="M121,206.7c0,1.4 -97,169.6 -98.4,170.5 -0.6,0.4 -0.8,0.9 -0.5,1.3 0.3,0.3 45.2,0.4 99.8,0.3l99.2,-0.3 -6.4,-11c-52.4,-90.6 -88,-152.1 -90.5,-156.5 -1.8,-3 -3.2,-5 -3.2,-4.3z"
      android:fillColor="#000000"
      android:strokeColor="#00000000"/>
  <path
      android:pathData="M273.9,292.8l-49.5,85.7 49.9,0.3c27.4,0.1 72.1,0.1 99.3,-0l49.5,-0.3 -6.4,-11c-3.5,-6.1 -25.6,-44.3 -49.1,-85 -23.6,-40.7 -43.1,-74.3 -43.5,-74.7 -0.4,-0.4 -22.9,37.8 -50.2,85z"
      android:fillColor="#000000"
      android:strokeColor="#00000000"/>
</vector>

```

画像見ればわかるけど。。

まぁまぁまぁ...焦るでない.....

#ColorFilterを適用する

まずはFragmentの実際のソース内容を貼り付けます。

```kotlin
class SecondFragment : Fragment() {

    // カラーマスタを初期設定
    private val mstColorList: List<MstColor> = listOf(
        MstColor("1", "blue", 30, 60, 162),
        MstColor("2", "yellow", 255, 219, 79),
        MstColor("3", "red", 231, 87, 53),
        MstColor("4", "gray", 170, 170, 170),
        MstColor("5", "black", 51, 51, 51),
    )

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_second, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        val triforce = view.findViewById<ImageView>(R.id.triforce)

        var num = 0

        // ボタンを押す度にトライフォースの色を変える
        view.findViewById<Button>(R.id.button_second).setOnClickListener {
            val color = mstColorList[num]

            // 色設定
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
                triforce.colorFilter = BlendModeColorFilter(Color.rgb(color.r_code, color.g_code, color.b_code), BlendMode.SRC_ATOP)
            } else {
                triforce.setColorFilter(Color.rgb(color.r_code, color.g_code, color.b_code), PorterDuff.Mode.SRC_ATOP)
            }

            // ループ設定
            if (num + 1 == mstColorList.size) {
                num = 0
            } else {
                num += 1
            }
        }
    }

}
```
　
　
ポイントとしては
・setBackgroundColorは使えない
・Color.rgbでRGBカラーコードを適用すること
・colorFilterを使って画像に指定した色で塗りつぶしを行うこと


あと<b>setColorFilterは非推奨</b>になった!!
API29以降では <b>BlendModeColorFilter</b> を使うこと。

BlendModeColorFilterって画像の色フィルターを適用するイメージかな。。

○URL
・BlendModeColorFilter
https://developer.android.com/reference/android/graphics/BlendModeColorFilter
・BlendMode
https://developer.android.com/reference/android/graphics/BlendMode
　
　
【結果】

16進数のカラーコードを使わずに、
RGB値だけで色が変わるようになりました！

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238700/f0194cca-490e-d996-67da-629c651b9ec2.gif" width=50%>

やっとSwitch買ってゼル伝の「ブレスオブザワイルド」やってます！


小一時間くらいで作ったサンプルですが、
色連続で変わるだけでトライフォース良い感じになるなｗ
もっと色追加してゲーミングPC的な感じにするとよくなるかも！？





てことで、みなさんも一緒に。





せーーーーーのっ.....
　
　
　
　
　
　
　
　
　　
　
###　エ・バ・ラ・の・ご・ま・だ・れ♪

　

...(やっとパラセール取ったとこ。モリブリンに勝てんｗ）

【参考記事】
https://stackoverflow.com/questions/56716093/setcolorfilter-is-deprecated-on-api29

https://qastack.jp/programming/1309629/how-to-change-colors-of-a-drawable-in-android