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.

user1166635
quelle
1
Habe
Milon

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.

Arif Nadeem
quelle
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.

Shaun Jones
quelle
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"
    />
Mohit
quelle
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
14

Markushis Android Circlebutton:

(Diese Bibliothek ist veraltet und es findet keine Neuentwicklung statt. Verwenden Sie stattdessen ein FAB.)

Geben Sie hier die Bildbeschreibung ein

LOG_TAG
quelle
4
Warnung: VERRINGERT!
Dialex
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"
user4512768
quelle
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>

Rohit Goyal
quelle
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.

Giovanny Piñeros
quelle
3

Verwenden Sie ImageButton anstelle von Button ....

und rundes Bild mit transparentem Hintergrund machen

MAC
quelle
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.

Roberto Leinardi
quelle
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

Naqash
quelle
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'
Kalebora
quelle
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.

Naren
quelle