Androidで円形のアウトライン化されたマテリアルボタンを作成する方法

8

中央にアイコンがあるボタンを作成しようとしています。円の上部と下部は少し平らです。コーナー半径を使用せずにこれを行う方法はありますか？これがボタンのレイアウトです。

<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
ソース

1

@ Md.Asaduzzamanどうして？私の答えもチェックしてください。カスタム背景は必要ありません。app：shapeAppearanceOverlay attrを使用するだけです。

— Gabriele Mariotti

12

このapp:shapeAppearanceOverlay属性を使用して、コーナーサイズを定義できます。50%値を使用できます。

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

と：

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

または style="@style/Widget.MaterialComponents.Button.Icon"

バージョン1.1.0が必要です。

— ガブリエレ・マリオッティ
ソース

2

素晴らしい解決策！ドキュメントで、cornerSize属性にパーセンテージを使用できると記載されている場所を見つけることができませんでした-この回答に感謝します。この答えを見つけた他の人にとっては、インセットを個別に定義することが重要です（左、右など）。そうしないと適用されません。

— DalvikDroid

4

とcornerRadius一緒に使用するとinset、丸みを帯びた形状を得ることができます：

<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

簡単）ありがとうございます。スタイルやアイコン形状よりもはるかにうまく機能します。

— StayCool