Androidアプリでラジオボタンを通常のボタンのようにして、かつ『選択時』『非選択時』のボタンを変えたい…ということがあるかと思います。
そんな時はdrawableに要素を用意して、背景色や文字色に指定するだけで簡単に変更することができます。
ラジオボタンを設置
それではプロジェクトを開きましょう。
とりあえずはラジオボタンを2つ設置しました。
今回はボタンぽくしたいのでラジオボタンのデフォルト要素をクリアします。
buttonに対して『@null』を指定してください。
これでデフォルト要素をクリアできました。
次に背景色を指定していきます。
背景色を設定
とはいえ『選択時』『非選択時』の色の用意が必要なので、単純に背景色を指定するだけではだめです。drawbleにxmlファイルを作成して、それを指定します。
drawbleを右クリック ＞ 新規 ＞ Drawbleリソース・ファイル を選択します。
名前を付けて、問題なければ『OK』を押します。
ファイルが作成されました。
それではこの中に背景色の記述を書きます。
コードは以下をコピペしてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <!-- ▽選択時の設定▽ --> <item android:state_checked="true"> <shape android:shape="rectangle"> <!-- 背景色 --> <solid android:color="#eb6c9f" /> <!-- 角丸 --> <corners android:topRightRadius="10dp" android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp" android:topLeftRadius="10dp" /> <!-- 線の色 --> <stroke android:color="#eb6c9f" android:width="1dp" /> </shape> </item> <!-- ▽非選択時の設定▽ --> <item android:state_checked="false"> <shape android:shape="rectangle"> <!-- 背景色 --> <solid android:color="#f1b9d0" /> <!-- 角丸 --> <corners android:topRightRadius="10dp" android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp" android:topLeftRadius="10dp" /> <!-- 線の色 --> <stroke android:color="#f1b9d0" android:width="1dp" /> </shape> </item> </selector> |
注釈に書いている通りですが、選択時と非選択時それぞれで分けて記述を書いています。
背景色・角丸・線の色、こちらを好きなように設定してください。
あとはこちらを背景色に『@drawable/btn_select_bg』のように指定するだけです。
これでまずは非選択時の背景色が表示されている状態になりました。
ちょっとここでpaddingなどを整えます。
このまま一旦実機で動作を確認してみましょう。
左側のボタンをクリックしたら選択時の背景色になりました！
が、文字色が変わりません。
なので文字色指定用のファイルを作成します。
文字色を設定
先ほどと同じく drawbleを右クリック ＞ 新規 ＞ Drawbleリソース・ファイル を選択します。
また適当に名前を付けて『OK』をクリックします。
ファイルができたので、コードを記述していきましょう。
以下をコピペして、必要に応じて色を変更してください。
|
1 2 3 4 5 6 7 |
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <!-- ▽選択時の文字色▽ --> <item android:state_checked="true" android:color="#ffffff" /> <!-- ▽非選択時の文字色▽ --> <item android:state_checked="false" android:color="#4f3a43" /> </selector> |
こちらも注釈のままですが、選択時・非選択時の文字色をそれぞれ指定してください。
あとはまたtextColorの部分に『@drawable/btn_select_text』のように指定をします。
若干エラーっぽい表示になって不安になると思いますが気にしないでビルドしちゃいましょう。
実機で確認をして選択をすると先ほどと違って文字色も変更できました！
最初はあれ？と思うかもしれませんがコードをコピペしたら簡単です。
ぜひ試してみてください。
