Android में कस्टम रेडियो बटन जोड़ना

Question

मैं एंड्रॉइड में नियमित बटन के लिए रेडियोबॉटन प्रभाव प्राप्त करने की कोशिश कर रहा हूं

मेरे पास एक सरल एंड्रॉइड रेडियो बटन है

इसके लिए कोड है ::

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] उत्तरों में से एक से कोड का उपयोग कर रहा है

लेकिन बटन नाम का चयन विकल्प द्वारा किया जाता है कि इसे कैसे हटाया जाए?

---

{EDIT} अधिक परिवर्तन

अंतिम परिवर्तनों को कम से कम मुझे पता होना चाहिए कि मैंने कौन से बटन को तीन रेडियो बटन में से चुना है .... क्या यह नीचे के रूप में संभव है?

Comments

4 साल बाद LOL - यह आपके लिए उपयोगी हो सकता है crosp.net/blog/android/…

— कहीं कोई

@SomeoneSomewhere ..... हाहाहा ... शुक्रिया ... यह उपयोगी है :) :)

— देवराठ

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

यदि आप चाहते हैं कि जाँच के समय आपके रेडियो बटन में एक अलग संसाधन हो, तो एक चयनकर्ता पृष्ठभूमि बनाएँ:

रेस / 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/resource/drawable-resource.html

Comments

अरे, धन्यवाद मुझे कार्यक्षमता मिल गई है ... लेकिन बटन नाम का चयन विकल्प द्वारा अधिलेखित किया जा रहा है ..... इसे कैसे हटाया जाए ... कार्यक्षमता को बरकरार रखते हुए .... सभी मैं इसे प्राप्त करने की कोशिश कर रहा हूं। मेरे प्रश्न में दिखाया गया है ... कोई और निर्देश! [नोट :: कृपया अद्यतन किए गए प्रश्न को देखें]

— देवराठ

@Unicorn android:button="@android:color/transparent"इसे निकालने के लिए जोड़ें ।

— इवान बशीर

@ यूनिकॉर्न हां, मैं समझता हूं। आपको बस एक चयनकर्ता बनाने की जरूरत है, जैसा कि मैंने अपने उत्तर में बताया है। आप दो ड्रॉबल्स बनाएंगे। नियमित बटन शैली के लिए एक, और दबाया बटन शैली के लिए एक। मैं इन आरेखों के लिए कोड के साथ अपने उत्तर को अपडेट करूंगा।

— इवान बशीर

टेक्स्ट को ओवरलैप करने की बजाय फिट करने के लिए, बटन को ड्रा करने योग्य, न कि बैकग्राउंड सेट करें, और सुनिश्चित करें कि यह एक 9-पैच है जिसमें टेक्स्ट को फिट करने के लिए स्ट्रेच पॉइंट और कंटेंट एरिया दर्शाए गए हैं।

— लांस नानक

RadioButton के लिए सामान्य व्यवहार, क्या आप चेकबॉक्स की तलाश कर रहे हैं?

— विंसेंट डी।

Answer 2

मैंने स्वीकृत उत्तर को अपडेट कर दिया है और अनावश्यक चीजों को हटा दिया है।

मैंने निम्न छवि के लिए 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अनुसार टेक्स्ट का रंग बदलने के लिए Color Selector की भी आवश्यकता है ।

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>

नोट: मैंने इस प्रकार के समाधान के लिए कई जवाबों का खंडन किया है, लेकिन अच्छा समाधान नहीं मिला है इसलिए मैं इसे बनाता हूं।

आशा है कि यह आपके लिए उपयोगी होगा।

धन्यवाद।

Comments

मैं इसके साथ जो चाहता हूं, उसके करीब पहुंचता हूं, लेकिन मुझे आइटम के बीच में कोने का दायरा भी दिखता है। जब मेरे पास तीन बटन होते हैं, तो मुझे यह मिलता है। क्या यह सुनिश्चित करने का कोई तरीका है कि त्रिज्या केवल समूह पर ही लागू होती है? imgur.com/mP8dtKR

— AdamMc331

@ AdamMc331, आपको 3 चयनकर्ता बनाने होंगे, एक पंक्ति की शुरुआत में बटन के लिए, एक मध्य में लोगों के लिए और दूसरा अंतिम एक के लिए, क्या आप तब समायोजित कर सकते हैं और बस गोल कोने में से एक है किनारों, और उनमें से एक को भी नकारात्मक अंकन के साथ छिपाएं यदि आप एक <आइटम> के अंदर <आकृति> को लपेटते हैं तो <परत-सूची> के अंदर

— बेनी

मैं रंग / फ़ोल्डर कैसे बनाऊँ? क्या आप कृपया मेरी मदद कर सकते हैं

— कमरुज्जमाँ जॉय

हाँ, यह काम करेगा। अगर आपको कोई समस्या आती है तो मुझे बताएं।

— प्रतीक बुटानी

मैंने एंड्रॉइड 4 पर कोशिश की और Appcompat गतिविधि के साथ यह ibb.co/jyHVXHS मिला , लेकिन जब मैं गतिविधि के साथ विस्तार करता हूं तो अच्छी तरह से काम करता है

— kartoos khan

Answer 3

इवान के उत्तर से उसी एक्सएमएल फ़ाइल प्रारूप का उपयोग करें, लेकिन एक ड्रा करने योग्य फ़ाइल आपको स्वरूपण के लिए आवश्यक है।

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

Comments

इसके लिए धन्यवाद ... यह मददगार लग रहा है। फिर भी इसे आजमाने पर काम कर रहा है। ड्रॉबल, कस्टमबटनबेकग्राउंड का नाम, इसमें अपरकेस होने की अनुमति नहीं है - कम से कम यही है कि एंड्रॉइड स्टूडियो मुझे बताता है।

— लार्स

Answer 4

रेडियोबटन की स्थापना android:backgroundऔर android:buttonस्वीकार किए गए उत्तर की तरह मेरे लिए काम नहीं किया। ड्रॉबल इमेज को बैकग्राउंड के रूप में प्रदर्शित किया जा रहा था (जैसे android:buttonकि रेडियो बटन टेक्स्ट पर पारदर्शी होना तय किया गया था)

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

इसलिए कस्टम ड्रॉबल रेडियोबूटनस्टाइल.एक्सएमएल के रूप में रेडियोबॉटन दिया

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

और इसके बाद कस्टम बटन शैली के साथ रेडियोबॉटन ने काम किया।

Answer 5

आपको एक XML ड्रॉबल पथ ( my_checkbox ) के साथ "CompoundButton" वर्ग की "बटन" विशेषता को भरना होगा । एक्सएमएल ड्रा करने योग्य में, आपके पास होना चाहिए:

<?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 को बदलने के लिए मत भूलना , चेकबॉक्स_ not_checked आपके PNG दराज के द्वारा जो कि आपका चेकबॉक्स नहीं है जब यह चेक नहीं किया जाता है और चेकबॉक्स_ चेक किए जाने पर आपकी छवि के साथ चेक किया जाता है।

आकार के लिए, सीधे लेआउट मापदंडों को अपडेट करें।

Comments

मेरा मानना ​​है कि ओपी बटन के भीतर पाठ को पसंद करेगा। मुझे लगता है कि ऐसा करने का एकमात्र तरीका यह है कि ड्रा करने योग्य android:backgroundबनाम संपूर्ण पर लागू किया जाए android:button; फिर android:buttonपारदर्शी घोषित किया । इस तरह से टेक्स्ट बटन के अंदर बैठ सकता है।

— इवान बशीर

Answer 6

डिफ़ॉल्ट रेडियो बटन को छिपाने के लिए, मैं यह सुझाव दूंगा कि इसे पारदर्शी बनाने के बजाय बटन को हटा दिया जाए क्योंकि सभी दृश्य फीडबैक को ड्रॉ करने योग्य बटन द्वारा नियंत्रित किया जाता है:

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>

आपको सिसलिन कस्टमबटनबेकग्राउंड ड्रॉबल की भी आवश्यकता होगी ।

Answer 7

कस्टम ड्रॉबल जोड़ने का सबसे अच्छा तरीका है:

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

कस्टम ड्रॉबल द्वारा छाया ओवरले को यहां हटा दिया जाता है।

Comments

साभार @ अभिलाषा

— वरोत्रिया वजसी

मैंने इस विकल्प को भी चुना background। यदि आप पृष्ठभूमि सेट करते हैं, तो आप RadioButton में टेक्स्ट नहीं जोड़ सकते हैं, और आपको अपना खुद का

— TextView

Answer 8

सरल तरीका यह कोशिश करो

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

Answer 9

नीचे कोड कस्टम रेडियो बटन का उदाहरण है। नीचे दिए गए चरणों का पालन करें ।।

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 जोड़ें

   २.१.मातृ योग्य

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

   २.२.फिल्म ड्रॉबल

   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. आउटपुट: यह आउटपुट स्क्रीन है

Answer 10

मुझे लगता है कि यह एक जवाब है, लेकिन 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>

Comments

क्या यह अभी भी रेडियो बटन व्यवहार की अनुमति देगा जब एक बटन की जाँच की जाती है, कोई भी अन्य अनियंत्रित है?

— लार्श