¿Cómo crear un botón de material circular contorneado en Android?

9

Estoy intentando crear un botón con un icono en el centro. Las partes superior e inferior del círculo son un poco planas. ¿Hay alguna manera de hacer esto sin usar el radio de la esquina? Aquí está mi diseño para el botón.

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

1

@ Md.Asaduzzaman ¿por qué no? Mira también mi respuesta. No necesita un fondo personalizado. Simplemente use la aplicación: shapeAppearanceOverlay attr.

— Gabriele Mariotti el

14

Puede usar el app:shapeAppearanceOverlayatributo para definir el tamaño de la esquina. Puedes usar el 50%valor.

<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"
    />

con:

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

o con el style="@style/Widget.MaterialComponents.Button.Icon"

Requiere la versión 1.1.0.

— Gabriele Mariotti
fuente

2

¡Gran solución! No pude encontrar en ninguna parte de la documentación que indique que podemos usar porcentajes para el atributo cornerSize, gracias por esta respuesta. Para otros que encuentran esta respuesta, es importante definir las inserciones individualmente (izquierda, derecha, etc.) o no se aplicarán.

— DalvikDroid

5

Al usar cornerRadiusjunto con insetusted puede obtener la forma redondeada:

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

1

Fácil) gracias. Funciona mucho mejor que los estilos y las formas de iconos.

— StayCool

este estilo Widget.MaterialComponents.OutlinedButton.Icon no está definido para mí.

— carduque

@carduque Lo cambiaron a "Widget.MaterialComponents.Button.OutlinedButton.Icon"

— Ahmed Ashour