[Android] ボタンの見た目をカスタマイズ

規定のボタンデザインを使ってもいいのですが、物足りなく感じることはないでしょうか？
どうせ自作アプリを作るなら、ボタンもオリジナルの見た目にしたいですよね。

そこで、今回はボタンの見た目を変更する方法について。
 

背景色の変更

android:background属性に背景色を指定するだけでも見た目がガラっ（？）と変わります。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    <Button
        android:layout_width="100dp"
        android:layout_height="40dp"
        android:background="#00FF00"
        android:text="Hoge" />
</LinearLayout>

 
アルファ値を0にしたARBG値（#00000000など）を指定すると透明なボタンを作ることもできます。
 
 

状態に応じて見た目を変化させる

ボタンなどの状態によりdrawableを切り替えるステートリストという仕組みがあります。
ステートリストは次のように定義されています。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
    android:constantSize=["true" | "false"]
    android:dither=["true" | "false"]
    android:variablePadding=["true" | "false"] >
    <item
        android:drawable="@[package:]drawable/drawable_resource"
        android:state_pressed=["true" | "false"]
        android:state_focused=["true" | "false"]
        android:state_hovered=["true" | "false"]
        android:state_selected=["true" | "false"]
        android:state_checkable=["true" | "false"]
        android:state_checked=["true" | "false"]
        android:state_enabled=["true" | "false"]
        android:state_activated=["true" | "false"]
        android:state_window_focused=["true" | "false"] />
</selector>

 
いろいろな属性がありますが、必要なものだけを使用します。
細かな説明をするより実際の使い方を見てもらった方が早いですね^^;
 

まず、各状態におけるボタンの見た目を記述したdrawableファイルを用意します。
全ての属性に対応していると大変なので、ここでは「通常時」と「押下時」のみの対応とします。

「/res/drawable/」直下に以下の2つのファイル作ります。
 

button_normal.xml（通常時用）

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <stroke
        android:width="1px"
        android:color="#AABBAA"
        />
    <gradient
        android:startColor="#44BB44"
        android:endColor="#444444"
        android:angle="270"
        />
    <corners
        android:radius="7px"
        />
</shape>

button_pressed.xml（押下時用）

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <stroke
        android:width="1px"
        android:color="#AAFFAA"
        />
    <gradient
        android:startColor="#44FF44"
        android:endColor="#448844"
        android:angle="270"
        />
    <corners
        android:radius="7px"
        />
</shape>

 
次に同フォルダ内にステートリストファイルを作ります。

button.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- 通常時 -->
    <item
        android:state_pressed="false"
        android:drawable="@drawable/button_normal"
        />

    <!-- 押下時 -->
    <item
        android:state_pressed="true"
        android:drawable="@drawable/button_pressed"
        />
</selector>

 
あとはデザインを適用したいボタンのandroid:background属性にステートリストを指定するだけです。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    <Button
        android:layout_width="100dp"
        android:layout_height="40dp"
        android:background="@drawable/button"
        android:text="Hoge" />
</LinearLayout>

 
規定デザインと今回カスタマイズしたものを並べるとこんな感じになります。

押下時はこちら。

 
ステートリストの詳細を知りたい方はコチラを参照してください。
 

ボタンイメージを準備しなくてもこれくらいのカスタマイズは簡単にできるので、是非お試しください^^b
 
 

関連があると思われる記事：

• [Android] ページ内でのListView区切り線表示
• [Android] アプリケーション名とアイコン
• [Android] メニュー処理
• [Android] レイアウトでViewを両端に配置する方法
• [Android] Backボタンが押されたときの処理

[`google_buzz` not found]

[`yahoo` not found]

[`livedoor` not found]

[`friendfeed` not found]

[`tweetmeme` not found]

[`grow` not found]