Android - perbatasan untuk tombol

Jawaban:

432

Langkah 1: Buat file dengan nama: my_button_bg.xml

Langkah 2: Tempatkan file ini di res / drawables.xml

Langkah 3: Masukkan kode di bawah ini

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

Langkah 4: Gunakan kode "android: background =" @ drawable / my_button_bg "jika diperlukan misalnya di bawah ini:

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Your Text"
    android:background="@drawable/my_button_bg"
    />
Pedantic
sumber
1
terima kasih. +1 untuk ini. Setelah menyimpannya ke dalam folder yang dapat digambar sebagai file xml. Bagaimana kita dapat menggunakannya?
Android Killer
1
@AndroidPower Anda dapat menggunakannya dengan R.drawable.FILE_NAME
slayton
2
Di mana kode ini pergi, dalam kode .axml untuk markup untuk tombol? Apakah itu masuk dalam file jenis styles.xml?
theJerm
Saya hanya menggunakan stroke (dan membuatnya putih) untuk menguraikan Tombol dengan putih. Bekerja sangat baik dengan 4.4 tetapi pada 4.0.3 tombol menjadi hitam - ada ide mengapa?
Kibi
1
@ Kibi maaf seseorang mengedit jawaban saya dan memberi Anda saran yang salah. Saya telah mengubahnya tetapi saya terkejut bahwa seseorang dapat mengedit jawaban yang diterima dan mengubah kegunaannya.
Pedantic
57

Android Official Solution

Sejak Dukungan Desain Android v28 diperkenalkan, mudah untuk membuat tombol berbatas menggunakan MaterialButton. Kelas ini memasok gaya Material yang diperbarui untuk tombol di konstruktor. Menggunakan app:strokeColordan app:strokeWidthAnda dapat membuat perbatasan khusus sebagai berikut:


1. Saat Anda menggunakan androidx:

build.gradle

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

• Tombol Berbatasan:

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

• Tombol Berbatas Tidak Terisi:

<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. Saat Anda menggunakan appcompat:

build.gradle

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

style.xml

Pastikan tema aplikasi Anda Theme.MaterialComponentsbukan warisan Theme.AppCompat.

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

• Tombol Berbatasan:

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

• Tombol Berbatas Tidak Terisi:

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



Hasil Visual

masukkan deskripsi gambar di sini

aminografi
sumber
Saya melihat Anda memiliki textColor dan textSize dideklarasikan di XML tombol Anda. Apa yang Anda sarankan jika seseorang sudah memiliki gaya yang ditentukan untuk textColor dan textSize dan sekarang mereka ingin menambahkan style="@style/Widget.AppCompat.Button.Borderless"?
Seseorang di suatu tempat
Saya sudah mengetahuinya, lihat developer.android.com/guide/topics/ui/look-and-feel/…
Seseorang di Suatu Tempat
Seperti yang Anda sebutkan, adalah mungkin untuk menentukan gaya yang mewarisi dari gaya tanpa batas, kemudian menambahkan atribut yang disukai sesuai dengan gaya dasar.
aminografi
Sedikit OT, tapi apa ikon ke-4 yang menarik di panel tindakan di bagian bawah GIF? (Juga sepertinya GIF diambil dari perangkat asli, keren)
i336_
1
Mungkin saya salah tetapi bagi saya di • Unfilled Bordered Button, saya harus mengubah, aplikasi: backgroundTint = "@ color / transparan" ke app: backgroundTint = "@ android: color / transparan"
xarly
37

Buat button_border.xmlfile di folder yang dapat digambar.

res / drawable / 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>

Dan tambahkan tombol ke tata letak aktivitas XML Anda dan atur latar belakang 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" />
Karina Sen
sumber
19

buat drawable / button_green.xml:

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

dan tunjukkan sebagai @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" />
vitperov
sumber
8

Jika tombol Anda tidak memerlukan latar belakang transparan, maka Anda dapat membuat ilusi perbatasan menggunakan Layout Bingkai. Cukup sesuaikan atribut "padding" FrameLayout untuk mengubah ketebalan perbatasan.

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

Saya tidak yakin apakah file bentuk xml memiliki warna perbatasan yang dapat diedit secara dinamis. Tapi saya tahu bahwa dengan solusi ini, Anda dapat secara dinamis mengubah warna perbatasan dengan mengatur latar belakang FrameLayout.

Rock Lee
sumber
6

Dalam tata letak XML Anda:

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

Di folder yang dapat digambar, buat file untuk gaya batas tombol:

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

Dan di Aktivitas Anda:

    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();
        }
    });
Raseem Ayatt
sumber
5

Saya tahu ini sekitar satu tahun terlambat, tetapi Anda juga dapat membuat gambar 9 jalur. Ada alat yang dilengkapi dengan android SDK yang membantu dalam menciptakan gambar tersebut. Lihat tautan ini: http://developer.android.com/tools/help/draw9patch .html

PS: gambar bisa diskalakan tanpa batas juga

himura
sumber