Aggiunta di pulsanti di opzione personalizzati in Android

131

Sto cercando di ottenere l'effetto del pulsante di opzione per i pulsanti regolari in Android

Ho un semplice pulsante di opzione Android qui sotto

inserisci qui la descrizione dell'immagine

Il codice per questo è ::

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>

Come personalizzarlo come di seguito ::

inserisci qui la descrizione dell'immagine

Grazie !

[MODIFICA] utilizzando il codice di una delle risposte

inserisci qui la descrizione dell'immagine

Ma il nome del pulsante è oscurato dall'opzione di selezione come rimuoverlo?

{EDIT} altre modifiche

In ogni caso, dovrei sapere almeno quale pulsante ho selezionato tra tre pulsanti di opzione .... è possibile ottenere come di seguito?

inserisci qui la descrizione dell'immagine

android  xml 
— Devrath
fonte
4
4 anni dopo LOL - questo potrebbe esserti
— Someone Somewhere
1
@SomeoneSomewhere ..... Hahaha ... Grazie ... È utile :) :)
— Devrath,

Risposte:

246

Aggiungi un disegno di sfondo che fa riferimento a un'immagine o un selettore (come sotto) e rendi trasparente il pulsante:

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

Se desideri che i tuoi pulsanti di opzione abbiano una risorsa diversa quando spuntati, crea un disegnatore di sfondo selezionabile:

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>

Nel selettore sopra, facciamo riferimento a due drawable, aed becco come li creiamo:

res / drawable / a.xml - Stato selezionato

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

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

Maggiori informazioni sui drawable qui: http://developer.android.com/guide/topics/resources/drawable-resource.html

— Evan Bashir
fonte
1
Ehi, grazie ho fatto la funzionalità ... Ma il nome del pulsante viene sovrascritto dall'opzione di selezione ..... come rimuoverlo ... mantenendo intatta la funzionalità .... Tutto quello che sto cercando di ottenere mostrato nella mia domanda ... Altre indicazioni! [Nota: guarda la domanda aggiornata]
— Devrath,
2
@Unicorn Aggiungi android:button="@android:color/transparent"per rimuoverlo.
— Evan Bashir,
3
@Unicorno Sì, ho capito. Tutto quello che devi fare è creare un selettore disegnabile come ho affermato nella mia risposta. Si creerebbero due drawable. Uno per lo stile del pulsante normale e uno per lo stile del pulsante premuto. Aggiornerò la mia risposta con il codice per questi drawable.
— Evan Bashir,
1
Per adattare il testo anziché sovrapporlo, imposta il pulsante disegnabile, non lo sfondo, e assicurati che sia una patch 9 con punti di stiramento e aree di contenuto indicate per adattarsi al testo.
— Lance Nanek,
3
Comportamento normale per un RadioButton, stai cercando una casella di controllo?
— Vincent D.,
49

Ho aggiornato la risposta accettata e rimosso le cose non necessarie.

Ho creato XML per la seguente immagine.

inserisci qui la descrizione dell'immagine

Il tuo codice XML per RadioButtonsarà:

<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 per selettore sfondo:

<?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 per il pulsante selezionato:

<?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 per selettore regolare:

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

Tutto il codice di file 3 sopra sarà nella drawable/cartella.

Ora abbiamo anche bisogno del TextSelettore colore per cambiare di conseguenza il colore del testo.

radio_flat_text_selector.xml per il selettore del colore del testo

(Usa la color/cartella per questo file.)

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

Nota: ho arbitrato molte risposte per questo tipo di soluzione ma non ho trovato una buona soluzione, quindi la realizzo.

Spero che ti sarà utile.

Grazie.

— Pratik Butani
fonte
Mi avvicino molto a ciò che voglio con questo, ma vedo anche il raggio d'angolo tra gli oggetti. Quando ho tre pulsanti, ottengo questo. C'è un modo per assicurarsi che il raggio si applichi solo al gruppo stesso? imgur.com/mP8dtKR
— AdamMc331
1
@ AdamMc331, dovrai creare 3 selettori, uno per il pulsante all'inizio della riga, uno per quelli al centro e un altro per l'ultimo, dove puoi quindi regolare e basta arrotondare uno degli angoli bordi, e nascondine anche uno con segno negativo se avvolgi la <shape> all'interno di un <item> che è all'interno di una <list-layer>
— Benny
Come posso creare colore / cartella? Potete per favore aiutarmi
— Kamrujjaman Joy
Sì, funzionerà. Fammi sapere se hai qualche problema.
— Pratik Butani,
Ho provato su Android 4 e ho ottenuto questo ibb.co/jyHVXHS con attività Appcompat, ma funziona bene quando estendo con Attività
— kartoos khan,
42

Usa lo stesso formato di file XML dalla risposta di Evan, ma un file disegnabile è tutto ciò che serve per la formattazione.

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

E il tuo file estraibile separato:

<?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
fonte
1
Grazie per questo ... sembra utile. Sto ancora lavorando per provarlo. Il nome del drawable, customButtonBackground, non può contenere maiuscole, almeno è quello che mi dice Android Studio.
— LarsH,
10

L'impostazione android:backgrounde android:buttonil RadioButton come la risposta accettata non ha funzionato per me. L'immagine disegnabile veniva visualizzata come sfondo (anche android:buttonse impostato su trasparente) al testo del pulsante di opzione comeinserisci qui la descrizione dell'immagine

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

così ha dato il pulsante di opzione come radiobuttonstyle.xml personalizzabile

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

e radiobuttonstyle.xml è il seguente

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

e dopo questo pulsante di opzione con stile pulsante personalizzato ha funzionato.

inserisci qui la descrizione dell'immagine

— Annu
fonte
8

È necessario riempire l'attributo "Button" della classe "CompoundButton" con un percorso disegnabile XML ( my_checkbox ). Nel disegno XML, devi avere:

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

Non dimenticare di sostituire my_checkbox con il tuo nome file del drawable checkbox, checkbox_not_checked dal tuo drawable PNG che è la tua casella di controllo quando non è selezionata e checkbox_checked con la tua immagine quando è selezionata.

Per le dimensioni, aggiorna direttamente i parametri di layout.

— flchaux
fonte
1
Credo che l'OP vorrebbe il testo all'interno del pulsante. Penso che l'unico modo per farlo sia applicare il drawable al android:backgroundvs the android:button; dichiarando quindi android:buttontrasparente. In questo modo il testo può stare all'interno del pulsante.
— Evan Bashir,
5

Per nascondere il pulsante di opzione predefinito, suggerirei di rimuovere il pulsante invece di renderlo trasparente poiché tutto il feedback visivo è gestito dallo sfondo disegnabile:

android:button="@null"

Inoltre sarebbe meglio usare gli stili in quanto ci sono diversi pulsanti di opzione:

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

Ti servirà anche il disegnabile customButtonBackground di Seslyn .

— McX
fonte
4

Il modo migliore per aggiungere un disegno personalizzato è:

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

La sovrapposizione ombra mediante disegno personalizzato viene rimossa qui.

— Abhilasha Sharma
fonte
Grazie @Abhilasha.
— varotariya vajsi,
Ho scelto questa opzione troppo su backgroundquella. Se imposti lo sfondo, non puoi aggiungere testo al RadioButton e
— devi
3

Modo semplice provare questo

  1. Crea un nuovo layout in una cartella disegnabile e chiamalo custom_radiobutton (Puoi anche rinominare)

     <?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. Usa questo nella tua attività di layout

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

Di seguito il codice è un esempio di pulsante di opzione personalizzato. seguire i passaggi seguenti ..

  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.aggiungere l'XML personalizzato per i pulsanti di opzione

    2.1.altri disegni

    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. Disegnabile femminile

    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. maschio disegnabile

    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: questa è la schermata di output
— sangin pangare
fonte
0

Mi rendo conto che questa è una risposta tardiva, ma guardando attraverso developer.android.com, sembra che il pulsante Toggle sia l'ideale per la tua situazione.

Attiva / disattiva l'immagine del pulsante http://developer.android.com/guide/topics/ui/controls/togglebutton.html

E ovviamente puoi ancora usare gli altri suggerimenti per avere uno sfondo disegnabile per ottenere l'aspetto personalizzato che desideri.

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

Ora se vuoi andare con la modifica finale e avere un effetto "alone" attorno ai tuoi pulsanti, puoi usare un altro selettore personalizzato per fare proprio questo.

<?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
fonte
Ciò consentirebbe comunque il comportamento del pulsante di opzione in quanto quando un pulsante è selezionato, tutti gli altri sono deselezionati?
— LarsH,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.