androidでRadioGroupに画像を貼り付けてカスタムする方法

かなり大変でした。
泣きながら作りました。

下記が完成例です。
（左から、ナイフ、フォーク、スプーンのフリー素材を使いました、横長すぎますが間に合わせの画像を貼り付けただけなので許してください）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/367893/462c879d-556d-254e-496b-50d25f01df19.png)


iOS開発で言うところのUISegmentみたいなものです。
画像を貼り付けてカスタムする方法が全然出てこなかったので。

では早速

1.UISegmentを置きたい場所にRadioGroupを配置する


```xml:fragment_main.xml
<RadioGroup
    android:id="@+id/uisegment"
    android:layout_width="match_parent"
    android:layout_height="36dp"
    android:layout_marginHorizontal="40dp"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:checkedButton="@+id/left"
    android:orientation="horizontal">

    <RadioButton
        android:id="@+id/left"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:background="@drawable/segmented_left"
        android:button="@null"
        android:layout_weight="1" />

    <RadioButton
        android:id="@+id/center"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:background="@drawable/segmented_center"
        android:button="@null"
        android:layout_weight="1"/>

    <RadioButton
        android:id="@+id/right"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:background="@drawable/segmented_right"
        android:button="@null"
        android:layout_weight="1"/>
</RadioGroup>
```
RadioButtonに画像を設定する部分ですが、
android:background="@drawable/segmented_left"
ここでやってます。
<font color="Red">直接、素材をここに設定しないこと</font>がとても重要だと思いました。（小並感）
（drawableの
segmented_left
segmented_center
segmented_right
に関してはこれから作っていきます。見てわかる通り、segmentの左、中央、右とバラバラに作っています）

また、
android:button="@null"
ここでデフォルトのボタンを消してます

2.左のセグメントを作る
2.1　セグメントが選択されたとき（タップされたとき）とそうでないときで画像を出し分ける
（色を変える必要がありますので）

```xml:segmented_left.xml

<?xml version="1.0" encoding="UTF-8"?>

    <selector xmlns:android="http://schemas.android.com/apk/res/android">

        <!-- 選択時 -->
        <item android:drawable="@drawable/segmented_left_checked" android:state_checked="true"/>

        <!-- 非選択時 -->
        <item android:drawable="@drawable/segmented_left_normal"/>

    </selector>

```

次に作っていくのは
segmentedd_left_normalと、segmentedd_left_checkedですね。

2.2 選択時のセグメントの画像を作る

```xml:segmented_left_checked.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- ベタ塗り -->
    <item>
        <shape android:shape="rectangle" >
            <corners
                android:bottomLeftRadius="20dp"
                android:topLeftRadius="20dp" />

            <solid android:color="@color/segmented_color" />
        </shape>
    </item>

    <item
        android:state_checked="true"
        android:top="10dp"
        android:bottom="10dp"
        android:left="15dp"
        android:right="15dp"
        android:width="60dp"
        android:height="15dp"
        android:gravity="center">
        <bitmap
            android:src="@drawable/nife"
            android:tint="#ffffff" />
    </item>

    <!-- ボーダー -->
    <item>
        <shape android:shape="rectangle" >
            <corners
                android:bottomLeftRadius="20dp"
                android:topLeftRadius="20dp" />

            <stroke
                android:width="0.5dp"
                android:color="@color/segmented_around_color" />
        </shape>
    </item>

</layer-list>
```

layer-listを使ってitemを三つ重ねています。
最初のアイテムは、セグメントの下地です。
二番目のアイテムでは、元となる画像を初めて引っ張ってきてます。
bitmapの中で
android:tint="ffffff"と元画像の背景色を指定しているのですが、これがハマりどころでした。
全然背景の色の指定ができなかったです。



2.3 非選択時のセグメントを作る
上のコードとcolorの指定が違うだけですが、一応、非選択時のxmlも載せておきます。

```xml:segmented_left_normal.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- ベタ塗り -->
    <item>
        <shape android:shape="rectangle" >
            <corners
                android:bottomLeftRadius="20dp"
                android:topLeftRadius="20dp" />

            <solid android:color="#ffffff" />
        </shape>
    </item>

    <item
        android:state_checked="true"
        android:top="10dp"
        android:bottom="10dp"
        android:left="15dp"
        android:right="15dp"
        android:width="60dp"
        android:height="15dp"
        android:gravity="center">
        <bitmap
            android:src="@drawable/nife"
            android:tint="@color/segmented_color" />
    </item>

    <!-- ボーダー -->
    <item>
        <shape android:shape="rectangle" >
            <corners
                android:bottomLeftRadius="20dp"
                android:topLeftRadius="20dp" />

            <stroke
                android:width="0.5dp"
                android:color="@color/segmented_around_color" />
        </shape>
    </item>

</layer-list>

```

segmented_center, segmented_rightも同じ要領で作れます。
ただUISegmentをカスタムするというだけのことでxmlを９個作る必要があるの、怖いと思いました。