wake-up-neo.net

Hinzufügen benutzerdefinierter Optionsfelder in Android

Ich versuche, einen Radiobutton-Effekt für reguläre Tasten in Android zu erhalten

Ich habe unten ein einfaches Android-Optionsfeld 

enter image description here

Code dafür ist ::

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>

So passen Sie es wie folgt an:

enter image description here

Vielen Dank

[BEARBEITEN] mit Code aus einer der Antworten

enter image description here

Aber der Tastenname wird durch die Auswahloption überschattet, die entfernt werden soll.


{EDIT} weitere Änderungen

Finale Änderungen sollten mindestens ich sollte wissen, welche Taste ich aus drei Optionsschaltflächen ausgewählt habe .... ist es möglich, wie unten zu erhalten?

enter image description here

100
Devrath

Füge einen Hintergrund hinzu, der auf ein Bild oder eine Auswahl (wie unten) verweist, und mache die Schaltfläche transparent:

<RadioButton
    Android:id="@+id/radio0"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:background="@drawable/yourbuttonbackground"
    Android:button="@Android:color/transparent"
    Android:checked="true"
    Android:text="RadioButton1" />

Wenn Sie möchten, dass Ihre Optionsschaltflächen eine andere Ressource haben, wenn Sie diese Option auswählen, erstellen Sie einen Hintergrund für die Auswahl, der gezeichnet werden kann:

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>

In der Auswahl oben referenzieren wir zwei Drawables, a und b. So erstellen wir sie:

res/drawable/a.xml - Selected State

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

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

Mehr zu Drawables hier: http://developer.Android.com/guide/topics/resources/drawable-resource.html

203
Evan Bashir

Verwenden Sie dasselbe XML-Dateiformat aus Evans Antwort, aber eine einzige Datei ist alles, was Sie zum Formatieren benötigen.

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

Und deine separate Zeichnungsdatei:

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

Sie müssen das Attribut "Button" der Klasse "CompoundButton" mit einem XML-Zeichenpfad ( my_checkbox ) ..__ füllen. In der XML-Zeichenfunktion müssen Sie Folgendes haben: 

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

Vergessen Sie nicht, my_checkbox durch Ihren Dateinamen des Kontrollkästchens drawable, checkbox_not_checked durch Ihr PNG drawable zu ersetzen. Dies ist Ihr Kontrollkästchen, wenn es nicht aktiviert ist, und checkbox_checked bei aktiviertem Bild.

Aktualisieren Sie die Layoutparameter direkt für die Größe.

8
flchaux

Ich habe die akzeptierte Antwort aktualisiert und unnötige Dinge entfernt.

Ich habe XML für folgendes Bild erstellt.

 enter image description here 

IhrXMLCode für RadioButton lautet:

<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 für Hintergrundauswahl:

<?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 für ausgewählte Schaltfläche:

<?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 für regulären Selektor:

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

Der gesamte oben genannte 3-Dateicode befindet sich im Ordner drawable/.

Jetzt brauchen wir auch Text Color Selector, um die Farbe des Texts entsprechend zu ändern.

radio_flat_text_selector.xml für die Textfarbauswahl

(Verwenden Sie den Ordner color/ für diese Datei.)

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

Hinweis: Ich habe viele Antworten für diese Art von Lösung referiert, aber keine gute Lösung gefunden, also habe ich sie erstellt.

Hoffe, es wird Ihnen hilfreich sein.

Vielen Dank.

Um das Standard-Optionsfeld auszublenden, würde ich vorschlagen, Entfernen Sie den Button , anstatt es transparent zu machen, da alle visuellen Rückmeldungen vom Hintergrund gezeichnet werden:

Android:button="@null"

Es wäre auch besser, Stile verwenden zu verwenden, da es mehrere Optionsfelder gibt:

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

Sie benötigen auch das Seslyn customButtonBackground drawable .

4
McX

Die beste Möglichkeit, benutzerdefinierte Zeichnungen hinzuzufügen, ist:

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

Schattenüberlagerung durch benutzerdefiniertes Zeichnen wird hier entfernt.

4

Einfach versuchen Sie es

  1. Erstellen Sie ein neues Layout im Zeichnungsordner und nennen Sie es custom_radiobutton (Sie können es auch umbenennen)

     <?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. Verwenden Sie dies in Ihrer Layoutaktivität

    <RadioButton
     Android:id="@+id/radiobutton"
     Android:layout_width="wrap_content"
     Android:layout_height="wrap_content"
     Android:button="@drawable/custom_radiobutton"/>
    
3
Sunil

Die Einstellung Android:background und Android:button des RadioButton wie die akzeptierte Antwort hat für mich nicht funktioniert. Das Zeichenbare Bild wurde als Hintergrund angezeigt (obwohl Android:button auf transparent gesetzt wurde). Der Text des Optionsfelds wird als angezeigt. enter image description here

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

so gab Radiobutton als benutzerdefinierte Zeichenbar Radiobuttonstyle.xml

<RadioButton
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:checked="true"
    Android:text="Maintenance"
    Android:id="@+id/radioButton1"
    Android:button="@drawable/radiobuttonstyle"
      />

und radiobuttonstyle.xml ist wie folgt 

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

und danach funktionierte der Radiobutton mit dem eigenen Button-Stil. 

enter image description here

1
Annu

Der folgende Code ist ein Beispiel für ein benutzerdefiniertes Optionsfeld. Befolgen Sie die nachstehenden Schritte.

  1. XML-Datei.

                        <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.Fügen Sie die benutzerdefinierte XML-Datei für die Optionsfelder hinzu

    2.1.andere ziehbar

    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.Weiblich ziehbar

    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. male ziehbar

    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. Ausgabe: dies ist der Ausgabebildschirm
1
sachin pangare

Mir ist klar, dass dies eine verspätete Antwort ist, aber wenn man durch Entwickler.Android.com schaut, scheint der Toggle-Button ideal für Ihre Situation zu sein. 

Toggle button image http://developer.Android.com/guide/topics/ui/controls/togglebutton.html

Natürlich können Sie auch die anderen Vorschläge verwenden, um einen Hintergrund zeichnen zu lassen, um einen benutzerdefinierten Look zu erhalten.

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

Wenn Sie nun mit Ihrer endgültigen Bearbeitung fortfahren möchten und die Schaltflächen mit einem "Halo" -Effekt versehen möchten, können Sie dies mit einem anderen benutzerdefinierten Selektor tun.

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