Androidで複数ボタンから１つだけ選択するUIの実現

少しタイトルがわかりにくいですが、複数のボタンから一つ選択すると、他のボタンは非選択状態になると言ったUIの実現方法です。
これは、ラジオボタンからチェックするボタンを消し、背景画像を用意することで実現できます。

【構成】


【MainActivity.java】

package com.ayakix;

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {
  /** Called when the activity is first created. */
  @Override
  public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.main);
  }
}

【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"
  >
<RadioGroup
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:layout_centerVertical="true"
 android:orientation="horizontal">
 <RadioButton android:id="@+id/rb_left"
  android:text="Left"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:checked="true"
  android:layout_weight="1"
  android:button="@null"
  android:background="@drawable/back" />
 <RadioButton android:id="@+id/rb_center"
  android:text="Center"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_weight="1"
  android:button="@null"
  android:background="@drawable/back" />
 <RadioButton android:id="@+id/rb_right"
  android:text="Right"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_weight="1"
  android:button="@null"
  android:background="@drawable/back" />
</RadioGroup>
</LinearLayout>

※android:button="@null"とすることで、ラジオボタンのチェックするボタンが表示されなくなり、自分で設定する背景であるandroid:background="@drawable/back"のみが表示されるようになります。

【back.xml】

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

※falseの場合には非選択状態の背景を、trueの場合には選択状態の背景を設定します。