• 2024/3/12
• 3分

【Kotlin/Android】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タグを使用することで矩形や円形だけでなく、枠線や角丸、グラデーションなど簡単に定義することが可能です。

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)

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。