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.