[Android Tips] Buttonにスキンを適用する

2011.10.25

Androidではstyleプロパティを使うことで、見た目を様々なスキンに変更することができます。 今回はButtonコンポーネントをいくつかのコンポーネントスキンに変更してみたいと思います。

SDKのコンポーネントスキンの適用方法

コンポーネントへのスキンの適用はレイアウトXMLから行うのが一般的です。 スキンの適用にはstyleプロパティを使います。

Androidの標準コンポーネントスキンは"@android:style/"で参照できます。 "@android:style/"まで入力すると、コードヒントを表示することができます。

"Widget.Button.Small"などのようなコードヒントが出ますので、これで好きなスキンを当てることができます。

例えば、以下のように適用します。

適用例

 <Button
		android:layout_width="fill_parent"
		android:layout_height="wrap_content"
		android:text="Button"
		style="@android:style/Widget.Button.Small" /> 

 

【備考】 最新のADT(ver.14)では"Widget.Button.Small"な形式で出てきますが、 それ以前のADTでは"Widget_Button_Small"のように出てきます。 こう出てきた場合は"_"(アンダースコア)を"."(ドット)に変更する必要がありますのでご注意ください。

Buttonにさまざまなスキンを適用する

ここまで理解できると、いろいろなコンポーネントスキンの適用を試すことができます。 以下にいくつかのコンポーネントのスキンを適用した例を紹介します。 使い所によってはかなり便利ですので、ぜひ参考にしてください。

Android 2.3 (Ginger Bread)

Widget.Button デフォルトのスキンです。

Widget.Button.Small デフォルトのスキンより少し小さなボタンスキンです。

Widget.Button.Toggle トグルボタンで使われるスキンです。

Widget.EditText 編集テキストで使われるスキンです。

Widget.Spinner Spinnerで使われるスキンです。

Android 4.0 (Ice Cream Sandwich)

先日リリースされたIce Cream SandwichのSDKのスキンも早速試してみました。

Widget.DeviceDefault.Button デフォルトのスキンです。

Widget.DeviceDefault.Button.Small デフォルトのスキンより少し小さなボタンスキンです。

Widget.DeviceDefault.Button.Toggle トグルボタンで使われるスキンです。

Widget.DeviceDefault.EditText 編集テキストで使われるスキンです。

Widget.DeviceDefault.Spinner Spinnerで使われるスキンです。

Widget.DeviceDefault.ActionButton ダイアログなどで使われているスキンです。

まとめ

今回紹介したのはおすすめのスキンですが、 他にもいろいろなコンポーネントのスキンに着せ替えることができます。 個人的にはSpinnerのスキンに変更できるのがいろいろと便利でした。