안드로이드에 커스텀 라디오 버튼 추가하기

안드로이드에 커스텀 라디오 버튼 추가하기

---

안드로이드의 일반 버튼에 라디오 버튼 효과를 얻으려고합니다.

아래에 간단한 안드로이드 라디오 버튼이 있습니다.

이 코드는 ::

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>

---

아래와 같이 사용자 정의하는 방법 ::

감사합니다 !

[편집] 답변 중 하나의 코드를 사용하여

그러나 버튼 이름은 선택 옵션으로 인해 그림자가 제거됩니다.

---

더 많은 변경 사항 {EDIT} 개

마지막 변경 사항은 적어도 세 개의 라디오 버튼 중 어떤 버튼을 선택했는지 알아야합니다 .... 아래와 같이 얻을 수 있습니까?

---

이미지 또는 선택기를 참조하는 배경 드로어 블을 추가하고 (아래와 같이) 버튼을 투명하게 만듭니다.

<RadioButton
    android:id="@+id/radio0"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/yourbuttonbackground"
    android:button="@android:color/transparent"
    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>

위의 선택에서 우리는 두 개의 드로어 블을 참조, 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을 참조 하십시오.

---

Evan의 답변과 동일한 XML 파일 형식을 사용하지만 형식화에 필요한 드로어 블 파일 하나만 있으면됩니다.

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

---

수락 된 답변을 업데이트하고 불필요한 것을 제거했습니다.

다음 이미지를 위해 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>

참고 :이 유형의 솔루션에 대한 많은 답변을 참조했지만 좋은 해결책을 찾지 못했기 때문에 만들었습니다.

그것이 당신에게 도움이되기를 바랍니다.

감사.

---

"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의 파일 이름 으로 바꾸고 , PNG drawable로 체크 박스를 선택 하고 check_not_checked 는 체크 박스입니다. 체크 되지 않을 때 체크 박스 이미지로 선택 되어 체크 표시됩니다.

크기의 경우 레이아웃 매개 변수를 직접 업데이트하십시오.

---

허용 된 답변과 같은 RadioButton을 설정 android:background하고 android:button작동하지 않았습니다. 드로어 블 이미지는 android:button라디오 버튼 텍스트에 배경으로 ( 투명하게 설정되어 있어도) 표시되었습니다.

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

라디오 버튼을 사용자 정의 드로어 블 radiobuttonstyle.xml로 지정했습니다.

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

사용자 정의 버튼 스타일의 라디오 버튼이 작동했습니다.

---

기본 라디오 버튼을 숨기려면 모든 시각적 피드백이 드로어 블 배경으로 처리되므로 버튼 을 투명하게 만드는 대신 버튼 을 제거하는 것이 좋습니다 .

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 드로어 블 도 필요합니다 .

---

커스텀 드로어 블을 추가하는 가장 좋은 방법은 다음과 같습니다.

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

커스텀 드로어 블에 의한 그림자 오버레이는 여기서 제거됩니다.

---

간단한 방법으로 시도해보십시오

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

   3. 출력 : 이것은 출력 화면입니다

---

나는 이것이 뒤늦은 대답이라는 것을 알고 있지만 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>

참고 URL : https://stackoverflow.com/questions/19163628/adding-custom-radio-buttons-in-android