Bagaimana cara membuat sudut tombol bulat?

457

Saya ingin membuat sudut buttonbulat. Apakah ada cara mudah untuk mencapai ini di Android?

android android-button rounded-corners

— artis
sumber

2

lihat ini: nishantvnair.wordpress.com/2010/11/09/...

— Lavanya

material.io/develop/android/components/material-button baru saja mengatur radius sudut

— Swagger 68

11

ini bukan pertanyaan luas, itu benar-benar to the point. menandainya sebagai "terlalu luas" hanyalah mentalitas SO yang perlu diubah. Berhentilah menjadi diktator.

— user734028

2

setuju dengan user734028: apa-apaan kenapa bisa ditutup terlalu luas ?? satu-satunya cara ini bisa lebih spesifik jika OP bertanya bagaimana mengatur radius sudut ke N piksel. Ayolah!

— nyholku

679

Jika Anda menginginkan sesuatu seperti ini

Pratinjau tombol

ini kodenya.

1. Buat file xml di folder yang dapat digambar seperti mybutton.xml dan rekatkan markup berikut:

<?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="3dip" />
            <stroke android:width="1dip" android:color="#5e7974" />
            <gradient android:angle="-90" android:startColor="#345953" android:endColor="#689a92"  />            
        </shape>
    </item>
    <item android:state_focused="true">
        <shape android:shape="rectangle"  >
            <corners android:radius="3dip" />
            <stroke android:width="1dip" android:color="#5e7974" />
            <solid android:color="#58857e"/>       
        </shape>
    </item>  
    <item >
       <shape android:shape="rectangle"  >
            <corners android:radius="3dip" />
            <stroke android:width="1dip" android:color="#5e7974" />
            <gradient android:angle="-90" android:startColor="#8dbab3" android:endColor="#58857e" />            
       </shape>
    </item>
</selector>

2.Sekarang gunakan gambar ini untuk latar belakang tampilan Anda. Jika tampilan adalah tombol maka kira-kira seperti ini:

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:textColor="#ffffff"
    android:background="@drawable/mybutton"
    android:text="Buttons" />

— Md. Monsur Hossain Tonmoy
sumber

itu macet: Disebabkan oleh: org.xmlpull.v1.XmlPullParserException: Binary XML file line # 24: tag <item> membutuhkan atribut 'drawable' atau tag anak yang mendefinisikan

— drawable

3

dapatkah kita melakukan ini secara terprogram.

— Pembunuh

Dikatakan selektor Elemen harus dinyatakan EDIT: Maaf file itu di dalam folder nilai bukan yang dapat digambar. Ketika saya mentransfernya, itu berhasil.

— F0r3v3r-A-N00b

apa yang menciptakan bayangan saat klik? saya mencoba mengurangi lebar bayangan di bagian bawah ... tidak berhasil

— Neville Nazerane

Saya tidak melihat apa yang menunjukkan bagaimana penyeleksi berkode berkaitan dengan menjelaskan bagaimana sudut tombol harus dikodekan.

— TavernSenses

345

Buat file xml di folder yang dapat digambar seperti di bawah ini

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" android:padding="10dp">
    <!-- you can use any color you want I used here gray color-->
    <solid android:color="#ABABAB"/> 
    <corners android:radius="10dp"/>
</shape>

Terapkan ini sebagai latar belakang untuk tombol yang Anda ingin membuat sudut bulat.

Atau Anda dapat menggunakan jari-jari terpisah untuk setiap sudut seperti di bawah ini

android:bottomRightRadius="10dp"
android:bottomLeftRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp"

— Sandip Jadhav
sumber

57

Anda dapat mempersingkat sudut ke android: radius = "10dp", yang akan berlaku untuk semua

— Ben Simpson

22

Ini bukan solusi lengkap karena tidak mendukung berbagai status tombol (ditekan, fokus, default). Untuk solusi yang lebih baik, lihat stackoverflow.com/questions/9334618/rounded-button-android

— JosephL

3

@ BenSimpson, Anda akan melihat bahwa ada perbedaan dalam bentuk ketika Anda hanya menempatkan satu baris daripada mendefinisikan masing-masing sudut jari secara individual.

— Garima Tiwari

ini bekerja lebih sempurna daripada jawaban yang disorot. terima kasih satu juta!

— Dan Linh

37

Buat file XML seperti di bawah ini. Atur sebagai latar belakang tombol. Ubah atribut radius ke keinginan Anda, jika Anda membutuhkan lebih banyak kurva untuk tombol.

button_background.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/primary" />
    <corners android:radius="5dp" />
</shape>

Setel latar belakang ke tombol Anda:

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/button_background"/>

— Pavithra Purushothaman
sumber

30

buat shape.xml di folder yang dapat digambar

seperti shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
  <stroke android:width="2dp"
    android:color="#FFFFFF"/>
  <gradient 
    android:angle="225"
    android:startColor="#DD2ECCFA"
    android:endColor="#DD000000"/>
<corners
    android:bottomLeftRadius="7dp"
    android:bottomRightRadius="7dp"
    android:topLeftRadius="7dp"
   android:topRightRadius="7dp" />
</shape>

dan di myactivity.xml

kamu bisa menggunakan

<Button
    android:id="@+id/btn_Shap"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    android:text="@string/Shape"
    android:background="@drawable/shape"/>

— Almostafa
sumber

16

Buat file myButton.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/colorButton"/>
    <corners android:radius="10dp"/>
</shape>

tambahkan ke tombol Anda

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

— Langit
sumber

16

Apakah ada cara mudah untuk mencapai ini di Android?

Ya, hari ini ada, dan itu sangat sederhana.
Cukup gunakan MaterialButtondi pustaka Komponen Material denganapp:cornerRadius atribut.

Sesuatu seperti:

    <com.google.android.material.button.MaterialButton
        android:text="BUTTON"
        app:cornerRadius="8dp"
        ../>

Cukup untuk mendapatkan Button dengan sudut membulat.

Anda dapat menggunakan salah satu gaya tombol Material . Sebagai contoh:

<com.google.android.material.button.MaterialButton
    style="@style/Widget.MaterialComponents.Button.OutlinedButton"
    .../>

Juga mulai dari versi 1.1.0 Anda juga dapat mengubah bentuk tombol Anda. Cukup gunakan shapeAppearanceOverlayatribut dalam gaya tombol:

  <style name="MyButtonStyle" parent="Widget.MaterialComponents.Button">
    <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay.MyApp.Button.Rounded</item>
  </style>

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

Kemudian gunakan saja:

<com.google.android.material.button.MaterialButton
   style="@style/MyButtonStyle"
   .../>

Anda juga dapat menerapkan shapeAppearanceOverlaytata letak xml:

<com.google.android.material.button.MaterialButton
   app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Rounded"
   .../>

The shapeAppearancememungkinkan juga untuk memiliki bentuk yang berbeda dan dimensi untuk setiap sudut:

<style name="ShapeAppearanceOverlay.MyApp.Button.Rounded" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerFamilyTopRight">cut</item>
    <item name="cornerFamilyBottomRight">cut</item>
    <item name="cornerSizeTopLeft">32dp</item>
    <item name="cornerSizeBottomLeft">32dp</item>
</style>

— Gabriele Mariotti
sumber

Juga diperlukan untuk menggunakan tema Material

— Vlad

@Vlad Ya, komponen material membutuhkan tema material.

— Gabriele Mariotti

11

Cara sederhana yang saya temukan adalah membuat file xml baru di folder drawable dan kemudian arahkan tombol latar belakang ke file xml itu. Inilah kode yang saya gunakan:

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

<solid android:color="#ff8100"/>
<corners android:radius="5dp"/>

</shape>

— Antonio Sanchez
sumber

3

Untuk mengembalikan efek riak Material-tema di latar belakang yang dapat digambar khusus, tambahkan android:foreground="?attr/selectableItemBackground"Button View. Lihat stackoverflow.com/questions/38327188/…

— Mr-IDE

11

Buat file rounded_btn.xml di folder Drawable ...

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

     <stroke android:width="1dp"
        android:color="@color/#000000"
        />

     <padding android:left="1dp"
         android:top="1dp"
         android:right="1dp"
         android:bottom="1dp"
         /> 

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

dan gunakan file this.xml sebagai latar belakang tombol

<Button
android:id="@+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/rounded_btn"
android:text="Test" />

— Ravi Makvana
sumber

7

Tautan ini memiliki semua informasi yang Anda butuhkan. Sini

Shape.xml

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

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

    <corners    android:bottomLeftRadius="8dip"
                android:topRightRadius="8dip"
                android:topLeftRadius="1dip"
                android:bottomRightRadius="1dip"
                />
</shape>

dan main.xml

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent">

    <TextView   android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Hello Android from NetBeans"/>

    <Button android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Nishant Nair"
            android:padding="5dip"
            android:layout_gravity="center"
            android:background="@drawable/button_shape"
            />
</LinearLayout>

Ini akan memberi Anda hasil yang Anda inginkan.

Semoga berhasil

— Deep Singh Baweja
sumber

6

tombol gaya dengan ikon

   <Button
        android:id="@+id/buttonVisaProgress"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="5dp"
        android:background="@drawable/shape"
        android:onClick="visaProgress"
        android:drawableTop="@drawable/ic_1468863158_double_loop"
        android:padding="10dp"
        android:text="Visa Progress"
        android:textColor="@android:color/white" />

bentuk.xml

    <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="14dp" />
<gradient
    android:angle="45"
    android:centerColor="#1FA8D1"
    android:centerX="35%"
    android:endColor="#060d96"
    android:startColor="#0e7e1d"
    android:type="linear" />
<padding
    android:bottom="0dp"
    android:left="0dp"
    android:right="0dp"
    android:top="0dp" />
<size
    android:width="270dp"
    android:height="60dp" />
<stroke
    android:width="3dp"
    android:color="#000000" />

— AGTHAMAYS
sumber

4

jika Anda menggunakan drawable vektor, maka Anda hanya perlu menentukan elemen <corners> dalam definisi drawable Anda. Saya telah membahas ini di sebuah posting blog .

Jika Anda menggunakan bitmap / 9-patch drawable maka Anda harus membuat sudut dengan transparansi dalam gambar bitmap.

— Mark Allison
sumber

0

folder yang dapat digambar

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#FFFFFF"/>
    <corners android:radius="30dp"/>
    <stroke android:width="2dp" android:color="#999999"/>
</shape>

folder tata letak

<Button
    android:id="@+id/button2"
    <!-- add style to avoid square background -->
    style="@style/Widget.AppCompat.Button.Borderless"
    android:background="@drawable/corner_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    />

pastikan menambahkan gaya untuk menghindari latar belakang persegi

— Hamdy Abd El Fattah
sumber