3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

アイエンターAdvent Calendar 2020

Day 3

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

Last updated at Posted at 2020-12-03

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

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

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

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

・カラーコード(番号)
・カラー名
・R値
・G値
・B値

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

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 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>

使う画像はこれ。


<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の実際のソース内容を貼り付けます。

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を使って画像に指定した色で塗りつぶしを行うこと

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

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

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

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

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

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

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

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

 

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

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

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?