Wie erstelle ich in Android einen kreisförmig umrissenen Materialknopf?

8

Ich versuche eine Schaltfläche mit einem Symbol in der Mitte zu erstellen. Der obere und untere Teil des Kreises sind etwas flach. Gibt es eine Möglichkeit, dies ohne Verwendung des Eckenradius zu tun? Hier ist mein Layout für die Schaltfläche.

<com.google.android.material.button.MaterialButton
        android:id="@+id/start_dispenser_btn"
        style="@style/Widget.MaterialComponents.Button.OutlinedButton"
        android:layout_width="175dp"
        android:layout_height="175dp"
        android:padding="14dp"
        app:cornerRadius="150dp"
        app:icon="@drawable/ic_play_arrow_black_60dp"
        app:iconGravity="end"
        app:iconSize="150dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/stop_dispenser_btn"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/test_dispenser_container"
        app:strokeColor="@color/background_black" />

— QThompson
quelle

1

@ Md.Asaduzzaman warum nicht? Überprüfen Sie auch meine Antwort. Es wird kein benutzerdefinierter Hintergrund benötigt. Verwenden Sie einfach die App: shapeAppearanceOverlay attr.

— Gabriele Mariotti

12

Mit dem app:shapeAppearanceOverlayAttribut können Sie die Eckgröße definieren. Sie können den 50%Wert verwenden.

<com.google.android.material.button.MaterialButton
    android:layout_width="50dp"
    android:layout_height="50dp"
    style="@style/Widget.MaterialComponents.Button.OutlinedButton.Icon"
    app:icon="@drawable/ic_add_24px"
    app:iconSize="24dp"
    app:iconGravity="textStart"
    android:padding="0dp"
    app:iconPadding="0dp"
    android:insetLeft="0dp"
    android:insetTop="0dp"
    android:insetRight="0dp"
    android:insetBottom="0dp"
    app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Circle"
    />

mit:

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

oder mit dem style="@style/Widget.MaterialComponents.Button.Icon"

Es erfordert die Version 1.1.0.

— Gabriele Mariotti
quelle

2

Tolle Lösung! Ich konnte in der Dokumentation keine Stelle finden, an der angegeben ist, dass wir Prozentsätze für das Attribut CornerSize verwenden können - danke für diese Antwort. Für andere, die diese Antwort finden, ist es wichtig, die Einfügungen einzeln zu definieren (links, rechts usw.), da sie sonst nicht angewendet werden.

— DalvikDroid

4

Wenn Sie cornerRadiuszusammen mit insetverwenden, erhalten Sie die abgerundete Form:

<com.google.android.material.button.MaterialButton
    style="@style/Widget.MaterialComponents.OutlinedButton.Icon"
    android:layout_width="48dp"
    android:layout_height="48dp"
    app:cornerRadius="30dp"
    android:insetTop="0dp"
    android:insetBottom="0dp"
    android:insetLeft="0dp"
    android:insetRight="0dp"
    app:icon="@drawable/ic_menu"/>

— Ahmed Ashour
quelle

1

Einfach) danke. Funktioniert viel besser als Stile und Symbolformen.

— StayCool