Làm cách nào để tạo Nút Vật liệu được phác thảo tròn trong Android?

8

Tôi đang cố gắng tạo một nút có biểu tượng ở trung tâm. Phần trên cùng và dưới cùng của vòng tròn là một chút bằng phẳng. Có cách nào để làm điều này mà không sử dụng bán kính góc? Đây là cách bố trí của tôi cho nút.

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

— QThndry
nguồn

1

@ Md.Asaduzzaman tại sao không? Kiểm tra câu trả lời của tôi. Nó không cần một nền tảng tùy chỉnh. Chỉ cần sử dụng ứng dụng: shapeAppparentOverlay attr.

— Gabriele Mariotti

12

Bạn có thể sử dụng app:shapeAppearanceOverlaythuộc tính để xác định kích thước góc. Bạn có thể sử dụng 50%giá trị.

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

với:

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

hoặc với style="@style/Widget.MaterialComponents.Button.Icon"

Nó yêu cầu phiên bản 1.1.0.

— Gabriele Mariotti
nguồn

2

Giải pháp tuyệt vời! Tôi không thể tìm thấy bất cứ nơi nào trong tài liệu nơi nó nói rằng chúng ta có thể sử dụng tỷ lệ phần trăm cho thuộc tính angleSize - cảm ơn vì câu trả lời này. Đối với những người khác tìm thấy câu trả lời này, điều quan trọng là xác định các phần tử riêng lẻ (trái, phải, v.v.) hoặc chúng sẽ không được áp dụng.

— DalvikDroid

4

Bằng cách sử dụng cornerRadiuscùng với insetbạn có thể có được hình tròn:

<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
nguồn

1

Dễ thôi) cảm ơn bạn. Hoạt động tốt hơn nhiều so với kiểu dáng và hình dạng Biểu tượng.

— Ở lại