Nút tròn trong Android

Tôi muốn tạo các nút tròn trong chương trình Android. Tôi đã xem Cách tạo EditText với các góc tròn?

Điều tôi muốn đạt được là:

1. Các nút cạnh tròn
2. Thay đổi hình nền / giao diện của Nút trên các trạng thái khác nhau (Như Onclick, Focus)
3. Sử dụng PNG của riêng tôi cho nền chứ không phải tạo hình.

Bạn có thể thực hiện một nút tròn ở góc mà không cần dùng đến ImageView.

Một nền tài nguyên selector, button_background.xml:

<?xml version="1.0" encoding="utf-8" ?> 
     <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <!--  Non focused states 
      --> 
      <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/button_unfocused" /> 
      <item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/button_unfocused" /> 
     <!--  Focused states 
      --> 
      <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/button_focus" /> 
      <item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/button_focus" /> 
     <!--  Pressed 
      --> 
      <item android:state_pressed="true" android:drawable="@drawable/button_press" /> 
    </selector>

Đối với mỗi trạng thái, một tài nguyên có thể vẽ được, ví dụ: button_press.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
  <stroke android:width="1dp" android:color="#FF404040" /> 
  <corners android:radius="6dp" /> 
  <gradient android:startColor="#FF6800" android:centerColor="#FF8000" android:endColor="#FF9700" android:angle="90" /> 
</shape>

Lưu ý cornersphần tử, điều này giúp bạn có các góc tròn!

Sau đó đặt nền có thể vẽ trên nút:

android:background="@drawable/button_background"

EDIT (9/2018) : Kỹ thuật tương tự có thể được sử dụng để tạo một nút tròn. Hình tròn thực sự chỉ là một nút hình vuông với kích thước bán kính được đặt bằng 1/2 cạnh của hình vuông

Ngoài ra, trong ví dụ trên , các yếu tố không cần thiết strokevà gradientkhông cần thiết, chúng chỉ là ví dụ và cách bạn có thể thấy hình dạng góc tròn

Nếu bạn cần một nút tròn trong Android, thì hãy tạo tệp XML "RoundShapeBtn.xml" có thể vẽ được.

 <?xml version="1.0" encoding="utf-8"?>
  <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:padding="10dp">   
  <solid android:color="#6E6E6E"/> <!-- this one is ths color of the Rounded Button -->
  <corners
   android:bottomRightRadius="10dp"
   android:bottomLeftRadius="10dp"
   android:topLeftRadius="10dp"
   android:topRightRadius="10dp"/>
</shape>

Thêm cái này vào mã nút của bạn:

android:background="@drawable/RoundShapeBtn"

tạo tệp xml trong thư mục có thể vẽ trong Android như:

Round_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="20dp"/> // if you want clear round shape then make radius size is half of your  button`s height.
    <solid android:color="#EEFFFFFF"/> // Button Colour
    <padding
        android:bottom="5dp"
        android:left="10dp"
        android:right="10dp"
        android:top="5dp"/>

</shape>

Bây giờ tệp xml này làm nền cho các nút của bạn.

 <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@drawable/rounded_button"
        android:text="@string/button_text"
        android:textColor="@color/black"/>

Mở rộng ImageViewnhư vậy:

public class RoundedImageView extends ImageView {
  private static final String TAG = "RoundedImageView";

  private float mRadius = 0f;

  public RoundedImageView(Context context) {
    super(context);
  }

  public RoundedImageView(Context context, AttributeSet attrs) {
    super(context, attrs);

    // retrieve styles attributes
    TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.RoundedView);
    mRadius = a.getDimension(R.styleable.RoundedView_radius, 0f);
    a.recycle();
  }

  @Override
  protected void onDraw(Canvas canvas) {
    // only do this if we actually have a radius
    if(mRadius > 0) {
      RectF rect = new RectF(0, 0, getWidth(), getHeight());
      Path clipPath = new Path();
      clipPath.addRoundRect(rect, mRadius, mRadius, Path.Direction.CW);
      canvas.clipPath(clipPath);
    }
    super.onDraw(canvas);
  }
}

Và áp dụng tài nguyên nền bình thường của bạn cho nó và nó sẽ được cắt bằng các góc tròn.

Google khuyến nghị rằng bạn không bắt chước các phần tử giao diện người dùng từ các nền tảng khác. Tôi sẽ không đặt các nút kiểu iOS tròn trong ứng dụng Android.

Điều này có thể được thực hiện bằng cách sử dụng thuộc tính góc. Nhìn vào xml dưới đây.

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

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

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

Tốt hơn nhiều là đặt các trạng thái và hình dạng của nút vào 1 tệp bộ chọn xml. Điều đó sẽ làm cho ứng dụng của bạn chạy nhanh hơn / tốt hơn. Hãy thử điều này (được phép của Giới thiệu về Phát triển Ứng dụng Android). Không gửi thư rác ở đây chỉ hiển thị đây không phải là mã của tôi.

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:state_pressed="true" >
    <shape android:shape="rectangle"  >
     <corners android:radius="12dip" />
     <stroke android:width="1dip" android:color="#333333" />
     <gradient android:angle="-90" android:startColor="#333333"      android:endColor="#555555"  />            
    </shape>
    </item>
    <item android:state_focused="true">
    <shape android:shape="rectangle"  >
     <corners android:radius="12dip" />
     <stroke android:width="1dip" android:color="#333333" />
     <solid android:color="#58857e"/>       
    </shape>
    </item>  
    <item >
    <shape android:shape="rectangle"  >
     <corners android:radius="12dip" />
     <stroke android:width="1dip" android:color="#333333" />
     <gradient android:angle="-90" android:startColor="#333333" android:endColor="#555555" />            
    </shape>
    </item>

    </selector>

Mẹo thiết kế PS: các gradient và hình chữ nhật tròn được sử dụng tốt nhất khi bạn khó có thể biết chúng đang ở đó và sử dụng một cách khôn ngoan.

Các nút tròn có thể được tạo bằng cách sử dụng hình dạng vòng có thể vẽ được, xem http://www.zoftino.com/android-shape-drawable-examples

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="0dp"
    android:shape="ring"
    android:thickness="40dp"
    android:useLevel="false">
    <solid android:color="@color/colorPrimary" />
    <padding android:bottom="50dp"
        android:left="16dp"
        android:right="16dp"
        android:top="50dp"/>
</shape>

Tạo tài nguyên có thể vẽ có tên btnOval -> sau đó mã quá khứ;

 <?xml version="1.0" encoding="utf-8"?>
      <shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="oval"  
android:padding="10dp">   
      <solid android:color="#6E6E6E"/> 
    </shape>

và người dùng bên trong thẻ nút như,

<Button
andorid:width=""
android:hieght=""
android:background="@Drawable/btnOval"
/>

Hãy thử mã bên dưới Tạo một tệp có thể vẽ được có tên là circle_button.xml và chèn vào bên dưới

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

Sau đó, thay đổi nền của nút thành tệp có thể vẽ này

 <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/circle_button"
                android:text="Button"/>

Nếu bạn muốn có một nút tròn đầy đủ, bạn có thể sử dụng có thể vẽ bên dưới

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

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

    <size
        android:width="120dp"
        android:height="120dp"/>
</shape>