Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What are the problem?

posted at

updated at

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

主流は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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
1
Help us understand the problem. What are the problem?