【Kotlin/Android】Drawableリソースの色を動的に変更する方法!
この記事からわかること
- Kotlin/Android StudioでDrawableリソースの色を動的に変更する方法
- backgroundTintメソッドの使い方
index
[open]
\ アプリをリリースしました /
友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-
posted withアプリーチ
環境
- Android Studio:Flamingo
- Kotlin:1.8.20
複数の色違いのViewやボタンを実装したい場合のDrawableリソースの定義方法と色を動的に変更する方法をまとめていきます。例えば以下のような色違いの円形Viewを実装してみます。
汎用的な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)
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。