サイト移転のお知らせ:http://techbooster.org/に移転しました

ボタンの背景をダイナミックに変える

5月 22, 2010   //   by kseto   //   ユーザインターフェース  //  5 Comments

Androidではボタンを押した場合や離した場合と、ボタンの状態によって背景をダイナミックに変えることができます。
これは「State List」というリソースを使うことで簡単に実現できます。

あらかじめボタンに使う画像ファイルを/res/drawableに追加しておきます。

次に/res/drawableにbutton.xmlというxmlファイルを作ります。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- pressed -->
    <item
          android:state_pressed="true"
          android:drawable="@drawable/lilastoy" />
    <!-- released -->
    <item
          android:state_pressed="false"
          android:drawable="@drawable/toothtoy" />
</selector>

state_pressedがtrueもしくはfalse、つまりボタンが押されている、押されていないという状態ごとに
drawableで指定する画像ファイルを変えています。

あとは、ボタンビューの背景にbutton.xmlを指定すればOKです。

<?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"
    android:gravity="center"
    >
<Button
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:background="@drawable/button" />
	/>
</LinearLayout>

これを動作させると以下の画像のようになります。


(左)ボタンを押していないとき (右)ボタンを押したとき

関連する記事:

Sponsored Link

5 Comments

  • [...] した状態で表示する画像を変化させたい場合は、State Listを使います。 State Listは以前の記事で取り上げたことがありますので、そちらを参照して下さい。 リソース Android, リソース [...]

  • [...] ボタンの背景をダイナミックに変えるでは、背景の変え方について触れました。 今回は、ボタンへ、イベントを追加する方法について紹介します。 [...]

  • [...] ボタンの背景をダイナミックに変える [...]

  • [...] on等とくらべて直感的に扱えるので機能の状態など、UIコンポーネントとして便利です。ボタンの背景画像のカスタマイズなどはボタンの背景をダイナミックに変えるが参考になります。 [...]

  • [...] が、どの様な内容が記述されているのか確認しておきます。 TechBoosterでは「ボタンの背景をダイナミックに変える」のエントリーにおいて、Selectorに触れています。 こちらも参考にどうぞ [...]

技術書新刊 発売中

アンドロイドアカデミアには、CIやテスト、互換検証など実務に生きるノウハウをあつめています

技術書新刊 発売中

Android Next!はAndroid 7.0に対応したはじめての技術書です!


The Web Explorer 2はCSSの中央寄せやWebAudioなど未来を読み解く一冊です


Revised TypeScript in DefinitelylandはTypeScript 2.0(β)に対応した解説書です。インストールから型定義まで幅広くサポートしています


技術書をかこう!はエンジニアらしい執筆環境を構築、HowTo本です