Hinzufügen von benutzerdefinierten Optionsfeldern in Android

131

Ich versuche, Radiobutton-Effekt für normale Tasten in Android zu bekommen

Ich habe unten ein einfaches Android-Optionsfeld

Geben Sie hier die Bildbeschreibung ein

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:

Geben Sie hier die Bildbeschreibung ein

Danke !

[BEARBEITEN] mit Code aus einer der Antworten

Geben Sie hier die Bildbeschreibung ein

Der Schaltflächenname wird jedoch von der Auswahloption überschattet, wie er entfernt werden soll.

{EDIT} weitere Änderungen

Letzte Änderungen sollten mindestens ich sollte wissen, welche Schaltfläche ich aus drei Optionsfeldern ausgewählt habe .... ist es möglich, wie unten zu erhalten?

Geben Sie hier die Bildbeschreibung ein

android  xml 
— Devrath
quelle
4
4 Jahre später LOL - dies könnte für Sie nützlich sein crosp.net/blog/android/…
— Jemand irgendwo
1
@SomeoneSomewhere ..... Hahaha ... Danke ... Es ist nützlich :) :)
— Devrath

Antworten:

246

Fügen Sie einen Hintergrund hinzu, der auf ein Bild oder einen Selektor (wie unten) verweist, und machen Sie die Schaltfläche transparent:

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

Wenn Sie möchten, dass Ihre Optionsfelder beim Aktivieren eine andere Ressource haben, erstellen Sie einen Auswahlhintergrund, 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>

Im obigen Selektor verweisen wir auf zwei Drawables, aund bso erstellen wir sie:

res / drawable / a.xml - Ausgewählter Status

<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 / ziehbar / b.xml - Regelmäßige staatliche

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

Weitere Informationen zu Drawables finden Sie hier: http://developer.android.com/guide/topics/resources/drawable-resource.html

— Evan Bashir
quelle
1
Hey, danke, ich habe die Funktionalität erledigt ... Aber der Name der Schaltfläche wird durch die Auswahloption überschrieben ..... wie man das entfernt ... die Funktionalität intakt hält .... Alles, was ich versuche zu erreichen, wie ich zeigte in meiner Frage ... Weitere Anweisungen! [Anmerkung :: bitte schauen Sie sich die aktualisierte Frage an]
— Devrath
2
@Unicorn Hinzufügen android:button="@android:color/transparent", um es zu entfernen.
— Evan Bashir
3
@Unicorn Ja, ich verstehe. Alles, was Sie tun müssen, ist, einen Selektor zu erstellen, der wie in meiner Antwort angegeben gezeichnet werden kann. Sie würden zwei Drawables erstellen. Eine für den normalen Tastenstil und eine für den gedrückten Tastenstil. Ich werde meine Antwort mit Code für diese Zeichen aktualisieren.
— Evan Bashir
1
Um den Text anzupassen, anstatt ihn zu überlappen, stellen Sie die Schaltfläche zum Zeichnen ein, nicht den Hintergrund, und stellen Sie sicher, dass es sich um einen 9-Patch handelt, bei dem Dehnungspunkte und Inhaltsbereiche angezeigt werden, die zum Text passen.
— Lance Nanek
3
Normales Verhalten für einen RadioButton, suchen Sie ein Kontrollkästchen?
— Vincent D.
49

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

Ich habe XML für das folgende Bild erstellt.

Geben Sie hier die Bildbeschreibung ein

Ihr XML- Code für RadioButtonlautet:

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

Alle oben genannten 3 Dateicodes befinden sich im drawable/Ordner.

Jetzt brauchen wir auch die TextFarbauswahl, um die Farbe des Textes entsprechend zu ändern.

radio_flat_text_selector.xml für Textfarbenauswahl

(Verwenden Sie den color/Ordner 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 mache ich es.

Hoffe es wird dir hilfreich sein.

Vielen Dank.

— Pratik Butani
quelle
Damit komme ich dem, was ich will, sehr nahe, aber ich sehe auch den Eckenradius zwischen den Gegenständen. Wenn ich drei Knöpfe habe, bekomme ich das. Gibt es eine Möglichkeit, um sicherzustellen, dass der Radius nur für die Gruppe selbst gilt? imgur.com/mP8dtKR
— AdamMc331
1
@ AdamMc331, Sie müssen 3 Selektoren erstellen, einen für die Schaltfläche am Anfang der Zeile, einen für die in der Mitte und einen für den letzten, wo Sie dann anpassen können und nur eine abgerundete Ecke haben Kanten, und verstecken Sie auch eine von ihnen mit negativer Markierung, wenn Sie die <Form> in ein <Element> einwickeln, das sich in einer <Layer-Liste> befindet
— Benny
Wie erstelle ich Farbe / Ordner? Können Sie mir bitte helfen
— Kamrujjaman Joy
Ja, es wird funktionieren. Lassen Sie mich wissen, wenn Sie ein Problem haben.
— Pratik Butani
Ich habe Android 4 ausprobiert und diese ibb.co/jyHVXHS mit Appcompat-Aktivität erhalten, funktioniert aber gut, wenn ich mit Activity
— kartoos khan
42

Verwenden Sie dasselbe XML-Dateiformat aus Evans Antwort, aber eine zeichnbare 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 Ihre 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>
— Seslyn
quelle
1
Danke dafür ... es sieht hilfreich aus. Ich arbeite immer noch daran, es auszuprobieren. Der Name des Zeichens, customButtonBackground, darf keine Großbuchstaben enthalten - zumindest sagt mir das Android Studio.
— LarsH
10

Das Einstellen android:backgroundund android:buttondes RadioButton wie die akzeptierte Antwort hat bei mir nicht funktioniert. Das zeichnbare Bild wurde als Hintergrund (obwohl android:buttonauf transparent gesetzt wurde) zum Optionsfeldtext als angezeigtGeben Sie hier die Bildbeschreibung ein

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

so gab radiobutton als benutzerdefinierte zeichnbare 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 benutzerdefiniertem Button-Stil.

Geben Sie hier die Bildbeschreibung ein

— Annu
quelle
8

Sie müssen das Attribut "Button" der Klasse "CompoundButton" mit einem XML-Zeichenpfad ( my_checkbox ) füllen . In der XML-Zeichnung 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 zu ziehenden Kontrollkästchens zu ersetzen, checkbox_not_checked durch Ihr PNG drawable, das Ihr Kontrollkästchen ist, wenn es nicht aktiviert ist, und checkbox_checked mit Ihrem Bild, wenn es aktiviert ist .

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

— flchaux
quelle
1
Ich glaube, das OP möchte den Text innerhalb der Schaltfläche. Ich denke, der einzige Weg, dies zu tun, besteht darin, das Drawable auf das android:backgroundvs the anzuwenden android:button. dann deklarieren die android:buttonals transparent. Auf diese Weise kann der Text innerhalb der Schaltfläche sitzen.
— Evan Bashir
5

Um das Standard- Optionsfeld auszublenden, würde ich vorschlagen, das Symbol zu entfernen, anstatt es transparent zu machen, da alle visuellen Rückmeldungen vom zeichnbaren Hintergrund verarbeitet werden:

android:button="@null"

Es ist auch besser, Stile 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 den Seslyn customButtonBackground zum Zeichnen .

— McX
quelle
4

Der beste Weg, um benutzerdefinierte Zeichen 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"/>

Die Schattenüberlagerung durch benutzerdefiniertes Zeichnen wird hier entfernt.

— Abhilasha Sharma
quelle
Vielen Dank, dass Sie @Abhilasha.
— Varotariya Vajsi
Ich habe diese Option auch der Option vorgezogen background. Wenn Sie den Hintergrund festlegen, können Sie dem RadioButton keinen Text hinzufügen und müssen Ihre eigene TextView
— voghDev
3

Einfacher Weg, versuchen Sie dies

  1. Erstellen Sie ein neues Layout in einem zeichnbaren Ordner 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"/>
— Sunil
quelle
1

Der folgende Code ist ein Beispiel für ein benutzerdefiniertes Optionsfeld. Befolgen Sie die folgenden 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 zeichnbar

    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.Frauen zeichnbar

    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. männlich 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
— Sachin Pangare
quelle
0

Mir ist klar, dass dies eine verspätete Antwort ist, aber wenn ich durch developer.android.com schaue, scheint es, dass die Umschalttaste ideal für Ihre Situation ist.

Schaltflächenbild umschalten http://developer.android.com/guide/topics/ui/controls/togglebutton.html

Und natürlich können Sie auch die anderen Vorschläge verwenden, um einen Hintergrund zu zeichnen, um einen gewünschten 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 beginnen und einen "Halo" -Effekt um Ihre Schaltflächen erzielen möchten, können Sie dazu einen anderen benutzerdefinierten Selektor verwenden.

<?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
quelle
Würde dies weiterhin das Verhalten von Optionsfeldern zulassen, wenn beim Aktivieren einer Schaltfläche alle anderen deaktiviert werden?
— LarsH
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.