Nút vòng tròn tùy chỉnh

Tôi muốn tạo nút tùy chỉnh và tôi cần nó là vòng tròn. Làm thế nào tôi có thể tạo một nút tròn? Tôi không nghĩ rằng có thể với draw9patch.

Ngoài ra tôi không biết làm thế nào để thực hiện nút tùy chỉnh!

Bạn có gợi ý nào không?

Sử dụng xml drawable như thế này:

Lưu các nội dung sau như round_button.xmltrong drawablethư mục

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <shape android:shape="oval">
            <solid android:color="#fa09ad"/>
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape android:shape="oval">
            <solid android:color="#c20586"/>
        </shape>
    </item>
</selector>

Hiệu ứng vật liệu Android: Mặc dù FloatingActionButtonlà một tùy chọn tốt hơn, Nếu bạn muốn thực hiện bằng cách sử dụng bộ chọn xml, hãy tạo một thư mục drawable-v21trong đó resvà lưu một thư mục khác round_button.xmlở đó với xml sau

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#c20586">
    <item>
        <shape android:shape="oval">
            <solid android:color="#fa09ad"/>
        </shape>
    </item>
</ripple>

Và đặt nó làm nền của Buttonxml như thế này:

<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@drawable/round_button"
android:gravity="center_vertical|center_horizontal"
android:text="hello"
android:textColor="#fff" />

Quan trọng:

1. Nếu bạn muốn nó hiển thị tất cả các trạng thái này (được bật, tắt, tô sáng, v.v.), bạn sẽ sử dụng bộ chọn như được mô tả ở đây .
2. Bạn đã giữ cả hai tệp để làm cho khả năng tương thích ngược có thể rút ra được. Nếu không, bạn sẽ phải đối mặt với những ngoại lệ kỳ lạ trong phiên bản Android trước đó.

Markushi đã viết một widget nút tròn với hiệu ứng tuyệt vời. Nhấn vào đây !

AngryTool cho nút android tùy chỉnh

Bạn có thể tạo bất kỳ loại nút android tùy chỉnh nào với trang web công cụ này ... tôi tạo nút tròn và nút vuông với góc tròn với công cụ này .. Truy cập vào nó có thể tôi sẽ giúp bạn

Với thư viện Thành phần Vật liệu chính thức, bạn có thể sử dụng kiểu MaterialButtonáp dụng Widget.MaterialComponents.Button.Icon.

Cái gì đó như:

   <com.google.android.material.button.MaterialButton
            android:layout_width="48dp"
            android:layout_height="48dp"
            style="@style/Widget.MaterialComponents.Button.Icon"
            app:icon="@drawable/ic_add"
            app:iconSize="24dp"
            app:iconPadding="0dp"
            android:insetLeft="0dp"
            android:insetTop="0dp"
            android:insetRight="0dp"
            android:insetBottom="0dp"
            app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Rounded"
            />

Hiện nay app:iconPadding="0dp", android:insetLeft, android:insetTop, android:insetRight, android:insetBottomthuộc tính cần thiết để tập trung vào biểu tượng vào nút tránh thêm không gian đệm.

Sử dụng app:shapeAppearanceOverlaythuộc tính để có được các góc tròn. Trong trường hợp này, bạn sẽ có một vòng tròn.

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

Kết quả cuối cùng:

nếu bạn muốn sử dụng VectorDrawable và ConstraintLayout

<FrameLayout
            android:id="@+id/ok_button"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:foreground="?attr/selectableItemBackgroundBorderless"
            android:background="@drawable/circle_button">
                <android.support.constraint.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">
                    <ImageView
                        android:id="@+id/icon_of_button"
                        android:layout_width="32dp"
                        android:layout_height="32dp"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintTop_toTopOf="parent"
                        app:layout_constraintRight_toRightOf="parent"
                        app:layout_constraintLeft_toLeftOf="parent"
                        app:srcCompat="@drawable/ic_thumbs_up"/>
                    <TextView
                        android:id="@+id/text_of_button"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        app:layout_constraintTop_toBottomOf="@+id/icon_of_button"
                        app:layout_constraintRight_toRightOf="parent"
                        app:layout_constraintLeft_toLeftOf="parent"
                        android:layout_marginTop="5dp"
                        android:textColor="@android:color/white"
                        android:text="ok"
                        />
                </android.support.constraint.ConstraintLayout>
            </FrameLayout>

nền vòng tròn: circle_button.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="1000dp" />
<solid android:color="#41ba7a" />
<stroke
    android:width="2dip"
    android:color="#03ae3c" />
<padding
    android:bottom="4dp"
    android:left="4dp"
    android:right="4dp"
    android:top="4dp" />
</shape>

Đối với nút tìm FAB, kiểu này trên MaterialButton:

<com.google.android.material.button.MaterialButton
    style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton"
    app:cornerRadius="28dp"
    android:layout_width="56dp"
    android:layout_height="56dp"
    android:text="1" />

Kết quả:

Nếu bạn thay đổi kích thước, hãy cẩn thận sử dụng một nửa kích thước nút là app:cornerRadius.