LoginSignup
4
2

More than 5 years have passed since last update.

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

Posted at

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

下記が完成例です。
(左から、ナイフ、フォーク、スプーンのフリー素材を使いました、横長すぎますが間に合わせの画像を貼り付けただけなので許してください)
image.png

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

では早速

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

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"
ここでやってます。
直接、素材をここに設定しないことがとても重要だと思いました。(小並感)
(drawableの
segmented_left
segmented_center
segmented_right
に関してはこれから作っていきます。見てわかる通り、segmentの左、中央、右とバラバラに作っています)

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

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

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 選択時のセグメントの画像を作る

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も載せておきます。

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を9個作る必要があるの、怖いと思いました。

4
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2