Como criar um botão circular delineado no Android?

9

Estou tentando criar um botão com um ícone no centro. As partes superior e inferior do círculo são um pouco planas. Existe uma maneira de fazer isso sem usar o raio do canto? Aqui está o meu layout para o botão.

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

android android-layout android-button material-components material-components-android QThompson
fonte

1

@ Md.Asaduzzaman por que não? Veja também minha resposta. Não precisa de um plano de fundo personalizado. Basta usar o aplicativo: shapeAppearanceOverlay attr.

Gabriele Mariotti

14

Você pode usar o app:shapeAppearanceOverlayatributo para definir o tamanho do canto. Você pode usar o 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"
    />

com:

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

ou com o style="@style/Widget.MaterialComponents.Button.Icon"

Requer a versão 1.1.0.

Gabriele Mariotti
fonte

2

Ótima solução! Não consegui encontrar em nenhum lugar da documentação onde afirma que podemos usar porcentagens para o atributo cornerSize - obrigado por esta resposta. Para outras pessoas que encontrarem essa resposta, é importante definir as inserções individualmente (esquerda, direita etc.) ou elas não serão aplicadas.

DalvikDroid 7/03

5

Ao usar cornerRadiusjunto, insetvocê pode obter a forma arredondada:

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

1

Fácil) obrigado. Funciona muito melhor do que estilos e formas de ícones.

StayCool

este estilo Widget.MaterialComponents.OutlinedButton.Icon é indefinido para mim.

carduque

@carduque Eles mudaram para "Widget.MaterialComponents.Button.OutlinedButton.Icon"

Ahmed Ashour

Como criar um botão circular delineado no Android?

Respostas: