Android - bordo per pulsante


Risposte:


432

Passaggio 1: creare il file denominato: my_button_bg.xml

Passaggio 2: posizionare questo file in res / drawables.xml

Passaggio 3: inserire il codice seguente

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

Passaggio 4: utilizzare il codice "android: background =" @ drawable / my_button_bg "dove necessario, ad es. Di seguito:

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

1
grazie. + 1 per questo. Dopo averlo salvato in una cartella disegnabile come file XML. Come possiamo usarlo?
Android Killer

1
@AndroidPower puoi usarlo con R.drawable.FILE_NAME
slayton

2
Dove va questo codice, nel codice .axml per il markup per il pulsante? Va in un file di tipo styles.xml?
theJerm

Ho usato solo il tratto (e l'ho reso bianco) per delineare un pulsante con il bianco. Funziona alla grande con 4.4 ma in 4.0.3 il pulsante diventa nero - qualche idea perché?
Kibi,

1
@Kibi mi dispiace che qualcuno abbia modificato la mia risposta e ti abbia dato consigli errati. L'ho cambiato ma sono scioccato dal fatto che qualcuno possa modificare una risposta accettata e cambiare l'utilità.
Pedante,

57

Android Official Solution

Da quando è stato introdotto Android Design Support v28 , è facile creare un pulsante con bordi utilizzando MaterialButton. Questa classe fornisce stili di materiale aggiornati per il pulsante nel costruttore. Utilizzando app:strokeColore app:strokeWidthpuoi creare un bordo personalizzato come segue:


1. Quando si utilizza androidx:

build.gradle

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

• Pulsante bordato:

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

• Pulsante bordato non riempito:

<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. Quando si utilizza appcompat:

build.gradle

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

style.xml

Assicurati che il tema dell'applicazione erediti Theme.MaterialComponentsinvece di Theme.AppCompat.

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

• Pulsante bordato:

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

• Pulsante bordato non riempito:

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



Risultato visivo

inserisci qui la descrizione dell'immagine


Vedo che hai textColor e textSize dichiarati nel tuo XML del pulsante. Cosa suggerisci se qualcuno ha già uno stile definito per textColor e textSize e ora vogliono aggiungere il style="@style/Widget.AppCompat.Button.Borderless"?
Someone Somewhere,


Come hai detto, è possibile definire uno stile che eredita dallo stile senza bordi, quindi aggiungere gli attributi preferiti in base allo stile di base.
aminografia

Leggermente OT, ma qual è l'interessante quarta icona nella barra delle azioni nella parte inferiore della GIF? (Sembra anche che la GIF sia stata catturata da un dispositivo reale, bello)
i336_

1
Forse mi sbaglio, ma per me nel • Pulsante non
riempito con bordi

37

Crea button_border.xmlfile nella tua cartella disegnabile.

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>

E aggiungi il pulsante al layout dell'attività XML e imposta lo sfondo 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

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

e segnalalo come @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

Se il tuo pulsante non richiede uno sfondo trasparente, puoi creare un'illusione di un bordo utilizzando un Layout cornice. Basta regolare l'attributo "padding" del FrameLayout per cambiare lo spessore del bordo.

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

Non sono sicuro che i file Shape XML abbiano colori dei bordi modificabili dinamicamente. Ma so che con questa soluzione, puoi cambiare dinamicamente il colore del bordo impostando lo sfondo FrameLayout.


6

Nel tuo layout XML:

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

Nella cartella di disegno, crea un file per lo stile del bordo del pulsante:

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

E nella tua attività:

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

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.