2010年1月7日木曜日

Android Button の色や画像を変える

Button の背景を別の色や画像に変えるには、
2つ方法があります。

最も単純な方法は Button タグのパラメータで

android:background="@drawable/button_image"



android:background="#ff0000ff"

のように画像や background を指定する方法です。

しかし、この場合だとボタンにフォーカスがあった
場合やボタンが押された場合でも変化がありません。

そこで、ボタンにフォーカスがあった場合や、
ボタンが押された場合の色や画像を指定する方法があります。

わかりやすくするために、色の場合と画像の場合で
分けて書きます。

・色の場合

まず、次のような xml ファイルを drawable/ に作ります。

color_stateful.xml

<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<color android:color="#ff5555ff" />
</item>
<item android:state_pressed="false">
<color android:color="#ff9999ff" />
</item>
</selector>


もしくは


<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_focused="true"
android:color="@color/testcolor1" />
<item
android:state_pressed="true"
android:state_enabled="false"
android:color="@color/testcolor2" />
<item
android:state_enabled="false"
android:color="@color/testcolor3" />
<item
android:state_active="true"
android:color="@color/testcolor4" />
<item android:color="@color/testcolor5"/>
</selector>


・画像の場合

image_stateful.xml

<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_focused="true"
android:drawable="@drawable/image1"/>
<item
android:state_pressed="true"
android:state_enabled="false"
android:drawable="@drawable/image2" />
<item
android:state_enabled="false"
android:drawable="@drawable/image3" />
<item
android:state_active="true"
android:drawable="@drawable/image4" />
<item android:color="@color/testcolor5" />
</selector>



あとは、 Button のパラメータで

android:background="@drawable/color_stateful"

android:background="@drawable/image_stateful"

と指定すればOK。


 

4 件のコメント:

  1. いつも勉強させてもらっています!

    image_stateful.xml の部分の最後の item ですが、
    android:color ではなく、 android:drawable(でリソース名) ではないでしょうか。
    android:color だと 「image_stateful なんてリソースはない!」と怒られてしまうようで、PATH名をチェックし続けてしまいました・・・(なんでそんなエラーメッセージなのか・・・)

    これからも頑張ってください!

    返信削除
  2. chiken さん

    コメントありがとうございます。
    image_stateful.xml の最後は画像ではなくて testcolor5 という色リソースを指定しているので、android:color が正しいです。 ここも画像を指定する場合は android:drawable にしてください。

    返信削除
  3. お返事ありがとうございます!

    しかし、そうですか、、
    私が 2.1-update1(API 7) で試した限りだと、
    android:color だと何故か上手くいかず、android:drawableにすると解決しました。
    例えば、下記のようなレイアウトXMLで、
    ------------------------------------------- main.xml
    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <Button android:background="@drawable/button_stateful"
    android:layout_width="wrap_content" android:layout_height="wrap_content"
    android:text="hogehoge"
    android:id="@+id/imageButton1"></Button>
    </LinearLayout>
    -------------------------------------------

    button_stateful.xml に android:color だと上手くいかず、
    色リソースを参照するにせよ、android:drawable だと上手くいきます。
    ---------------- button_stateful.xml: エラーになる
    <?xml version="1.0" encoding="utf-8" ?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
    android:state_pressed="true"
    android:drawable="@drawable/icon" />
    <item android:color="@color/color1" />
    </selector>
    ---------------- button_stateful.xml: 問題ない
    <?xml version="1.0" encoding="utf-8" ?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
    android:state_pressed="true"
    android:drawable="@drawable/icon" />
    <item android:drawable="@color/color1" /> // color -> drawable
    </selector>
    --------------------------------------------- エラーメッセージ
    ERROR/AndroidRuntime(31080): Caused by: org.xmlpull.v1.XmlPullParserException: Binary XML file line #?: <item> tag requires a 'drawable' attribute or child tag defining a drawable
    ----------------------------------------------

    drawableとcolorを混ぜるからダメなのかとも思いましたが、
    android:drawable="@drawable/icon"

    android:color="@color/color2"
    としてもダメでした。
    何か、color全般が上手くいかない感じでした。

    しかし、colorでも main.xml で android:backgroundで使用していたbutton_stateful.xmlを、
    android:textColor で使用するとちゃんと色が変わりました。

    ちょうど、
    http://stackoverflow.com/questions/3953606/android-trouble-with-color-state-list-resources-how-to-specify-a-background-col
    と同じような現象でした。

    textColorだとcolorで良いけど、backgroundではdrawableではないとダメなのかな、、、と
    今は思っているのですが。。


    長くなって恐縮ですが、ご連絡まで!

    返信削除
  4. なるほど。エラーメッセージをみると確かに "drawable" 属性か drawable を定義している子要素が必要だと言われてますね。いつからかADTが変わった可能性はありますね。1年以上の前のエントリなので。

    返信削除