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.