Benutzerdefinierte Kreistaste

Ich möchte eine benutzerdefinierte Schaltfläche erstellen und diese muss ein Kreis sein. Wie kann ich eine Kreisschaltfläche erstellen? Ich denke nicht, dass das mit draw9patch möglich ist.

Auch ich weiß nicht, wie man einen benutzerdefinierten Button macht!

Hast du irgendwelche Vorschläge?

Verwenden Sie XML wie folgt:

Speichern Sie den folgenden Inhalt wie round_button.xmlim drawableOrdner

<?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="oval">
            <solid android:color="#fa09ad"/>
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape android:shape="oval">
            <solid android:color="#c20586"/>
        </shape>
    </item>
</selector>

Android Material Effect: Obwohl dies FloatingActionButtoneine bessere Option ist. Wenn Sie dies mit der XML-Auswahl tun möchten, erstellen Sie einen Ordner drawable-v21in resund speichern Sie round_button.xmldort einen weiteren mit der folgenden XML

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

Und setzen Sie es als Hintergrund Buttonin XML wie folgt:

<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@drawable/round_button"
android:gravity="center_vertical|center_horizontal"
android:text="hello"
android:textColor="#fff" />

Wichtig:

1. Wenn Sie möchten, dass alle diese Status angezeigt werden (aktiviert, deaktiviert, hervorgehoben usw.), verwenden Sie den hier beschriebenen Selektor .
2. Sie müssen beide Dateien behalten, um das Zeichnen abwärtskompatibel zu machen. Andernfalls treten in der vorherigen Android-Version seltsame Ausnahmen auf.

Markushi hat ein Kreis-Button-Widget mit erstaunlichen Effekten geschrieben. Klicken Sie hier !

AngryTool für benutzerdefinierte Android-Schaltfläche

Sie können jede Art von benutzerdefinierten Android-Button mit dieser Tool-Site machen ... Ich mache Kreis und Quadrat-Button mit runder Ecke mit dieser Toolsite .. Besuchen Sie es kann sein, ich werde Ihnen helfen

Mit der offiziellen Materialkomponentenbibliothek können Sie MaterialButtoneinen Widget.MaterialComponents.Button.IconStil anwenden .

Etwas wie:

   <com.google.android.material.button.MaterialButton
            android:layout_width="48dp"
            android:layout_height="48dp"
            style="@style/Widget.MaterialComponents.Button.Icon"
            app:icon="@drawable/ic_add"
            app:iconSize="24dp"
            app:iconPadding="0dp"
            android:insetLeft="0dp"
            android:insetTop="0dp"
            android:insetRight="0dp"
            android:insetBottom="0dp"
            app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Rounded"
            />

Derzeit ist die app:iconPadding="0dp", android:insetLeft, android:insetTop, android:insetRight, android:insetBottomsind Attribute benötigt , um das Symbol auf der Schaltfläche Pfund extra Raum vermieden zu zentrieren.

Verwenden Sie das app:shapeAppearanceOverlayAttribut, um abgerundete Ecken zu erhalten. In diesem Fall haben Sie einen Kreis.

  <style name="ShapeAppearanceOverlay.MyApp.Button.Rounded" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
  </style>

Das Endergebnis:

Wenn Sie VectorDrawable und ConstraintLayout verwenden möchten

<FrameLayout
            android:id="@+id/ok_button"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:foreground="?attr/selectableItemBackgroundBorderless"
            android:background="@drawable/circle_button">
                <android.support.constraint.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">
                    <ImageView
                        android:id="@+id/icon_of_button"
                        android:layout_width="32dp"
                        android:layout_height="32dp"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintTop_toTopOf="parent"
                        app:layout_constraintRight_toRightOf="parent"
                        app:layout_constraintLeft_toLeftOf="parent"
                        app:srcCompat="@drawable/ic_thumbs_up"/>
                    <TextView
                        android:id="@+id/text_of_button"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        app:layout_constraintTop_toBottomOf="@+id/icon_of_button"
                        app:layout_constraintRight_toRightOf="parent"
                        app:layout_constraintLeft_toLeftOf="parent"
                        android:layout_marginTop="5dp"
                        android:textColor="@android:color/white"
                        android:text="ok"
                        />
                </android.support.constraint.ConstraintLayout>
            </FrameLayout>

Kreishintergrund: circle_button.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
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>

Für eine FAB aussehende Schaltfläche dieser Stil auf einem MaterialButton:

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

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