Android'de özel radyo düğmeleri ekleme

131

Android'de normal düğmeler için radyo düğmesi efekti elde etmeye çalışıyorum

Aşağıda basit bir android radyo düğmem var

görüntü açıklamasını buraya girin

Bunun kodu :

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>

Aşağıdaki gibi nasıl özelleştirilir:

görüntü açıklamasını buraya girin

Teşekkürler !

[DÜZENLE] yanıtlardan birindeki kodu kullanarak

görüntü açıklamasını buraya girin

Ancak düğmenin adı, nasıl kaldırılacağını seçme seçeneğinin gölgesinde kalıyor?

{EDIT} değişiklik daha

Son değişiklikler en az üç radyo düğmesinden hangi düğmeyi seçtiğimi bilmeliyim .... aşağıdaki gibi almak mümkün mü?

görüntü açıklamasını buraya girin

android  xml 
— Devrath
kaynak
4
4 yıl sonra LOL - bu sizin için yararlı olabilir crosp.net/blog/android/…
— Someone Somewhere
1
@SomeoneSomewhere ..... Hahaha ... Teşekkürler ... Faydalı :) :)
— Devrath

Yanıtlar:

246

Bir resme veya bir seçiciye (aşağıdaki gibi) başvuran bir arka plan çizimi ekleyin ve düğmeyi saydam yapın:

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

Radyo düğmelerinizin işaretlendiğinde farklı bir kaynağa sahip olmasını istiyorsanız, bir seçici arka plan çekilebilir oluşturun:

res / çekilebilir / 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>

Yukarıdaki seçicide, iki çekilebilir maddeye atıfta bulunuyoruz ave bbunları şu şekilde oluşturuyoruz:

res / drawable / a.xml - Seçili Durum

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

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

Burada çekilebilir öğeler hakkında daha fazla bilgi: http://developer.android.com/guide/topics/resources/drawable-resource.html

— Evan Bashir
kaynak
1
Hey, teşekkürler işlevselliği tamamladım ... Ama seçim seçeneği ile düğme adı üzerine yazılıyor ..... bunu nasıl kaldırabilirim ... işlevselliği olduğu gibi koruyarak .... Elimde tutmaya çalıştığım tek şey sorumda gösterildi ... Daha fazla yön! [Not :: lütfen güncellenmiş soruya bakın]
— Devrath
2
@Unicorn android:button="@android:color/transparent"Kaldırmak için ekleyin .
— Evan Bashir
3
@Unicorn Evet, anlıyorum. Tek yapmanız gereken, cevabımda belirttiğim gibi bir çekilebilir seçici oluşturmak. İki çekilebilir öğe yaratırsınız. Normal düğme stili ve basılı düğme stili için biri. Cevabımı bu çekilebilir öğeler için kodla güncelleyeceğim.
— Evan Bashir
1
Metni üst üste binmek yerine sığdırmak için, düğmeyi arka planı değil, çekilebilir olarak ayarlayın ve metne sığması için belirtilen genişletme noktaları ve içerik alanları olan 9'lu bir yama olduğundan emin olun.
— Lance Nanek
3
RadioButton için normal davranış, onay kutusunu mı arıyorsunuz?
— Vincent D.
49

Kabul edilen cevabı güncelledim ve gereksiz şeyleri kaldırdım.

Aşağıdaki resim için XML oluşturdum.

görüntü açıklamasını buraya girin

Kişisel XML kodu RadioButtonolacak:

<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 arka plan seçici için:

<?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 seçilen düğme için:

<?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 normal seçici için:

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

Yukarıdaki 3 dosya kodunun tümü drawable/klasörde olacaktır .

Artık Textmetnin rengini buna göre değiştirmek için Renk Seçiciye ihtiyacımız var .

radio_flat_text_selector.xml metin rengi seçici için

( color/Bu dosya için klasör kullanın .)

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

Not: Bu tür bir çözüm için birçok yanıta hakemlik ettim ancak iyi bir çözüm bulamadım, bu yüzden yaptım.

Umarım size yardımcı olur.

Teşekkürler.

— Pratik Butani
kaynak
Bununla istediğime gerçekten yaklaşıyorum, ancak öğeler arasında köşe yarıçapını da görüyorum. Üç düğmem olduğunda bunu anlıyorum. Yarıçapın yalnızca grubun kendisi için geçerli olduğundan emin olmanın bir yolu var mı? imgur.com/mP8dtKR
— AdamMc331
1
@ AdamMc331, 3 seçici oluşturmanız gerekecek, biri sıranın başındaki düğme için, biri ortadakiler için ve diğeri sonuncusu için, daha sonra ayarlayıp yalnızca birini yuvarlatmış olsaydınız. kenarları ekleyin ve <shape> 'i bir <layer-list> içindeki <item> thats içine alırsanız bunlardan birini negatif işaretle gizleyin
— Benny
Nasıl renk / klasör oluşturabilirim? Lütfen bana yardım eder misin
— Kamrujjaman Joy
Evet, işe yarayacak. Herhangi bir sorunla karşılaşırsan bana haber ver.
— Pratik Butani
Android 4'ü denedim ve bu ibb.co/jyHVXHS'yi Appcompat etkinliğiyle aldım , ancak Activity ile genişlettiğimde iyi çalışıyor
— kartoos khan
42

Evan'ın cevabındaki aynı XML dosya biçimini kullanın, ancak biçimlendirme için tek ihtiyacınız olan bir çekilebilir dosya.

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

Ve ayrı çekilebilir dosyanız:

<?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>
— Seslyn
kaynak
1
Bunun için teşekkürler ... faydalı görünüyor. Hala denemeye çalışıyorum. Çizilebilir, customButtonBackground adının içinde büyük harf olmasına izin verilmiyor - en azından Android Studio'nun söylediği bu.
— LarsH
10

Ayarlama android:backgroundve android:buttonRadioButton kabul cevap gibi benim için çalış yoktu. Çekilebilir görüntü, android:buttonradyo düğmesi metnine arka plan olarak ( saydam olarak ayarlansa bile) görüntüleniyordu.görüntü açıklamasını buraya girin

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

bu yüzden radiobutton'ı özel çekilebilir radiobuttonstyle.xml olarak verdi

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

ve radiobuttonstyle.xml aşağıdaki gibidir

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

ve bu radyo düğmesinden sonra özel düğme stili çalıştı.

görüntü açıklamasını buraya girin

— Annu
kaynak
8

"CompoundButton" sınıfının "Button" niteliğini bir XML çizilebilir yolla ( my_checkbox ) doldurmanız gerekir . XML çekilebilirinde şunlara sahip olmalısınız:

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

Yerine unutmayın my_checkbox onay kutusu çekilebilir sizin dosya adına göre, checkbox_not_checked kontrol edilmeli ve değilken sizin onay kutusu olan PNG çekilebilir tarafından checkbox_checked İşaretliyse zaman görüntü ile.

Boyut için, doğrudan yerleşim parametrelerini güncelleyin.

— flchaux
kaynak
1
OP'nin düğme içindeki metni beğeneceğine inanıyorum. Bunu yapmanın tek yolu için çekilebilir uygulamak olduğunu düşünüyorum android:backgroundvs android:button; sonra android:buttonşeffaf olarak ilan edilir. Bu şekilde metin düğmenin içine oturabilir.
— Evan Bashir
5

Varsayılan radyo düğmesini gizlemek için, tüm görsel geri bildirimler çekilebilir arka plan tarafından işlendiği için düğmeyi saydam yapmak yerine kaldırmanızı öneririm :

android:button="@null"

Ayrıca birkaç radyo düğmesi olduğundan stilleri kullanmak daha iyi olacaktır :

<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 çekilebilirine de ihtiyacınız olacak .

— MCX
kaynak
4

Özel çekilebilirlik eklemenin en iyi yolu:

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

Özel çekmeceli gölge kaplaması buradan kaldırılır.

— Abhilasha Sharma
kaynak
Teşekkür ederim @Abhilasha.
— varotariya vajsi
Ben de bu seçeneği tercih ettim background. Arka planı ayarlarsanız, RadioButton'a metin ekleyemezsiniz ve kendi TextView
— voghDev
3

Basit yol bunu dene

  1. Çekilebilir klasörde yeni bir düzen oluşturun ve bunu custom_radiobutton olarak adlandırın (Ayrıca yeniden adlandırabilirsiniz)

     <?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. Bunu düzen etkinliğinizde kullanın

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

Aşağıdaki kod, özel radyo düğmesi örneğidir. aşağıdaki adımları izleyin ..

  1. Xml dosyası.

                        <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. radyo düğmeleri için özel xml ekleyin

    2.1. Diğer çekilebilir

    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. Kadın çekilebilir

    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. erkek çekilebilir

    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. Çıktı: bu çıktı ekranıdır
— sachin pangare
kaynak
0

Bunun geç bir cevap olduğunun farkındayım, ancak developer.android.com sitesine baktığımızda, Geçiş düğmesinin durumunuz için ideal olacağı görülüyor.

Düğme resmini değiştir http://developer.android.com/guide/topics/ui/controls/togglebutton.html

Ve tabii ki, istediğiniz özel görünümü elde etmek için arka plan çekilebilir diğer önerileri kullanmaya devam edebilirsiniz.

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

Şimdi, son düzenlemenize gitmek ve düğmelerinizin etrafında bir "hale" efekti olmasını istiyorsanız, bunu yapmak için başka bir özel seçici kullanabilirsiniz.

<?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>
— Arthulia
kaynak
Bu, bir düğme işaretlendiğinde, diğerlerinin işaretlenmemesi açısından yine de radyo düğmesi davranışına izin verir mi?
— LarsH
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.