Android - düğme kenarlığı


Yanıtlar:


432

Adım 1: adlı dosyayı oluşturun: my_button_bg.xml

Adım 2: Bu dosyayı res / drawables.xml dosyasına yerleştirin

3. Adım: Aşağıdaki kodu ekleyin

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle">
  <gradient android:startColor="#FFFFFF" 
    android:endColor="#00FF00"
    android:angle="270" />
  <corners android:radius="3dp" />
  <stroke android:width="5px" android:color="#000000" />
</shape>

Adım 4: Gerektiğinde "android: background =" @ drawable / my_button_bg "kodunu kullanın, örneğin aşağıda:

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Your Text"
    android:background="@drawable/my_button_bg"
    />

1
Bunun için + 1. xml dosyası olarak çekilebilir klasöre kaydettikten sonra nasıl kullanabiliriz?
Android Killer

1
@ AndroidPower'ı R.drawable.FILE_NAME ile kullanabilirsiniz
slayton

2
Düğmenin işaretlemesi için .axml kodunda bu kod nereye gidiyor? Bir styles.xml türü dosyasında mı gider?
theJerm

Sadece konturu kullandım (ve beyaz yaptım) Beyaz düğmeli. 4.4 ile harika çalışıyor, ancak 4.0.3'te düğme kararıyor - neden herhangi bir fikir?
Kibi

1
@Kibi üzgünüm birisi cevabımı düzenledi ve size yanlış tavsiyeler verdi. Değiştirdim ama birisinin kabul edilen bir yanıtı düzenleyebilmesi ve kullanışlılığını değiştirebilmesi karşısında şok oldum.
Pedantik

57

Android Official Solution

Android Tasarım Desteği v28 piyasaya sürüldüğünden beri kenarlıklı bir düğme oluşturmak kolaydır MaterialButton. Bu sınıf, yapıcıdaki düğme için güncellenmiş Malzeme stilleri sağlar. Kullanarak app:strokeColorve app:strokeWidthaşağıdaki gibi özel bir sınır oluşturabilirsiniz:


1. Kullandığınızda androidx:

build.gradle

dependencies {
    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'com.google.android.material:material:1.0.0'
}

• Kenarlıklı Düğme:

<com.google.android.material.button.MaterialButton
    style="@style/Widget.AppCompat.Button.Colored"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="MATERIAL BUTTON"
    android:textSize="15sp"
    app:strokeColor="@color/green"
    app:strokeWidth="2dp" />

• Dolgusuz Kenarlı Düğme:

<com.google.android.material.button.MaterialButton
    style="@style/Widget.AppCompat.Button.Borderless"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="UNFILLED MATERIAL BUTTON"
    android:textColor="@color/green"
    android:textSize="15sp"
    app:backgroundTint="@android:color/transparent"
    app:cornerRadius="8dp"
    app:rippleColor="#33AAAAAA"
    app:strokeColor="@color/green"
    app:strokeWidth="2dp" />



2. Kullandığınızda appcompat:

build.gradle

dependencies {
    implementation 'com.android.support:design:28.0.0'
}

style.xml

Uygulama temanızın Theme.MaterialComponentsyerine miras aldığından emin olun Theme.AppCompat.

<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
    <!-- Customize your theme here. -->
</style>

• Kenarlıklı Düğme:

<android.support.design.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="MATERIAL BUTTON"
    android:textSize="15sp"
    app:strokeColor="@color/green"
    app:strokeWidth="2dp" />

• Dolgusuz Kenarlı Düğme:

<android.support.design.button.MaterialButton
    style="@style/Widget.AppCompat.Button.Borderless"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="UNFILLED MATERIAL BUTTON"
    android:textColor="@color/green"
    android:textSize="15sp"
    app:backgroundTint="@android:color/transparent"
    app:cornerRadius="8dp"
    app:rippleColor="#33AAAAAA"
    app:strokeColor="@color/green"
    app:strokeWidth="2dp" />



Görsel Sonuç

resim açıklamasını buraya girin


Düğme XML'nizde textColor ve textSize bildiriminin olduğunu görüyorum. Birisi zaten textColor ve textSize için tanımlanmış bir stile sahipse ve şimdi eklemek isterse ne önerirsiniz style="@style/Widget.AppCompat.Button.Borderless"?
Birisi bir yerde


Bahsettiğiniz gibi, kenarlıksız stilden miras kalan bir stil tanımlamak, ardından temel stile göre tercih edilen nitelikleri eklemek mümkündür.
1919'da aminografi

Biraz OT, ancak GIF'in altındaki eylem çubuğundaki ilginç 4. simge nedir? (Ayrıca GIF gerçek bir cihazdan
yakalanmış

1
Belki yanılıyorum ama benim için • doldurulmamış sınırlanmış düğme, değiştirmek zorunda kaldı, app: backgroundTint = "@ renk / şeffaf" app: backgroundTint = "@ android: renk / şeffaf"
xarly

37

button_border.xmlÇekilebilir klasörünüzde dosya oluşturun .

res / çekilebilir / button_border.xml

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

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

    <stroke
        android:width="3dp"
        android:color="#FFFF4917" />

</shape>

Ve XML etkinlik düzeninize düğme ekleyin ve arka planı ayarlayın android:background="@drawable/button_border".

        <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/button_border"
                android:text="Button Border" />

19

drawable / button_green.xml oluştur:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle">
  <gradient
    android:startColor="#003000"
    android:centerColor="#006000"
    android:endColor="#003000"
    android:angle="270" />
  <corners android:radius="5dp" />
  <stroke android:width="2px" android:color="#007000" />
</shape>

ve şu şekilde gösterin @drawable/button_green:

<Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="@drawable/button_green"
        android:text="Button" />


8

Düğmeniz şeffaf bir arka plan gerektirmiyorsa, Çerçeve Düzeni kullanarak bir kenarlık yanılsaması oluşturabilirsiniz. Kenarlığın kalınlığını değiştirmek için FrameLayout'un "dolgu" özelliğini ayarlamanız yeterlidir.

<FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="1sp"
        android:background="#000000">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Your text goes here"
            android:background="@color/white"
            android:textColor="@color/black"
            android:padding="10sp"
            />
</FrameLayout>

Şekil xml dosyalarının dinamik olarak düzenlenebilir kenarlık renklerine sahip olup olmadığından emin değilim. Ancak bu çözümle, FrameLayout arka planını ayarlayarak kenarlığın rengini dinamik olarak değiştirebileceğinizi biliyorum.


6

XML düzeninizde:

<Button
    android:id="@+id/cancelskill"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginLeft="25dp"
    android:layout_weight="1"
    android:background="@drawable/button_border"
    android:padding="10dp"
    android:text="Cancel"
    android:textAllCaps="false"
    android:textColor="#ffffff"
    android:textSize="20dp" />

Çekilebilir klasörde, düğmenin kenarlık stili için bir dosya oluşturun:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <stroke
        android:width="1dp"
        android:color="#f43f10" />
</shape>

Ve Faaliyetinizde:

    GradientDrawable gd1 = new GradientDrawable();
    gd1.setColor(0xFFF43F10); // Changes this drawbale to use a single color instead of a gradient
    gd1.setCornerRadius(5);
    gd1.setStroke(1, 0xFFF43F10);

    cancelskill.setBackgroundDrawable(gd1);

    cancelskill.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View v) {
            cancelskill.setBackgroundColor(Color.parseColor("#ffffff"));
            cancelskill.setTextColor(Color.parseColor("#f43f10"));

            GradientDrawable gd = new GradientDrawable();

            gd.setColor(0xFFFFFFFF); // Changes this drawbale to use a single color instead of a gradient
            gd.setCornerRadius(5);
            gd.setStroke(1, 0xFFF43F10);
            cancelskill.setBackgroundDrawable(gd);

            finish();
        }
    });

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.