Yuvarlak bir düğme nasıl yapılır?


Yanıtlar:


265

roundedbutton.xmlÇ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">
    <solid android:color="#eeffffff" />
    <corners android:bottomRightRadius="8dp"
        android:bottomLeftRadius="8dp"  
        android:topRightRadius="8dp"
        android:topLeftRadius="8dp"/>
</shape>

Sonunda bunu arka planınız Buttonolarakandroid:background = "@drawable/roundedbutton"

Tamamen yuvarlatılmış yapmak istiyorsanız, yarıçapı değiştirin ve sizin için uygun olan bir şeye razı olun.


.Xml son ekine ihtiyacınız var mı? Ben olmadan bir örnek gördüm
Neil

@ Xml son ekini eklemenize gerek yok, bunu örnek göstermek ve kavramın net bir şekilde anlaşılması için yaptım, böylece okuyucu örneği yanlış almaz, eclipse auto-yardımcısı .xml gerekip gerekmediğini bulmanıza yardımcı olur ya da değil, xml komutlarını otomatik olarak tamamlamak için Windows makinemde ctrl + boşluk kullanma alışkanlığım var.
Arif Nadeem

2
Çekilebilir kelimeden önce '@' sembolüne ihtiyacınız yok mu?
shim

Bu çözümün yalnızca arka plan olarak yuvarlak bir görüntü kullanmaktan farklı bir sonucu var mı?
Siavash

6
Ayrıca, neden android kullanmıyorsunuz: shape = "oval"
Siavash

39

Android Studio kullanıyorsanız şunları kullanabilirsiniz:

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

bu benim için iyi çalışıyor, umarım bu birine yardımcı olur.


2
kabul edilen cevap olmalı, köşeler değerlerini kullanmak yuvarlatılmış köşelerin ötesine geçmez ve bu soru bir çemberle ilgilidir. Bu cevap için teşekkürler Shaun
Don

12
Kullanmak ringhiçbir şey göstermez. Kullanmak daha iyi oval.
CopsOnRoad

31
  1. Aşağıdakileri içeren çizilebilir / button_states.xml dosyası oluşturun:

    <?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. Herhangi bir düzen dosyasındaki düğme etiketinde kullanın

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

mükemmel iş, teşekkür ederim. merkezden dairenin dışına dikdörtgen çizmeme yardım edebilir misin 'Q' gibi görünüyor
CLIFFORD PY

İyi çalışıyor, ama neden yarıçapı 1000dp'ye koyduk? Açıklayabilir misin?
Jamshaid Kamran

@JamshaidKamran 1000dp, düğmeyi döndürecek kadar büyük olan keyfi bir boyuttur.
rraallvv

1000dp yerine kullanabileceğimiz bir Android boyut kaynağı var mı?
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 -->

ve bunu düğme koduna ekleyin

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

5

Şekli oval olarak kullandı. Bu düğmeyi oval yapar

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

XML çekilebilir kaynaklarınızda ve çizilebilir arka plan olarak kullanarak yuvarlak bir görüntü ile basit kullanım ve görüntü düğmesini ayarlayın.



3

Kullanım ımagebutton yerine Button ....

ve şeffaf arka plan ile yuvarlak görüntü yapmak


3

Bir FAB görünümlü dairesel düğme istiyorsanız ve resmi Malzeme Bileşeni kütüphanesini kullanıyorsanız, bunu kolayca yapabilirsiniz:

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

Sonuç:

resim açıklamasını buraya girin

Düğmenin boyutunu değiştirirseniz, düğme boyutunun yarısını olarak kullanmaya dikkat edin app:cornerRadius.


2

Yuvarlak bir düğme için bir şekil oluşturun:

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

düğme bağlantınızın arka planı olarak kullanın




0

Google'ın FloatingActionButton'unu kullanabilirsiniz

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
        }
    });
}

Gradle:

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

0
  1. Görüntü Düğmelerini kullanın ve arka planı istediğiniz görüntü olarak yapın.
  2. Android varlık stüdyosu bağlantısından görüntüler oluşturun -

" https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html#foreground.type=image&foreground.space.trim=0&foreground.space.pad=0.25&foreColor=rgba(94%2C%20126%2C%20142% 2C% 200) Backcolor = RGB (% 96 2C% 20125% 2C% 20139) ve kırpma = 1 ve backgroundShape = daire ve etkileri = yok ve adı = ic_home "

ve mipmap-hdpi klasörünü aramak için indirin.

  1. resmi mipmap-hdpi klasöründen kopyalayın ve android projenizin drwable klasörüne yapıştırın.

  2. Şimdi arka planı bu görüntü olarak ayarlayın.

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.