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

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

この記事からわかること

  • Kotlin/Android StudioDrawableリソース動的変更する方法
  • backgroundTintメソッド使い方

index

[open]

\ アプリをリリースしました /

みんなの誕生日

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

posted withアプリーチ

環境

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

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

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

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


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

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

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

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

New Article

index