【開発】Androidアプリでボタンの色を動的に変更するには？実例も交えてわかりやすく解説します【button】

まず初めに

みなさん、こんにちは。はねすけと申します。

今回は内容は「Androidアプリでボタン色を動的に変更」です。

聞いただけだと非常に簡単で初歩的な話のように感じますが、意外とハマってしまったため、ほかの方の参考になるのではないかと思い記録を残しておきたいと思います。
それでは早速行ってみましょう！

前提情報の整理

Android Studio

まずは前提として、今回の記事で関係のある事柄を整理しておきます。特に必要ないという方は本題である次の章まで飛ばしていただければ幸いです。

今回ご紹介しておくのは「Android Studio」です。
Android Studioとは、Googleが提供しているAndroidアプリケーションを作成するためのIDE（統合開発環境）です。
簡単に言うと、Androidのスマホアプリなどを開発するためのソフトウェアです。

世の中には様々な種類のIDEが存在しています。
しかし、ことAndroidアプリの開発ということに関しては、Androd Studioが最適なIDEではないかと思います。

目的に合わせたIDEを使うと開発が円滑に進みますね。

参考

Android Studio の概要  |  Android Developers

Android Developers

Android Studioのダウンロード・インストール

まだ使ったことがないという方のために、簡単ではありますがインストール方法も確認しておこうと思います。
インストールについてはインストーラを使用して非常に簡単に行えます。以下のリンクよりインストーラを取得していきましょう。※ここではWindowsにインストールしていこうと思います。

参考

Android Studio とアプリツールをダウンロードする – Android デベロッパー  |  Android Developers

Android Developers

Androd Studioの起動

無事インストールできましたので、実際に簡単にですがAndrod Studioを操作してみましょう。

ここでは起動してアプリ開発画面を起動するまでの解説に留めていますが、デバッグ方法など開発に関してもっと具体的に知りたいという方のために公式サイトでトレーニングを提供していますので、ぜひなれる意味でも試してみると良いかもしれません。

参考

Get started  |  Android Developers

Android Developers

テキストの場合のColor

Android Studioの概要を確認できたところで、本題である「ボタンの動的な色設定」に関する注意点に入っていきましょう。
ちなみに言語はJavaでしたが、レイアウト側の処理の話のためあまり関係ないと思われます。

まずは比較対象としてテキストの場合を見ていきたいと思います。
レイアウト上にテキストを配置するには「TextView」を使用しますね。
この辺は本当の基礎の基礎なので特段説明することはないかと思います。(知らない方はググってくださいね)

<TextView
   android:id="@+id/text_test"
   android:background="#FFFF00"
   android:text="test"
   android:textColor="#F44336"/>

「.xml」ファイル上で上のような記載ですね。
テキストの場合の色の変更は何も悩むことはありません。直感的に目につくプロパティをいじるだけで変更ができます。

背景色であれば「android:background」を変更し、文字色であれば「android:textColor」を設定することで、任意の色で表示することができるでしょう。

ボタンの場合のColor

一筋縄にはいかないボタンの取り扱い

ここからが本題です。テキストの際には簡単に色を変更できましたが、ではそれがボタンの色となるとどうすれば良いのでしょうか。

<Button
        android:id="@+id/button_test"
        android:onClick="countUp"
        android:text="test_button" />

ボタンは簡単に書くと上記のような記載の仕方をしますが、そのほかにどのようなプロパティを設定すれば良いでしょうか？
まず浮かぶのはテキストと同じように「android:background」を設定してみます。

<Button
        android:id="@+id/button_test"
        android:background="#FFFF00"
        android:onClick="countUp"
        android:text="test_button" />

こんな感じですね。これでデバックしてみましょう。
……なぜか色が変わりません。

Googleの公式の資料を探しましたが、現時点では関連してそうなものは見つけられませんでした。
ともかく現時点においては有効な設定方法でないのは間違いありません。

ボタンの場合の２つのbackground

結論からお伝えしますと、android:backgroundではなく「android:backgroundTint」というプロパティを設定する必要があります。

<Button
        android:id="@+id/button_test"
        android:backgroundTint="#F44336"
        android:onClick="countUp"
        android:text="test_button" />

こんな感じです。
何が違うのかと言えば、background⇒そもそもの色・backgroundTint⇒色合い調整につかう色というニュアンスのようですが、明確なことは調べ切れておりません…

ともかくボタンの色を設定するのは「backgroundTint」を設定するのが正しいです。

注意すべきは、「background」と「backgroundTint」両方設定してもいけないという点です。
「backgroundTint」だけを設定してください。
そうしていなければ、ボタンの色を後ほど動的に変更することができないのです。(これまたなぜそうなのかという根本原因は調べ切れていませんが…)

ちなみにJava側でボタン色を変更する際には以下のような書き方をします。参考までに。

//ボタンの宣言
private Button mBtnTest;
mBtnTest = (Button)findViewById(R.id.button_test);

//色を黄色に変更
mBtnTest.setBackgroundTintList(ColorStateList.valueOf(Color.YELLOW));

ただ、これもあくまで現時点でのお話です。
また未来では正しい記載の仕方は変わっている可能性は十二分にあります。
ですので、参考資料を探す際にはできるだけ日付が今に近い資料を見るようにしてくださいね。

まとめ

いかがだったでしょうか？

本日お伝えしたかった内容を簡単にまとめると以下のようになります。

ぜひ何らかの形でお役に立てれば幸いです。

それでは次の記事でまたお会いしましょう♪