Benutzerdefinierte Kreistaste

185

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?

An einer
quelle
Sie müssen die Schaltflächenklasse erweitern und die onDraw-Methode überschreiben.
Ashwin N Bhanushali
2
Aber das Problem ist hier, wenn ich das erweitere und der Benutzer außerhalb des Kreises berührt, wird Onlcick aufgerufen, wie man das löst.
Ata
Warum setzen Sie nicht einfach ein rundes Bild als Hintergrund für Ihre Schaltfläche?
MKJParekh
Ich habe OnDrawn einfach ausgeführt, es wird in der Entwurfsansicht angezeigt, aber wenn ich eine Anwendung ausführen möchte, tritt dieses Problem beim Laden auf: android.view.InflateException: Binäre XML-Dateizeile # 52: Fehler beim Aufblasen der Klasse com.inaros.magicbox._customButtonPlay
Ata

Antworten:

346

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.
Adil Soomro
quelle
Mit zeichnbarem Ordner meinen Sie, einen Ordner mit dem Namen 'drawable' zu öffnen oder ihn in drawable-mdpi, hdpi usw. zu speichern.
Jjang
@Jjang nein, Sie müssen es nur im Ordner 'drawable' speichern. Jede XML-Ressource für drawable wird normalerweise in 'drawable' gespeichert, nicht in mdpi, hdpi usw.
Adil Soomro
K thx, ich hatte bis jetzt keinen zeichnbaren Ordner (nur mdpi, hdpi ... und -v21) :)
Jjang
PS Wie kann ich der Schaltfläche eine Standard-Welligkeitsfarbe geben? Wie die graue, die standardmäßig alle Schaltflächen in der App färbt.
Jjang
@ AdilSoomro Ich brauche Ihre E-Mail-Adresse pls oder mailen Sie mir [email protected] , adil von pak
Adiii
67

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

Geben Sie hier die Bildbeschreibung ein

Hieronymus
quelle
Wie verwende ich dies mit einem nicht kreisförmigen Bild?
Tomsoft
3
Nur ein Hinweis: Die in dieser Antwort verknüpfte Bibliothek ist jetzt veraltet. Der Autor (Markushi) empfiehlt stattdessen die Verwendung einer schwebenden Aktionsschaltfläche .
Stellen Sie Monica
@ABoschman Können wir Text in das Kreisschaltflächen-Widget einfügen? Oder nur für Drawables
Ruchir Baronia
@RuchirBaronia Ich denke, Sie sollten wirklich die Android FAB in Betracht ziehen. Wie viel Prosa möchten Sie in einen kleinen runden Knopf legen? Es scheint für Symbole gemacht. Überprüfen Sie heraus: google.com/design/spec/components/…
Stellen Sie Monica
@ABoschman Hey, aber ich mag den Effekt dieser Schaltfläche in dieser Bibliothek wirklich. Gibt es irgendeinen Weg?
Ruchir Baronia
12

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:

Geben Sie hier die Bildbeschreibung ein

Gabriele Mariotti
quelle
1
Danke @ Gabriele Mariotti. Hervorzuheben ist die Notwendigkeit app:iconPadding="0dp", sicherzustellen, dass das Symbol zentriert ist. Ich habe eine Menge Zeit damit verbracht, das Zentrum zu versuchen, bis ich das gefunden habe. Es scheint ein Versehen, dass App: iconGravity einen "zentralen" Wert fehlt.
Scottyab
1
Danke @ Gabriele Mariotti. Arbeite gut für mich!
Androidz
2

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>
Milad Ranjbar
quelle
2

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:

Geben Sie hier die Bildbeschreibung ein

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

Roberto Leinardi
quelle