お手軽なボタン風ラジオボタン(RadioButton)を作成する

画面内容をタブで切り替えるとき等、どれか１つだけボタンで選ばせる処理を入れるのは色々と面倒ですが、ラジオボタンに設定を追加すると楽でそこそこオシャレに作成することができます。

作成方法は４つのxmlをdrawableに追加して、backgroundとtextcolorに設定するだけ。
android:button="@null"で、ラジオボタンの◎みたいのが消えるところもポイントです。

・追加するファイル
btn_radio_left.xml
btn_radio_right.xml
btn_radio_center.xml
btn_radio_textcolor.xml

acitivity_main.xml

    <RadioGroup
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:id="@+id/RadioGroupB"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:orientation="horizontal">
        <RadioButton
            android:text="日本"
            android:id="@+id/RadioButtonB1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/btn_radio_left"
            android:textColor="@drawable/btn_radio_textcolor"
            android:layout_weight="1"
            android:button="@null"
            android:gravity="center">
        </RadioButton>
        <RadioButton
            android:text="ブラジル"
            android:id="@+id/RadioButtonB2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/btn_radio_center"
            android:textColor="@drawable/btn_radio_textcolor"
            android:layout_weight="1"
            android:button="@null"
            android:gravity="center">
        </RadioButton>
        <RadioButton
            android:text="フランス"
            android:id="@+id/RadioButtonB3"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/btn_radio_center"
            android:textColor="@drawable/btn_radio_textcolor"
            android:layout_weight="1"
            android:button="@null"
            android:gravity="center">
        </RadioButton>
        <RadioButton
            android:text="アメリカ"
            android:id="@+id/RadioButtonB4"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/btn_radio_right"
            android:textColor="@drawable/btn_radio_textcolor"
            android:layout_weight="1"
            android:button="@null"
            android:gravity="center">
        </RadioButton>
    </RadioGroup>

btn_radio_left.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 選択時の設定 -->
    <item android:state_checked="true">
        <shape android:shape="rectangle">
            <!-- 背景色 -->
            <solid android:color="@color/purple" />
            <!-- 枠色 -->
            <stroke
                android:width="1dp"
                android:color="@color/gray" />
            <!-- 角度 -->
            <corners
                android:bottomLeftRadius="4dp"
                android:topLeftRadius="4dp" />
            <!-- 余白 -->
            <padding
                android:bottom="4dp"
                android:right="4dp"
                android:left="4dp"
                android:top="4dp" />
            <!-- グラデーション -->
            <!--
            <gradient
                android:angle="90"
                android:endColor="#ffffff"
                android:startColor="#bbbbbb" />
             -->
        </shape>
    </item>

    <!-- 非選択時の設定 -->
    <item android:state_checked="false">
        <shape android:shape="rectangle">
            <!-- 背景色 -->
            <solid android:color="@color/white" />
            <!-- 枠色 -->
            <stroke
                android:width="1dp"
                android:color="@color/gray" />
            <!-- 角度 -->
            <corners
                android:bottomLeftRadius="4dp"
                android:topLeftRadius="4dp" />
            <!-- 余白 -->
            <padding
                android:bottom="4dp"
                android:right="4dp"
                android:left="4dp"
                android:top="4dp" />
            <!-- グラデーション -->
            <!--
            <gradient
                android:angle="90"
                android:endColor="#ffffff"
                android:startColor="#bbbbbb" />
              -->
        </shape>
    </item>
</selector>

btn_radio_right.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 選択時の設定 -->
    <item android:state_checked="true">
        <shape android:shape="rectangle">
            <!-- 背景色 -->
            <solid android:color="@color/purple" />
            <!-- 枠色 -->
            <stroke
                android:width="1dp"
                android:color="@color/gray" />
            <!-- 角度 -->
            <corners
                android:bottomRightRadius="4dp"
                android:topRightRadius="4dp" />
            <!-- 余白 -->
            <padding
                android:bottom="4dp"
                android:right="4dp"
                android:left="4dp"
                android:top="4dp" />
            <!-- グラデーション -->
            <!--
            <gradient
                android:angle="90"
                android:endColor="#ffffff"
                android:startColor="#bbbbbb" />
             -->
        </shape>
    </item>

    <item android:state_checked="false">
        <shape android:shape="rectangle">
            <!-- 背景色 -->
            <solid android:color="@color/white" />
            <!-- 枠色 -->
            <stroke
                android:width="1dp"
                android:color="@color/gray" />
            <!-- 角度 -->
            <corners
                android:bottomRightRadius="4dp"
                android:topRightRadius="4dp" />
            <!-- 余白 -->
            <padding
                android:bottom="4dp"
                android:right="4dp"
                android:left="4dp"
                android:top="4dp" />
            <!-- グラデーション -->
            <!--
            <gradient
                android:angle="90"
                android:endColor="#ffffff"
                android:startColor="#bbbbbb" />
             -->
        </shape>
    </item>
</selector>

btn_radio_center.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <shape android:shape="rectangle">
            <!-- 背景色 -->
            <solid android:color="@color/purple" />
            <!-- 枠色 -->
            <stroke
                android:width="1dp"
                android:color="@color/gray" />
            <!-- 余白 -->
            <padding
                android:bottom="4dp"
                android:right="4dp"
                android:left="4dp"
                android:top="4dp" />
            <!-- グラデーション -->
            <!--
            <gradient
                android:angle="90"
                android:endColor="#ffffff"
                android:startColor="#bbbbbb" />
              -->
        </shape>
    </item>

    <item android:state_checked="false">
        <shape android:shape="rectangle">
            <!-- 背景色 -->
            <solid android:color="@color/white" />
            <!-- 枠色 -->
            <stroke
                android:width="1dp"
                android:color="@color/gray" />
            <!-- 余白 -->
            <padding
                android:bottom="4dp"
                android:right="4dp"
                android:left="4dp"
                android:top="4dp" />
            <!-- グラデーション -->
            <!--
            <gradient
                android:angle="90"
                android:endColor="#ffffff"
                android:startColor="#bbbbbb" />
              -->
        </shape>
    </item>
</selector>

btn_radio_textcolor.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 選択時の文字色 -->
    <item android:state_checked="true" android:color="@color/white" />
    <!-- 非選択時の文字色 -->
    <item android:state_checked="false" android:color="@color/light_purple" />
</selector>

MainActivity.java

        RadioGroup radioGroup = (RadioGroup) findViewById(R.id.RadioGroupB);
        RadioButton radioButton2 = (RadioButton) findViewById(R.id.RadioButtonB2);

        // ラジオグループのチェック状態が変更された時に呼び出されるコールバックリスナーを登録します
        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                RadioButton radioButton = (RadioButton) findViewById(checkedId);
                Toast.makeText(MainActivity.this,"onCheckedChanged():" + radioButton.getText(),Toast.LENGTH_SHORT).show(););
            }
        });

        // 指定した ID のラジオボタンをチェックします
        radioButton2.setChecked(true);

グラデーションを使うとこんなラジオボタンも作成可能。
（グラデーションはangleによって縦にも横にもできます。）

凝ったものにする場合は、画像を設定したほうがよいかもしれません。