Làm thế nào để làm một nút tròn?


140

Tôi đang cố gắng tạo một nút tròn, nhưng tôi không biết làm thế nào tôi có thể làm điều đó. Tôi có thể tạo nút với các góc tròn, nhưng làm thế nào tôi có thể làm tròn vòng tròn. Nó không giống nhau. Xin vui lòng, cho tôi biết, nó có thể trên Android? Cảm ơn bạn.


1
có lời giải thích tốt ở đây stackoverflow.com/questions/9884202/custom-circle-button
Milon

Câu trả lời:


265

Tạo một tệp xml có tên roundedbutton.xmltrong thư mục drawable

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="rectangle">
    <solid android:color="#eeffffff" />
    <corners android:bottomRightRadius="8dp"
        android:bottomLeftRadius="8dp"  
        android:topRightRadius="8dp"
        android:topLeftRadius="8dp"/>
</shape>

Cuối cùng đặt đó làm nền để bạn Buttonnhưandroid:background = "@drawable/roundedbutton"

Nếu bạn muốn làm cho nó tròn hoàn toàn, hãy thay đổi bán kính và giải quyết một cái gì đó phù hợp với bạn.


Bạn có cần hậu tố .xml không? Tôi đã thấy một ví dụ mà không có
Neil

@ Nếu bạn không cần thêm hậu tố xml, tôi đã làm nó với mục đích trình diễn và hiểu rõ ràng về khái niệm này để người đọc không lấy ví dụ sai, hỗ trợ tự động nhật thực sẽ giúp bạn tìm ra nếu cần .xml hoặc không, tôi có thói quen sử dụng ctrl + dấu cách trên máy windows của mình để tự động hoàn thành các lệnh xml.
Arif Nadeem

2
Bạn không cần biểu tượng '@' trước từ có thể vẽ được?
shim

Liệu giải pháp này có kết quả khác với việc chỉ sử dụng hình ảnh tròn làm nền?
Siavash

6
Ngoài ra, tại sao không sử dụng android: shape = "oval"
Siavash

37

Nếu sử dụng Android Studio, bạn chỉ có thể sử dụng:

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring">
        <solid android:color="#FFFFFF"/>

    </shape>

Điều này làm việc tốt cho tôi, hy vọng điều này sẽ giúp ai đó.


2
đó phải là câu trả lời được chấp nhận, sử dụng các giá trị góc không vượt quá các góc được làm tròn và câu hỏi này là về một vòng tròn. Cảm ơn Shaun vì câu trả lời này
Don

11
Sử dụng ringkhông hiển thị bất cứ điều gì. Tốt hơn để sử dụng oval.
CopsOnRoad

31
  1. Tạo một tệp drawable / button_states.xml có chứa:

    <?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="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>
        </item>
        <item android:state_pressed="true"> 
            <shape android:shape="rectangle">
            <corners android:radius="1000dp" />
            <solid android:color="#3AA76D" />
            <stroke
                android:width="2dip"
                android:color="#03ae3c" />
            <padding
                android:bottom="4dp"
                android:left="4dp"
                android:right="4dp"
                android:top="4dp" />
            </shape>
        </item>
    </selector>
  2. Sử dụng nó trong thẻ nút trong bất kỳ tập tin bố trí

    <Button
        android:layout_width="220dp"
        android:layout_height="220dp"
        android:background="@drawable/button_states"
        android:text="@string/btn_scan_qr"
        android:id="@+id/btn_scan_qr"
        android:textSize="15dp"
    />

nó hoạt động hoàn hảo, cảm ơn bạn. bạn có thể giúp tôi vẽ hình chữ nhật từ giữa ra ngoài vòng tròn trông giống như một chữ 'Q'
CLIFFORD PY

Hoạt động tốt, nhưng tại sao chúng tôi đặt bán kính lên 1000dp? bạn có thể giải thích dùm không?
Jamshaid Kamran

@JamshaidKamran 1000dp là kích thước tùy ý đủ lớn để làm cho nút tròn.
rraallvv

Có tài nguyên kích thước Android mà chúng ta có thể sử dụng thay vì 1000dp không?
rraallvv


6

<corners android:bottomRightRadius="180dip"
    android:bottomLeftRadius="180dip"
    android:topRightRadius="180dip"
    android:topLeftRadius="180dip"/>

<solid android:color="#6E6E6E"/> <!-- this one is ths color of the Rounded Button -->

và thêm nó vào mã nút

    android:layout_width="50dp"
    android:layout_height="50dp"

5

Sử dụng hình dạng như hình bầu dục. Điều này làm cho nút hình bầu dục

<item>
    <shape android:shape="oval" >
        <stroke
            android:height="1.0dip"
            android:width="1.0dip"
            android:color="#ffee82ee" />

        <solid android:color="#ffee82ee" />

        <corners
            android:bottomLeftRadius="12.0dip"
            android:bottomRightRadius="12.0dip"
            android:radius="12.0dip"
            android:topLeftRadius="12.0dip"
            android:topRightRadius="12.0dip" />
    </shape>
</item>


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

Đặt nó trên các tài nguyên có thể vẽ XML của bạn và nút sử dụng và hình ảnh đơn giản với một hình ảnh tròn, sử dụng khả năng vẽ của bạn làm nền.



3

sử dụng ImageButton thay vì Nút ....

và tạo hình ảnh tròn với nền trong suốt


3

Nếu bạn muốn có một nút tròn tìm FAB và bạn đang sử dụng thư viện Thành phần Vật liệu chính thức, bạn có thể dễ dàng làm như thế này:

<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ả:

nhập mô tả hình ảnh ở đây

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


2

Đối với một nút tròn tạo một hình dạng:

<?xml version="1.0" encoding="utf-8"?>

<stroke
    android:width="8dp"
    android:color="#FFFFFF" />

<solid android:color="#ffee82ee" />


<corners
    android:bottomLeftRadius="45dp"
    android:bottomRightRadius="45dp"
    android:topLeftRadius="45dp"
    android:topRightRadius="45dp" />

sử dụng nó làm nền của liên kết nút của bạn




0

Bạn có thể sử dụng FloatingActionButton của google

XMl:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@android:drawable/ic_dialog_email" />

Java:

  @Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    FloatingActionButton bold = (FloatingActionButton) findViewById(R.id.fab);
    bold.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
        // Do Stuff
        }
    });
}

Học sinh lớp

    compile 'com.android.support:design:23.4.0'

0
  1. Sử dụng các nút hình ảnh và làm nền như hình ảnh bạn muốn.
  2. Tạo hình ảnh từ liên kết phòng thu tài sản Android -

" Https: 2C% 200) & backColor = rgb (96% 2C% 20125% 2C% 20139) & crop = 1 & backgroundShape = circle & Effects = none & name = ic_home "

và tải xuống, thêm nó, bên trong tìm thư mục mipmap-hdpi.

  1. sao chép hình ảnh từ thư mục mipmap-hdpi và dán nó vào thư mục drwable của dự án Android của bạn.

  2. Bây giờ đặt nền là hình ảnh đó.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.