2024/3/12

【Kotlin/Android】Drawableリソースの色を動的に変更する方法！

この記事からわかること

Kotlin/Android StudioでDrawableリソースの色を動的に変更する方法
backgroundTintメソッドの使い方

index

[open]

汎用的なDrawableリソースを定義する
Drawableリソースの色違いを実装する
コードから動的に変更する

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

Android Studio：Flamingo
Kotlin：1.8.20

複数の色違いのViewやボタンを実装したい場合のDrawableリソースの定義方法と色を動的に変更する方法をまとめていきます。例えば以下のような色違いの円形Viewを実装してみます。

汎用的なDrawableリソースを定義する

まずは使い回す用の汎用的なDrawableリソースを定義します。ここでは形や必要であればサイズなどを定義していくだけです。ここでは色は適当に指定しておきます。

ex_circle_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid
        android:color="@color/white" />
</shape>

形の実装はshapeタグを使用することで矩形や円形だけでなく、枠線や角丸、グラデーションなど簡単に定義することが可能です。

おすすめ記事：shapeファイルの設定方法

Drawableリソースの色違いを実装する

レイアウトファイルでDrawableリソースの色違いを実装するためにはandroid:background属性でリソースファイルを指定し、android:backgroundTint属性でリソースファイルの色を指定することができます。

<Button
  android:id="@+id/select_red_button"
  android:layout_width="45dp"
  android:layout_height="48dp"
  android:background="@drawable/ex_circle_shape"
  android:backgroundTint="@color/ex_red"/>

全体

<LinearLayout
    android:id="@+id/color_container"
    android:layout_width="match_parent"
    android:layout_height="70dp"
    android:layout_marginStart="20dp"
    android:layout_marginTop="20dp"
    android:layout_marginEnd="20dp"
    android:orientation="horizontal"
    android:padding="10dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/color_label"
    app:layout_constraintVertical_bias="0.0">

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

    <Button
        android:id="@+id/select_red_button"
        android:layout_width="45dp"
        android:layout_height="48dp"
        android:background="@drawable/ex_circle_shape"
        android:backgroundTint="@color/ex_red"/>

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

    <Button
        android:id="@+id/select_yellow_button"
        android:layout_width="45dp"
        android:layout_height="48dp"
        android:background="@drawable/ex_circle_shape"
        android:backgroundTint="@color/ex_yellow"/>

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


    <Button
        android:id="@+id/select_blue_button"
        android:layout_width="45dp"
        android:layout_height="48dp"
        android:background="@drawable/ex_circle_shape"
        android:backgroundTint="@color/ex_blue" />

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


    <Button
        android:id="@+id/select_green_button"
        android:layout_width="45dp"
        android:layout_height="48dp"
        android:background="@drawable/ex_circle_shape"
        android:backgroundTint="@color/ex_green"/>

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


    <Button
        android:id="@+id/select_purple_button"
        android:layout_width="45dp"
        android:layout_height="48dp"
        android:background="@drawable/ex_circle_shape"
        android:backgroundTint="@color/ex_purple"/>

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

コードから動的に変更する

Kotlinで動的に色を変更するにはbackgroundTintListの値を変更します。単純にカラーコードやリソースを渡すのではなくContextCompat.getColorStateListで指定する必要があります。

val redButton: Button = view.findViewById(R.id.select_red_button)
redButton.backgroundTintList =
            ContextCompat.getColorStateList(this.requireContext(), R.color.black)