Bagaimana cara membuat sudut tombol bulat?


457

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




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

Jawaban:


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

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"

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

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

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

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

masukkan deskripsi gambar di sini

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

masukkan deskripsi gambar di sini

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>

masukkan deskripsi gambar di sini


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>

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

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


6

tombol gaya dengan ikon masukkan deskripsi gambar di sini

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


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.


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

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.