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

ingrese la descripción de la imagen aquí


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

Respuestas:


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>

ingrese la descripción de la imagen aquí

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

ingrese la descripción de la imagen aquí

Requiere la versión 1.1.0.


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

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
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.