Androidでのカスタムラジオボタンの追加

131

私はアンドロイドの通常のボタンのラジオボタン効果を得ようとしています

下にシンプルなAndroidラジオボタンがあります

ここに画像の説明を入力してください

このコードは ::

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <RadioGroup
        android:id="@+id/radioGroup1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true" >

        <RadioButton
            android:id="@+id/radio0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="RadioButton1" />

        <RadioButton
            android:id="@+id/radio1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="RadioButton2" />

        <RadioButton
            android:id="@+id/radio2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="RadioButton3" />
    </RadioGroup>


</RelativeLayout>

以下のようにカスタマイズする方法::

ここに画像の説明を入力してください

よろしくお願いします！

[編集]回答の1つのコードを使用する

ここに画像の説明を入力してください

しかし、ボタン名は、それを削除する方法を選択するオプションによって陰に隠れていますか？

さらに{EDIT}個の変更

Finallの変更は、少なくとも3つのラジオボタンからどのボタンを選択したかを知っている必要があります...以下のように取得できますか？

ここに画像の説明を入力してください

android  xml 
— Devrath
ソース
4
4年後LOL -あなたがこれは役に立つかもしれないcrosp.net/blog/android/...
— 誰かのどこか
1
@SomeoneSomewhere .....ははは...ありがとう...便利です:) :)
— Devrath 2018

回答:

246

画像を参照する背景ドローアブルまたはセレクター（以下のような）を追加し、ボタンを透明にします。

<RadioButton
    android:id="@+id/radio0"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@null"
    android:button="@drawable/yourbuttonbackground"
    android:checked="true"
    android:text="RadioButton1" />

チェックしたときにラジオボタンに別のリソースを持たせたい場合は、セレクターの背景ドローアブルを作成します。

res / drawable / yourbuttonbackground.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:drawable="@drawable/b"
        android:state_checked="true"
        android:state_pressed="true" />
    <item
        android:drawable="@drawable/a"
        android:state_pressed="true" />
    <item
        android:drawable="@drawable/a"
        android:state_checked="true" />
    <item
        android:drawable="@drawable/b" />
</selector>

上記セレクタでは、我々は2ドローアブルを参照し、aそしてb、ここではそれらを作成する方法は次のとおりです。

res / drawable / a.xml- 選択された状態

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <corners
        android:radius="5dp" />
    <solid
        android:color="#fff" />
    <stroke
        android:width="2dp"
        android:color="#53aade" />
</shape>

res / drawable / b.xml- 通常の状態

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <corners
        android:radius="5dp" />
    <solid
        android:color="#fff" />
    <stroke
        android:width="2dp"
        android:color="#555555" />
</shape>

ここでドローアブルの詳細：http : //developer.android.com/guide/topics/resources/drawable-resource.html

— エヴァン・バシル
ソース
1
ねえ、私は機能を完成させてくれてありがとう...しかし、ボタン名は選択オプションによって上書きされています.....それを削除する方法...機能をそのまま維持....すべて私がiとして達成しようとしている私の質問に示した...それ以上の指示！[注::更新された質問をご覧ください]
— Devrath
2
@Unicorn追加android:button="@android:color/transparent"して削除します。
— Evan Bashir
3
@ユニコーンはい、わかりました。あなたがする必要があるのは、私の答えの中で述べたようにセレクタードローアブルを作成することだけです。2つのドローアブルを作成します。1つは通常のボタンスタイル用、もう1つは押されたボタンスタイル用です。これらのドローアブルのコードで回答を更新します。
— Evan Bashir
1
テキストを重ねずに合わせるには、背景ではなくボタンをドローアブルに設定し、テキストに合わせてストレッチポイントとコンテンツ領域が示された9パッチであることを確認します。
— ランスナネック2014
3
RadioButtonの通常の動作、チェックボックスを探していますか？
— Vincent D.
49

承認済みの回答を更新し、不要なものを削除しました。

以下の画像のXMLを作成しました。

ここに画像の説明を入力してください

のXMLコードは次のRadioButtonようになります。

<RadioGroup
        android:id="@+id/daily_weekly_button_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:gravity="center_horizontal"
        android:orientation="horizontal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">


        <RadioButton
            android:id="@+id/radio0"
            android:layout_width="@dimen/_80sdp"
            android:gravity="center"
            android:layout_height="wrap_content"
            android:background="@drawable/radio_flat_selector"
            android:button="@android:color/transparent"
            android:checked="true"
            android:paddingLeft="@dimen/_16sdp"
            android:paddingTop="@dimen/_3sdp"
            android:paddingRight="@dimen/_16sdp"
            android:paddingBottom="@dimen/_3sdp"
            android:text="Daily"
            android:textColor="@color/radio_flat_text_selector" />

        <RadioButton
            android:id="@+id/radio1"
            android:gravity="center"
            android:layout_width="@dimen/_80sdp"
            android:layout_height="wrap_content"
            android:background="@drawable/radio_flat_selector"
            android:button="@android:color/transparent"
            android:paddingLeft="@dimen/_16sdp"
            android:paddingTop="@dimen/_3sdp"
            android:paddingRight="@dimen/_16sdp"
            android:paddingBottom="@dimen/_3sdp"
            android:text="Weekly"
            android:textColor="@color/radio_flat_text_selector" />

</RadioGroup>

radio_flat_selector.xml 背景セレクター：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/radio_flat_selected" android:state_checked="true" />
    <item android:drawable="@drawable/radio_flat_regular" />
</selector>

radio_flat_selected.xml 選択したボタン：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:radius="1dp"
        />
    <solid android:color="@color/colorAccent" />
    <stroke
        android:width="1dp"
        android:color="@color/colorAccent" />
</shape>

radio_flat_regular.xml 通常のセレクターの場合：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="1dp" />
    <solid android:color="#fff" />
    <stroke
        android:width="1dp"
        android:color="@color/colorAccent" />
</shape>

上記の3つのファイルコードはすべてdrawable/フォルダ内にあります。

次にText、テキストの色をそれに応じて変更するためのカラーセレクターも必要です。

radio_flat_text_selector.xml テキストカラーセレクター

（color/このファイルにはフォルダを使用します。）

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

注：このタイプの解決策については多くの回答を参考にしましたが、良い解決策が見つからなかったので作成しました。

お役に立てれば幸いです。

ありがとう。

— プラティックブタニ
ソース
私はこれで本当に欲しいものに近づきますが、アイテム間のコーナー半径もわかります。ボタンが3つあるときに、これが表示されます。半径がグループ自体にのみ適用されることを確認する方法はありますか？imgur.com/mP8dtKR
— AdamMc331
1
@ AdamMc331、3つのセレクターを作成する必要があります。1つは行の最初のボタン用、もう1つは中央のセレクター用、もう1つは最後のセレクター用で、調整して、丸い角を1つだけ丸めることができます。エッジ、および<layer-list>内の<item> thats内で<shape>をラップする場合、それらの1つをネガティブマーキングで非表示にする
— Benny
color /フォルダーを作成するにはどうすればよいですか？助けてもらえますか
— Kamrujjaman Joy
ええ、それはうまくいきます。問題が発生した場合はお知らせください。
— Pratik Butani
私はアンドロイド4を試して、Appcompatアクティビティでこのibb.co/jyHVXHSを取得しましたが、アクティビティで拡張するとうまく機能します
— kartoos khan
42

Evanの回答と同じXMLファイル形式を使用しますが、フォーマットに必要なのは1つの描画可能なファイルだけです。

<RadioButton
    android:id="@+id/radio0"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/custom_button_background"
    android:button="@android:color/transparent"
    android:checked="true"
    android:text="RadioButton1" />

そして、あなたの個別のドローアブルファイル：

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

    <item android:state_pressed="true" >
         <shape android:shape="rectangle" >
             <corners android:radius="3dip" />
             <stroke android:width="1dip" android:color="#333333" />
             <solid android:color="#cccccc" />            
         </shape>
    </item>

    <item android:state_checked="true">
         <shape android:shape="rectangle" >
             <corners android:radius="3dip" />
             <stroke android:width="1dip" android:color="#333333" />
             <solid android:color="#cccccc" /> 
         </shape>
    </item>  

    <item>
         <shape android:shape="rectangle"  >
             <corners android:radius="3dip" />
             <stroke android:width="1dip" android:color="#cccccc" />
             <solid android:color="#ffffff" />            
         </shape>
    </item>
</selector>
— セスリン
ソース
1
このおかげで...それは参考になります。まだ試してみています。ドローアブルの名前であるcustomButtonBackgroundに大文字を含めることはできません-少なくともAndroid Studioはそれを教えてくれます。
— LarsH 2015年
10

受け入れられた答えのようなRadioButtonの設定android:backgroundとandroid:buttonは、私にとってはうまくいきませんでした。ドローアブルイメージはandroid:button、ラジオボタンテキストの背景として（透明に設定されていたとしても）背景として表示されていました。ここに画像の説明を入力してください

android:background="@drawable/radiobuttonstyle"
    android:button="@android:color/transparent"

そのため、カスタムの描画可能なradiobuttonstyle.xmlとしてradiobuttonを指定しました

<RadioButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:checked="true"
    android:text="Maintenance"
    android:id="@+id/radioButton1"
    android:button="@drawable/radiobuttonstyle"
      />

そしてradiobuttonstyle.xmlは次のとおりです

<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_checked="true" android:drawable="@drawable/ic_radio_checked"></item>
  <item android:state_checked="false" android:drawable="@drawable/ic_radio_unchecked"></item>
</selector>

この後、カスタムボタンスタイルのラジオボタンが機能しました。

ここに画像の説明を入力してください

— アンヌ
ソース
8

「CompoundButton」クラスの「Button」属性に、XMLドローアブルパス（my_checkbox）を入力する必要があります。XMLドローアブルには、次のものが必要です。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_checked="false" android:drawable="@drawable/checkbox_not_checked" />
     <item android:state_checked="true" android:drawable="@drawable/checkbox_checked" />
     <item android:drawable="@drawable/checkbox_not_checked" /> <!-- default -->
</selector>

my_checkboxをチェックボックスドローアブルのファイル名に置き換え、checkbox_not_checkedはチェックされていない場合のチェックボックスであり、チェックボックスがチェックされている場合はイメージに設定されているPNGドローアブルに置き換えることを忘れないでください。

サイズについては、レイアウトパラメータを直接更新します。

— Flchaux
ソース
1
OPはボタン内のテキストを望んでいると思います。それを行う唯一の方法は、ドローアブルをandroid:backgroundvsに適用することだと思いますandroid:button。次に、android:buttonを透明として宣言します。これにより、テキストをボタンの内側に配置できます。
— Evan Bashir
5

デフォルトのラジオボタンを非表示にするには、ボタンを透明にするのではなく、ボタンを削除することをお勧めします。すべての視覚的なフィードバックは、描画可能な背景によって処理されるためです。

android:button="@null"

また、いくつかのラジオボタンがあるため、スタイルを使用することをお勧めします。

<RadioButton style="@style/RadioButtonStyle" ... />

<style name="RadioButtonStyle" parent="@android:style/Widget.CompoundButton">
    <item name="android:background">@drawable/customButtonBackground</item>
    <item name="android:button">@null</item>
</style>

Seslyn customButtonBackgroundドローアブルも必要になります。

— McX
ソース
4

カスタムドローアブルを追加する最良の方法は次のとおりです。

 <RadioButton
                                android:id="@+id/radiocar"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:background="@android:color/transparent"
                                android:button="@drawable/yourbuttonbackground"
                                android:checked="true"
                                android:drawableRight="@mipmap/car"
                                android:paddingLeft="5dp"
                                android:paddingRight="5dp"
                                android:text="yourtexthere"/>

カスタムドローアブルによるシャドウオーバーレイはここで削除されます。

— アビラシャシャルマ
ソース
@Abhilashaありがとうございます。
— varotariya vajsi 2016年
私もこのオプションを選択しましたbackground。背景を設定した場合、RadioButtonにテキストを追加できず、独自のTextViewを配置する必要があります
— voghDev
3

簡単な方法はこれを試してください

  1. ドローアブルフォルダーに新しいレイアウトを作成し、custom_radiobuttonという名前を付けます（名前を変更することもできます）。

     <?xml version="1.0" encoding="utf-8"?>
  <selector xmlns:android="http://schemas.android.com/apk/res/android" >
 <item android:state_checked="false" 
android:drawable="@drawable/your_radio_off_image_name" />
 <item android:state_checked="true" 
android:drawable="@drawable/your_radio_on_image_name" />
</selector>

  2. これをレイアウトアクティビティで使用します

    <RadioButton
 android:id="@+id/radiobutton"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:button="@drawable/custom_radiobutton"/>
— スニル
ソース
1

以下のコードは、カスタムラジオボタンの例です。以下の手順に従ってください。

  1. Xmlファイル。

                        <FrameLayout
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="0.5">


                        <TextView
                            android:id="@+id/text_gender"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="left|center_vertical"
                            android:gravity="center"
                            android:text="@string/gender"
                            android:textColor="#263238"
                            android:textSize="15sp"
                            android:textStyle="normal"

                            />

                        <TextView
                            android:id="@+id/text_male"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:layout_marginLeft="10dp"
                            android:gravity="center"
                            android:text="@string/male"
                            android:textColor="#263238"
                            android:textSize="15sp"
                            android:textStyle="normal"/>

                        <RadioButton
                            android:id="@+id/radio_Male"
                            android:layout_width="28dp"
                            android:layout_height="28dp"
                            android:layout_gravity="right|center_vertical"
                            android:layout_marginRight="4dp"
                            android:button="@drawable/custom_radio_button"
                            android:checked="true"
                            android:text=""
                            android:onClick="onButtonClicked"
                            android:textSize="15sp"
                            android:textStyle="normal"

                            />
                    </FrameLayout>

                    <FrameLayout
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="0.6">

                        <RadioButton
                            android:id="@+id/radio_Female"
                            android:layout_width="28dp"
                            android:layout_height="28dp"
                            android:layout_gravity="right|center_vertical"
                            android:layout_marginLeft="10dp"
                            android:layout_marginRight="0dp"
                            android:button="@drawable/custom_female_button"
                            android:text=""
                            android:onClick="onButtonClicked"
                            android:textSize="15sp"
                            android:textStyle="normal"/>

                        <TextView
                            android:id="@+id/text_female"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="left|center_vertical"
                            android:gravity="center"
                            android:text="@string/female"
                            android:textColor="#263238"
                            android:textSize="15sp"
                            android:textStyle="normal"/>

                        <RadioButton
                            android:id="@+id/radio_Other"
                            android:layout_width="28dp"
                            android:layout_height="28dp"
                            android:layout_gravity="center_horizontal|bottom"
                            android:layout_marginRight="10dp"
                            android:button="@drawable/custom_other_button"
                            android:text=""
                            android:onClick="onButtonClicked"
                            android:textSize="15sp"
                            android:textStyle="normal"/>

                        <TextView
                            android:id="@+id/text_other"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="right|center_vertical"
                            android:layout_marginRight="34dp"
                            android:gravity="center"
                            android:text="@string/other"
                            android:textColor="#263238"
                            android:textSize="15sp"
                            android:textStyle="normal"/>
                    </FrameLayout>
                </LinearLayout>

    2.ラジオボタンのカスタムxmlを追加する

    2.1。その他のドローアブル

    custom_other_button.xml

    <item android:state_checked="true" android:drawable="@drawable/select_radio_other" />
<item android:state_checked="false" android:drawable="@drawable/default_radio" />

    2.2。女性のドローアブル

    custom_female_button.xml

    <item android:state_checked="true" android:drawable="@drawable/select_radio_female" />
<item android:state_checked="false" android:drawable="@drawable/default_radio" />

    2.3。男性ドローアブル

    custom_radio_button.xml

    <item android:state_checked="true" android:drawable="@drawable/select_radio_male" />
<item android:state_checked="false" android:drawable="@drawable/default_radio" />

    1. 出力： これは出力画面です
— サチンパンガレ
ソース
0

これは遅れた答えだと思いますが、developer.android.comを見ると、Toggleボタンがあなたの状況に理想的だと思われます。

トグルボタンの画像 http://developer.android.com/guide/topics/ui/controls/togglebutton.html

もちろん、背景のドローアブルを作成するための他の提案を使用して、必要なカスタムルックを取得することもできます。

<ToggleButton 
    android:id="@+id/togglebutton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/custom_button_background"
    android:textOn="On"
    android:textOff="Off"
    />

最終的な編集を行い、ボタンの周囲に「ハロー」効果を持たせたい場合は、別のカスタムセレクターを使用してそれを行うことができます。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" > <!-- selected -->
        <shape>
            <solid
                android:color="@android:color/white" />
            <stroke
                android:width="3px"
                android:color="@android:color/holo_blue_bright" />
            <corners
                android:radius="5dp" />
        </shape>
    </item>
    <item> <!-- default -->
        <shape>
            <solid
                android:color="@android:color/white" />
            <stroke
                android:width="1px"
                android:color="@android:color/darker_gray" />
            <corners
                android:radius="5dp" />
        </shape>
    </item> 
</selector>
— アルチュリア
ソース
これは、1つのボタンがチェックされているときに他のボタンがチェックされていないという点で、ラジオボタンの動作を引き続き許可しますか？
— LarsH 2015年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.