Menambahkan tombol radio khusus di android

131

Saya mencoba untuk mendapatkan efek radiobutton untuk tombol biasa di android

Saya memiliki tombol radio android sederhana di bawah ini

masukkan deskripsi gambar di sini

Kode untuk ini adalah ::

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>

Cara menyesuaikannya seperti di bawah ini ::

masukkan deskripsi gambar di sini

Terima kasih !

[EDIT] menggunakan kode dari salah satu jawaban

masukkan deskripsi gambar di sini

Tetapi nama tombol dibayangi oleh opsi pilih cara menghapusnya?

{EDIT} lebih banyak perubahan

Perubahan terakhir harus minimal saya harus tahu tombol mana yang saya pilih dari tiga tombol radio .... apakah mungkin untuk mendapatkan seperti di bawah ini?

masukkan deskripsi gambar di sini

android xml Setan
sumber
4
4 tahun kemudian LOL - ini mungkin berguna bagi Anda crosp.net/blog/android/…
Seseorang di suatu tempat
1
@ Seseorang di suatu tempat ..... Hahaha ... Terima kasih ... Ini Berguna :) :)
Devrath

Jawaban:

246

Tambahkan latar belakang yang dapat digambar yang merujuk ke gambar, atau pemilih (seperti di bawah), dan buat tombol transparan:

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

Jika Anda ingin tombol radio Anda memiliki sumber yang berbeda saat dicentang, buat latar belakang pemilih yang dapat digambar:

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>

Dalam pemilih di atas, kami merujuk dua drawable, adan b, inilah cara kami membuatnya:

res / drawable / a.xml - Status Terpilih

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

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

Lebih lanjut tentang drawables di sini: http://developer.android.com/guide/topics/resources/drawable-resource.html

Evan Bashir
sumber
1
Hei, terima kasih sudah selesai fungsionalitasnya ... Tapi nama tombol ditimpa oleh opsi pilih ..... bagaimana menghapusnya ... menjaga fungsi tetap utuh .... Semua yang saya coba capai seperti saya ditunjukkan dalam pertanyaan saya ... Petunjuk lebih lanjut! [Catatan :: silakan lihat pertanyaan yang diperbarui]
Devrath
2
@Unicorn Tambahkan android:button="@android:color/transparent"untuk menghapusnya.
Evan Bashir
3
@ Unicorn Ya, saya mengerti. Yang perlu Anda lakukan adalah membuat pemilih yang dapat ditarik seperti yang saya nyatakan dalam jawaban saya. Anda akan membuat dua drawable. Satu untuk gaya tombol biasa, dan satu untuk gaya tombol yang ditekan. Saya akan memperbarui jawaban saya dengan kode untuk drawable ini.
Evan Bashir
1
Untuk menyesuaikan teks alih-alih tumpang tindih, atur tombol drawable, bukan latar belakang, dan pastikan itu adalah 9-patch dengan titik peregangan dan area konten yang diindikasikan sesuai dengan teks.
Lance Nanek
3
Perilaku normal untuk RadioButton, apakah Anda mencari kotak centang?
Vincent D.
49

Saya telah memperbarui jawaban yang diterima dan menghapus hal-hal yang tidak perlu.

Saya telah membuat XML untuk gambar berikut.

masukkan deskripsi gambar di sini

Kode XML Anda RadioButtonadalah:

<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 untuk pemilih latar belakang:

<?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 untuk tombol yang dipilih:

<?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 untuk pemilih reguler:

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

Semua 3 kode file di atas akan ada di drawable/folder.

Sekarang kita juga perlu TextPemilih Warna untuk mengubah warna teks yang sesuai.

radio_flat_text_selector.xml untuk pemilih warna teks

(Gunakan color/folder untuk file ini.)

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

Catatan: Saya memberi referensi pada banyak jawaban untuk jenis solusi ini tetapi tidak menemukan solusi yang baik jadi saya membuatnya.

Semoga bermanfaat bagi Anda.

Terima kasih.

Pratik Butani
sumber
Saya sangat dekat dengan apa yang saya inginkan dengan ini, tetapi saya juga melihat radius sudut di antara item. Ketika saya memiliki tiga tombol, saya mendapatkan ini. Apakah ada cara untuk memastikan radius hanya berlaku untuk grup itu sendiri? imgur.com/mP8dtKR
AdamMc331
1
@ AdamMc331, Anda harus membuat 3 penyeleksi, satu untuk tombol di awal baris, satu untuk yang di tengah dan satu lagi untuk yang terakhir, yang kemudian dapat Anda sesuaikan dan hanya memiliki sudut bundar salah satu tepi, dan juga menyembunyikan salah satunya dengan tanda negatif jika Anda membungkus <bentuk> di dalam <item> itu di dalam <layer-list>
Benny
Bagaimana cara membuat warna / folder? Bisakah Anda membantu saya
Kamrujjaman Joy
Ya, itu akan berhasil. Beri tahu saya jika Anda mendapat masalah.
Pratik Butani
Saya mencoba di Android 4 dan mendapatkan ibb.co/jyHVXHS ini dengan aktivitas Appcompat, tetapi berfungsi dengan baik ketika saya memperluas dengan Activity
kartoos khan
42

Gunakan format file XML yang sama dari jawaban Evan, tetapi hanya satu file yang dapat ditarik yang Anda butuhkan untuk memformat.

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

Dan file drawable Anda yang terpisah:

<?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
sumber
1
Terima kasih untuk ini ... ini terlihat membantu. Masih berusaha untuk mencobanya. Nama drawButtonBackground yang dapat ditarik, tidak diizinkan memiliki huruf besar di dalamnya - setidaknya itulah yang dikatakan Android Studio kepada saya.
LarsH
10

Pengaturan android:backgrounddan android:buttonRadioButton seperti jawaban yang diterima tidak bekerja untuk saya. Gambar yang dapat ditarik sedang ditampilkan sebagai latar belakang (meskipun android:buttonsedang diatur untuk transparan) ke teks tombol radio sebagaimasukkan deskripsi gambar di sini

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

jadi beri radiobutton sebagai radiobuttonstyle.xml yang dapat dibuat kustom

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

dan radiobuttonstyle.xml adalah sebagai berikut

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

dan setelah radiobutton ini dengan gaya tombol kustom bekerja.

masukkan deskripsi gambar di sini

Annu
sumber
8

Anda harus mengisi atribut "Tombol" dari kelas "CompoundButton" dengan jalur XML drawable ( my_checkbox ). Di XML drawable, Anda harus memiliki:

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

Jangan lupa untuk mengganti my_checkbox dengan nama file Anda pada checkbox drawable, checkbox_not_checked oleh PNG drawable Anda yang merupakan checkbox Anda ketika tidak dicentang dan checkbox_checked dengan gambar Anda saat dicentang.

Untuk ukuran, langsung perbarui parameter tata letak.

flchaux
sumber
1
Saya percaya OP akan menyukai teks di dalam tombol. Saya pikir satu-satunya cara untuk melakukannya adalah menerapkan drawable ke the android:backgroundthe android:button; kemudian mendeklarasikan android:buttonsebagai transparan. Dengan cara ini teks dapat duduk di dalam tombol.
Evan Bashir
5

Untuk menyembunyikan tombol radio default, saya sarankan untuk menghapus tombol alih-alih membuatnya transparan karena semua umpan balik visual ditangani oleh latar belakang yang dapat digambar:

android:button="@null"

Juga akan lebih baik menggunakan gaya karena ada beberapa tombol 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>

Anda juga akan membutuhkan Seslyn customButtonBackground yang dapat digambar .

McX
sumber
4

Cara terbaik untuk menambahkan drawable khusus adalah:

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

Hamparan bayangan oleh drawable khusus dihapus di sini.

Abhilasha Sharma
sumber
@Abhilasha terima kasih.
varotariya vajsi
Saya memilih opsi ini juga daripada yang backgroundsatu. Jika Anda mengatur latar belakang, Anda tidak dapat menambahkan teks ke RadioButton, dan perlu menempatkan TextView Anda sendiri
voghDev
3

Cara sederhana coba ini

  1. Buat tata letak baru di folder yang dapat digambar dan beri nama custom_radiobutton (Anda juga dapat mengganti nama)

     <?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. Gunakan ini dalam aktivitas tata letak Anda

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

Kode di bawah ini adalah contoh tombol radio kustom. ikuti langkah-langkah di bawah ini ..

  1. File 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. Tambahkan xml khusus untuk tombol radio

    2.1. Gambar lainnya

    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.pria dapat ditarik

    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. laki-laki yang dapat ditarik

    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. Output: ini adalah layar output
sachin pangare
sumber
0

Saya menyadari ini adalah jawaban yang terlambat, tetapi melihat melalui developer.android.com, sepertinya tombol Toggle akan ideal untuk situasi Anda.

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

Dan tentu saja Anda masih dapat menggunakan saran lain untuk memiliki latar belakang yang dapat digambar untuk mendapatkan tampilan kustom yang Anda inginkan.

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

Sekarang jika Anda ingin pergi dengan edit terakhir Anda dan memiliki efek "halo" di sekitar tombol Anda, Anda dapat menggunakan pemilih kustom lain untuk melakukan hal itu.

<?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
sumber
Apakah ini masih memungkinkan perilaku tombol radio ketika satu tombol dicentang, yang lain tidak dicentang?
LarsH