標準のボタンのデザインを変更したい。
しかし、Background を変更したらなんだかボタンぽい動きじゃなくなった。

背景画像をひとつだけ設定すると、ボタンを押しても、フォーカスしても設定された画像だけが表示されるためボタンらしい動きをしなくなります。

ボタン(Button)　と　トグルボタン(ToggleButton)の背景を変更する方法を紹介します。

ボタンの背景として用意しなければならないのは画像ファイルだけで５つあります。
必要がなければ作らなくてもいいんですが、最低でも２つは用意しましょう。

1. 標準状態（フォーカスなし、押されていない）
2. フォーカス状態
3. プレス状態（押されている状態）
4. ボタンがDisableで標準状態（フォーカスなし、押されていない）
5. ボタンがDisableでフォーカス状態

9-patch で画像を作成します。9-patch って何？というのは省略させてください。
android-sdk  の中にある tools/draw9patch.bat で普通に作成した png 画像から 9-patch 画像を作成することができます。

画像の周りに黒いものがあります。これが 9-patch なんです！画面上には黒い線は表示されません。

Button の背景の設定方法はプロパティの Background に設定することになります。
Button の状態により表示される画像を指定する xml ファイルを作成します。

my_button_background.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_window_focused="false" android:state_enabled="true" android:drawable="@drawable/my_btn_default_normal" /> <item android:state_window_focused="false" android:state_enabled="false" android:drawable="@drawable/my_btn_default_normal_disable" /> <item android:state_pressed="true" android:drawable="@drawable/my_btn_default_pressed" /> <item android:state_focused="true" android:state_enabled="true" android:drawable="@drawable/my_btn_default_selected" /> <item android:state_enabled="true" android:drawable="@drawable/my_btn_default_normal" /> <item android:state_focused="true" android:drawable="@drawable/my_btn_default_normal_disable_focused" /> <item android:drawable="@drawable/my_btn_default_normal_disable" /> </selector>

ボタンの状態ごとに画像を設定しています。
state_XXX = true | false  これがボタンの状態を表しています。

Button の Background に @drawable/my_button_background と入力すれば背景画像の変更は完了です。

次は Toggle ボタンです。
用意する画像は２つです。ON と OFF

xml ファイルを２つ作成します。

my_toggle_button_background.xml

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="false" android:drawable="@drawable/my_btn_toggle_off" /> <item android:state_checked="true" android:drawable="@drawable/my_btn_toggle_on" /> </selector>

これはON と OFF の画像を指定しただけです。
背景自体は先ほど作った Button の背景を流用します。

my_button.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+android:id/background" android:drawable="@drawable/my_button_background" /> <item android:id="@+android:id/toggle" android:drawable="@drawable/my_toggle_button_background" /> </layer-list>

二つのファイルを指定しました。

ToggleButton の プロパティ Background に my_button を入力すれば背景画像も ON と OFF も設定できました。

関連する投稿

• タイトルバーにアイコンを表示する