Tôi đang cố gắng để có được hiệu ứng radiobutton cho các nút thông thường trong Android

Tôi có một nút radio android đơn giản bên dưới

Mã cho điều này là ::

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>

Cách tùy chỉnh nó như sau ::

Cảm ơn !

[EDIT] sử dụng mã từ một trong các câu trả lời

Nhưng tên nút bị lu mờ bởi tùy chọn chọn làm thế nào để loại bỏ nó?

{EDIT} thay đổi nhiều hơn

Thay đổi Finall ít nhất tôi nên biết nút nào tôi đã chọn trong số ba nút radio .... có thể nhận được như dưới đây không?

Thêm một hình nền có thể vẽ tham chiếu đến hình ảnh hoặc bộ chọn (như bên dưới) và làm cho nút trong suốt:

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

Nếu bạn muốn các nút radio của mình có tài nguyên khác khi được chọn, hãy tạo một nền chọn có thể vẽ được:

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>

Trong bộ chọn ở trên, chúng tôi tham chiếu hai bản vẽ avà bđây là cách chúng tôi tạo chúng:

res / drawable / a.xml - Trạng thái được chọn

<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 - Trạng thái thông thường

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

Tìm hiểu thêm về drawables tại đây: http://developer.android.com/guide/topics/resource/drawable-resource.html

Tôi đã cập nhật câu trả lời được chấp nhận và loại bỏ những thứ không cần thiết.

Tôi đã tạo XML cho hình ảnh sau đây.

Mã XML của bạn RadioButtonsẽ là:

<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 cho bộ chọn nền:

<?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 cho nút đã chọn:

<?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 cho bộ chọn thông thường:

<?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>

Tất cả 3 mã tập tin ở trên sẽ nằm trong drawable/thư mục.

Bây giờ chúng ta cũng cần TextColor Selector để thay đổi màu văn bản cho phù hợp.

radio_flat_text_selector.xml cho bộ chọn màu văn bản

(Sử dụng color/thư mục cho tệp này.)

<?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>

Lưu ý: Tôi đã giới thiệu nhiều câu trả lời cho loại giải pháp này nhưng không tìm thấy giải pháp tốt nên tôi đã thực hiện.

Hy vọng nó sẽ hữu ích cho bạn.

Cảm ơn.

Sử dụng cùng định dạng tệp XML từ câu trả lời của Evan, nhưng một tệp có thể vẽ là tất cả những gì bạn cần để định dạng.

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

Và tập tin có thể vẽ riêng của bạn:

<?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>

Cài đặt android:backgroundvà android:buttoncủa RadioButton như câu trả lời được chấp nhận không phù hợp với tôi. Hình ảnh có thể vẽ đang được hiển thị dưới dạng nền ( android:buttonsự kiện đang được đặt thành trong suốt) thành văn bản nút radio dưới dạng

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

vì vậy đã cho radiobutton là radiobuttonstyle.xml có thể vẽ tùy chỉnh

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

và radiobuttonstyle.xml như sau

<?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>

và sau khi radiobutton này với kiểu nút tùy chỉnh làm việc.

Bạn phải điền thuộc tính "Nút" của lớp "CompoundButton" bằng đường dẫn có thể vẽ XML ( my_checkbox ). Trong XML drawable, bạn phải có:

<?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>

Đừng quên thay thế my_checkbox bằng tên tệp của hộp kiểm có thể vẽ được, hộp kiểm_not_checked có thể vẽ PNG là hộp kiểm của bạn khi nó không được chọn và hộp kiểm_kiểm tra với hình ảnh của bạn khi nó được chọn.

Đối với kích thước, trực tiếp cập nhật các tham số bố trí.

Để ẩn nút radio mặc định, tôi khuyên bạn nên xóa nút thay vì làm trong suốt vì tất cả phản hồi trực quan được xử lý bởi nền có thể vẽ:

android:button="@null"

Ngoài ra, sẽ tốt hơn nếu sử dụng các kiểu vì có một số nút radio:

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

Bạn cũng sẽ cần đến Seslyn customButtonBackground drawable .

Cách tốt nhất để thêm drawable tùy chỉnh là:

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

Lớp phủ bóng bằng cách vẽ tùy chỉnh được loại bỏ ở đây.

Cách đơn giản thử cái này

1. Tạo một bố cục mới trong thư mục drawable và đặt tên là custom_radiobutton (Bạn cũng có thể đổi tên)

    <?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. Sử dụng điều này trong hoạt động bố trí của bạn

   <RadioButton
    android:id="@+id/radiobutton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:button="@drawable/custom_radiobutton"/>

Dưới đây mã là ví dụ về nút radio tùy chỉnh. làm theo các bước dưới đây ..

1. Tập tin 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. thêm xml tùy chỉnh cho các nút radio

   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_fbang_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. nam có thể vẽ

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

   3. Đầu ra: đây là màn hình đầu ra

Tôi nhận ra đây là một câu trả lời muộn màng, nhưng nhìn qua developer.android.com, có vẻ như nút Toggle sẽ là lý tưởng cho tình huống của bạn.

http://developer.android.com/guide/topics/ui/controls/togglebutton.html

Và tất nhiên bạn vẫn có thể sử dụng các đề xuất khác để có một hình nền có thể vẽ được để có được giao diện tùy chỉnh mà bạn muốn.

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

Bây giờ nếu bạn muốn thực hiện chỉnh sửa cuối cùng và có hiệu ứng "hào quang" xung quanh các nút của mình, bạn có thể sử dụng một bộ chọn tùy chỉnh khác để làm việc đó.

<?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>