android - Androidでカスタムラジオボタンを追加する

Question

Androidの通常のボタンのラジオボタン効果を取得しようとしています

下にシンプルな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つからのコードを使用

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

---

{編集} さらに変更

最終的な変更は、少なくとも 3 つのラジオ ボタンからどのボタンを選択したかを知る必要があります。以下のようにすることは可能ですか?

Answer 1

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

<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

Answer 2

Evan's answer と同じ 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>

Answer 3

"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をチェックボックス drawable のファイル名に置き換えることを忘れないでください。checkbox_not_checked を、チェックされていない場合はチェックボックスである PNG ドローアブルに置き換え、checkbox_checkedがチェックされている場合はイメージに置き換えてください。

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

Answer 4

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

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 ドローアブルも必要です。

Answer 5

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

<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"/>

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

Answer 6

カスタムボタンの設定が機能しないためにここに来た人はいますか? RadioButton が機能しないことに気付きましたが、androidx.appcompat.widget.AppCompatRadioButton は機能しました。

このようなラジオボタン

 <androidx.appcompat.widget.AppCompatRadioButton
            android:id="@+id/your_id"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:button="@drawable/radio_button_selector"
            android:text="Your choice" />

このようなセレクターで

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

動作します。

Answer 7

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

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>
   

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

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

custom_other_button.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/select_radio_other" />
    <item android:state_checked="false" android:drawable="@drawable/default_radio" />

</selector>

2.2.女性のドローアブル

custom_female_button.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/select_radio_female" />
    <item android:state_checked="false" android:drawable="@drawable/default_radio" />

</selector>

2.3. 男性ドローアブル

custom_radio_button.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/select_radio_male" />
    <item android:state_checked="false" android:drawable="@drawable/default_radio" />
</selector>

3. 出力: これは出力画面です

Answer 8

これは遅れた答えだと思いますが、developer.android.com を見ると、トグル ボタンがあなたの状況に最適なようです。

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>