【Kotlin/Android Studio】Buttonの背景色の設定方法!動的にコードから変更

この記事からわかること

  • Android StudioButton実装する方法
  • 背景色変更方法
  • setBackgroundColor使い方
  • setBackgroundResource適応されない
  • カラーコード接頭辞#FFとは?

index

[open]

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

みんなの誕生日

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

posted withアプリーチ

環境

Buttonのデフォルトの背景色

Android StudioではButtonを設置するとデフォルトのデザインが適応されるようになっています。Android Studio Flamingoでは以下のような紫色で角が丸くなったボタンが実装されます。

【Android Studio】Buttonにアイコンを設定する方法!デザインやテーマのカスタマイズ

この際のButtonのXMLは以下のようになります。

<Button
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="Button" />

背景色を変更する

背景色を変更するためにはandroid:backgroundTint属性に変更したカラーコードを16進数(#XXXXXX形式)で渡します。

android:backgroundTint="#000000"
【Android Studio】Buttonにアイコンを設定する方法!デザインやテーマのカスタマイズ

またカラーコードは16進数では0〜Fまでの6文字で表現しますが、以下のように8文字で表現した場合前の2つは透明度の設定値になります。FFが透明度0で00が完全に透明になります。

android:backgroundTint="#FF000000"

リソースファイルから指定する

カラーコードはリソースファイルから指定することも可能です。「res」>「values」>「colors.xml」の中に定義を増やすか新規でカラーコード用のリソースファイルを用意して指定します。


<resources>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
</resources>

指定する際は@color/[nameで指定した文字]のようにすることで適応されます。

android:backgroundTint="@color/black"

android:backgroundは適応されない?

同じような属性にandroid:backgroundがありまずがこれでは背景色が変更できなかったので注意してください。

android:background="@color/black"

コードから動的に背景色を変更する

Buttonの背景色を動的にコードをから変更するにはsetBackgroundColorメソッドに引数にカラーコードを渡します。

button.setBackgroundColor(Color.rgb(0, 0, 0))

リソースファイルのカラーを取得するにはsetBackgroundResourceメソッドを使用するのですが、TextViewなどではうまく動作しますがButtonでは以下のように背景色は変更されず角丸も外れてしまいました

button.setBackgroundResource(R.color.black)
【Android Studio】Buttonにアイコンを設定する方法!デザインやテーマのカスタマイズ

色々試してみるとリソースファイルのカラーをスタイルを崩さずに適応させるには以下のように実装することで期待通りに動作させることができました。

val colorValue = ContextCompat.getColor(this, R.color.black)
button.setBackgroundColor(colorValue)

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

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

searchbox

スポンサー

ProFile

ame

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

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

New Article

index