Wie mache ich einen runden Knopf?


140

Ich versuche einen runden Knopf zu machen, aber ich weiß nicht, wie ich das machen kann. Ich kann einen Knopf mit abgerundeten Ecken machen, aber wie kann ich einen Kreis runden? Es ist nicht das gleiche. Bitte, sag mir, ist das auf Android möglich? Danke dir.


Antworten:


265

Erstellen Sie eine XML-Datei mit dem Namen roundedbutton.xmlim Zeichenordner

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="rectangle">
    <solid android:color="#eeffffff" />
    <corners android:bottomRightRadius="8dp"
        android:bottomLeftRadius="8dp"  
        android:topRightRadius="8dp"
        android:topLeftRadius="8dp"/>
</shape>

Stellen Sie dies schließlich als Hintergrund für Ihr ButtonAs einandroid:background = "@drawable/roundedbutton"

Wenn Sie es vollständig abgerundet machen möchten, ändern Sie den Radius und geben Sie sich mit etwas zufrieden, das für Sie in Ordnung ist.


Benötigen Sie das XML-Suffix? Ich habe ein Beispiel ohne gesehen
Neil

@Neil Sie müssen kein XML-Suffix hinzufügen. Ich habe es zum Zwecke der Demonstration und des klaren Verständnisses des Konzepts getan, damit der Leser das Beispiel nicht falsch versteht. Die automatische Unterstützung von Eclipse sollte Ihnen dabei helfen, herauszufinden, ob .xml benötigt wird oder nicht, ich habe die Angewohnheit, auf meinem Windows-Computer Strg + Leertaste zum automatischen Ausführen von XML-Befehlen zu verwenden.
Arif Nadeem

2
Sie benötigen kein '@' Symbol, bevor das Wort gezeichnet werden kann?
Shim

Hat diese Lösung ein anderes Ergebnis als nur ein rundes Bild als Hintergrund?
Siavash

6
Warum auch nicht android: shape = "oval"
Siavash

37

Wenn Sie Android Studio verwenden, können Sie einfach Folgendes verwenden:

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring">
        <solid android:color="#FFFFFF"/>

    </shape>

Das funktioniert gut für mich, hoffe, das hilft jemandem.


2
Das sollte die akzeptierte Antwort sein. Die Verwendung von Eckenwerten geht nicht über abgerundete Ecken hinaus, und bei dieser Frage handelt es sich um einen Kreis. Danke Shaun für diese Antwort
Don

11
Verwenden ringzeigt nichts. Besser zu benutzen oval.
CopsOnRoad

31
  1. Erstellen Sie eine drawable / button_states.xml-Datei, die Folgendes enthält:

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_pressed="false"> 
            <shape android:shape="rectangle">
            <corners android:radius="1000dp" />
            <solid android:color="#41ba7a" />
            <stroke
                android:width="2dip"
                android:color="#03ae3c" />
            <padding
                android:bottom="4dp"
                android:left="4dp"
                android:right="4dp"
                android:top="4dp" />
            </shape>
        </item>
        <item android:state_pressed="true"> 
            <shape android:shape="rectangle">
            <corners android:radius="1000dp" />
            <solid android:color="#3AA76D" />
            <stroke
                android:width="2dip"
                android:color="#03ae3c" />
            <padding
                android:bottom="4dp"
                android:left="4dp"
                android:right="4dp"
                android:top="4dp" />
            </shape>
        </item>
    </selector>
  2. Verwenden Sie es als Schaltflächen-Tag in einer beliebigen Layoutdatei

    <Button
        android:layout_width="220dp"
        android:layout_height="220dp"
        android:background="@drawable/button_states"
        android:text="@string/btn_scan_qr"
        android:id="@+id/btn_scan_qr"
        android:textSize="15dp"
    />

Es funktioniert perfekt, danke.
Können

Funktioniert gut, aber warum haben wir den Radius auf 1000 dp eingestellt? Kannst du bitte Erklären?
Jamshaid Kamran

@JamshaidKamran 1000dp ist eine beliebige Größe, die groß genug ist, um den Knopf rund zu machen.
rraallvv

Gibt es eine Android-Dimensionsressource, die wir anstelle von 1000dp verwenden können?
rraallvv


6

<corners android:bottomRightRadius="180dip"
    android:bottomLeftRadius="180dip"
    android:topRightRadius="180dip"
    android:topLeftRadius="180dip"/>

<solid android:color="#6E6E6E"/> <!-- this one is ths color of the Rounded Button -->

und fügen Sie dies dem Schaltflächencode hinzu

    android:layout_width="50dp"
    android:layout_height="50dp"

5

Verwendete die Form als oval. Dies macht den Knopf oval

<item>
    <shape android:shape="oval" >
        <stroke
            android:height="1.0dip"
            android:width="1.0dip"
            android:color="#ffee82ee" />

        <solid android:color="#ffee82ee" />

        <corners
            android:bottomLeftRadius="12.0dip"
            android:bottomRightRadius="12.0dip"
            android:radius="12.0dip"
            android:topLeftRadius="12.0dip"
            android:topRightRadius="12.0dip" />
    </shape>
</item>


5
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
    android:color="#ffffff"
    />
</shape>

Stellen Sie dies auf Ihren XML-Zeichenressourcen und der einfachen Verwendung und der Bildschaltfläche mit einem runden Bild ein, wobei Sie Ihr Zeichenelement als Hintergrund verwenden.



3

Verwenden Sie ImageButton anstelle von Button ....

und rundes Bild mit transparentem Hintergrund machen


3

Wenn Sie eine FAB-kreisförmige Schaltfläche wünschen und die offizielle Materialkomponentenbibliothek verwenden, können Sie dies ganz einfach folgendermaßen tun:

<com.google.android.material.button.MaterialButton
    style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton"
    app:cornerRadius="28dp"
    android:layout_width="56dp"
    android:layout_height="56dp"
    android:text="1" />

Ergebnis:

Geben Sie hier die Bildbeschreibung ein

Wenn Sie die Größe der Schaltfläche ändern, achten Sie darauf, die Hälfte der Schaltflächengröße als zu verwenden app:cornerRadius.


2

Erstellen Sie für eine runde Schaltfläche eine Form:

<?xml version="1.0" encoding="utf-8"?>

<stroke
    android:width="8dp"
    android:color="#FFFFFF" />

<solid android:color="#ffee82ee" />


<corners
    android:bottomLeftRadius="45dp"
    android:bottomRightRadius="45dp"
    android:topLeftRadius="45dp"
    android:topRightRadius="45dp" />

verwenden Sie es als Hintergrund Ihrer Schaltfläche Link




0

Sie können den FloatingActionButton von Google verwenden

XMl:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@android:drawable/ic_dialog_email" />

Java:

  @Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    FloatingActionButton bold = (FloatingActionButton) findViewById(R.id.fab);
    bold.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
        // Do Stuff
        }
    });
}

Gradle:

    compile 'com.android.support:design:23.4.0'

0
  1. Verwenden Sie die Bildschaltflächen und stellen Sie den Hintergrund als das gewünschte Bild ein.
  2. Erstellen Sie die Bilder aus dem Android Asset Studio Link -

" https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html#foreground.type=image&foreground.space.trim=0&foreground.space.pad=0.25&foreColor=rgba(94%2C%20126%2C%20142% 2C% 200) & backColor = rgb (96% 2C% 20125% 2C% 20139) & crop = 1 & backgroundShape = Kreis & Effekte = keine & name = ic_home "

und laden Sie es herunter, extraxtieren Sie es, indem Sie nach dem Ordner mipmap-hdpi suchen.

  1. Kopieren Sie das Bild aus dem Ordner mipmap-hdpi und fügen Sie es in den Ordner drwable Ihres Android-Projekts ein.

  2. Stellen Sie nun den Hintergrund als dieses Bild ein.

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.