Bir düğmenin köşeleri nasıl yuvarlak hale getirilir?


457

Bir buttonturun köşelerini yapmak istiyorum . Android'de bunu başarmanın kolay bir yolu var mı?




11
bu geniş bir soru değil, kesinlikle mesele. "çok geniş" olarak işaretlemek sadece değiştirilmesi gereken bir SO zihniyeti. Diktatör olmayı bırak.
user734028

2
user734028 ile aynı fikirde: ne kadar da çok geniş olduğu için nasıl kapalı geliyor? OP köşe yarıçapını N piksele nasıl ayarlayacağını sorsaydı, bu daha spesifik olabilirdi. Haydi!
nyholku

Yanıtlar:


679

Böyle bir şey istiyorsanız

Düğme önizlemesi

İşte kod.

1. mybutton.xml gibi çekilebilir klasörünüzde bir xml dosyası oluşturun ve aşağıdaki işaretlemeyi yapıştırın:

<?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.Şimdi görünümünüzün arka planı için bu çekilebilir kullanın. Görünüm düğmesi ise böyle bir şey:

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

çöktü: Neden: org.xmlpull.v1.XmlPullParserException: İkili XML dosya satırı # 24: <item> etiketi, çekilebilir tanımlayan bir 'çekilebilir' öznitelik veya alt etiket gerektirir
Zennichimaro

3
bunu programlı olarak yapabilir miyiz?
Katil

Öğe seçicinin DÜZENLENMESİ gerektiği bildiriliyor: Üzgünüz, dosya çekilebilir yerine değerler klasörünün içindeydi. Aktardığımda işe yaradı.
F0r3v3r-A-N00b

tıklandığında gölgeyi ne yaratır? altta gölge genişliğini azaltmaya çalışıyorum ... şanssız
Neville Nazerane

Düğme köşelerinin nasıl kodlanması gerektiğini açıklamak için seçicilerin nasıl kodlandığını gösteren ne olduğunu anlamıyorum.
TavernSenses

345

Aşağıdaki gibi çekilebilir klasörde bir xml dosyası oluşturun

<?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>

Köşeleri yuvarlak yapmak istediğiniz düğmeye arka plan olarak uygulayın.

Veya aşağıdaki gibi her köşe için ayrı yarıçap kullanabilirsiniz

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

57
Köşeleri android için kısaltabilirsiniz: radius = "10dp", hepsi için geçerli
Ben Simpson

22
Bu, çeşitli düğme durumlarını (basılı, odaklanmış, varsayılan) desteklemediğinden tam bir çözüm değildir. Daha iyi bir çözüm için bkz. Stackoverflow.com/questions/9334618/rounded-button-android
JosephL

3
@BenSimpson, köşe yarıçaplarının her birini ayrı ayrı tanımlamak yerine sadece bir satır koyduğunuzda şekilde bir fark olduğunu göreceksiniz.
Garima Tiwari

bu vurgulanan cevaptan daha mükemmel çalışır. bir milyon teşekkürler!
Dan Linh

37

Aşağıdaki gibi bir XML dosyası oluşturun. Düğme için arka plan olarak ayarlayın. Düğme için daha fazla eğriye ihtiyacınız varsa, yarıçap niteliğini isteğinize göre değiştirin.

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>

Düğmenize arka plan ayarlayın:

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

30

çekilebilir klasörde shape.xml oluştur

shape.xml gibi

<?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>

ve myactivity.xml içinde

kullanabilirsiniz

<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

MyButton.xml dosyası oluştur

<?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>

düğmene ekle

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

16

Android'de bunu başarmanın kolay bir yolu var mı?

Evet, bugün var ve çok basit.
Sadece kullanmak MaterialButtoniçinde Malzeme Bileşenleri kütüphanesinde ileapp:cornerRadius öznitelik.

Gibi bir şey:

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

resim açıklamasını buraya girin

Köşeleri yuvarlatılmış bir Düğme elde etmek yeterlidir.

Malzeme düğmesi stillerinden birini kullanabilirsiniz . Örneğin:

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

resim açıklamasını buraya girin

Ayrıca 1.1.0 sürümünden başlayarak düğmenizin şeklini de değiştirebilirsiniz . Bu shapeAppearanceOverlayözelliği düğme stilinde kullanmanız yeterlidir:

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

Sonra sadece kullanın:

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

Ayrıca shapeAppearanceOverlayxml düzeninde de uygulayabilirsiniz :

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

shapeAppearanceHer köşe için farklı şekil ve boyut olması da sağlar:

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

resim açıklamasını buraya girin


Ayrıca Material theme kullanmanız gerekir
Vlad

@Vlad Evet, malzeme bileşenleri malzeme teması gerektirir.
Gabriele Mariotti

11

Ben öğrendim basit yolu, çekilebilir klasörde yeni bir xml dosyası yapmak ve daha sonra o xml dosyasına düğmeleri arka plan işaret oldu. kullanılan kod heres:

<?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
Özel çekilebilir arka planda Malzeme teması dalgalanma efektini geri yüklemek android:foreground="?attr/selectableItemBackground"için Düğme Görünümü'ne ekleyin . Bkz. Stackoverflow.com/questions/38327188/…
Mr-IDE

11

Çekilebilir klasörde rounded_btn.xml dosyası oluşturun ...

<?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>

ve this.xml dosyasını düğme arka planı olarak kullanın

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

7

Bu bağlantı, ihtiyacınız olan tüm bilgilere sahiptir. Buraya

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>

ve 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>

Bu size istediğiniz sonucu vermelidir.

İyi şanslar


6

stil ikonu, ile, ikon resim açıklamasını buraya girin

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

shape.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

vektör çekmeceleri kullanıyorsanız, çekilebilir tanımınızda bir <köşe> öğesi belirtmeniz yeterlidir. Bunu bir blog yayınında ele aldım .

Bitmap / 9-yama çekmeceleri kullanıyorsanız, bitmap görüntüsünde saydamlığa sahip köşeler oluşturmanız gerekir.


0

çekilebilir klasör

<?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>

düzen klasörü

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

kare arka plan önlemek için stil ekleyin emin olun

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.