Android - bordure pour bouton


Réponses:


432

Étape 1: créer un fichier nommé: my_button_bg.xml

Étape 2: placez ce fichier dans res / drawables.xml

Étape 3: insérer le code ci-dessous

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

Étape 4: Utilisez le code "android: background =" @ drawable / my_button_bg "si nécessaire, par exemple ci-dessous:

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

1
merci. + 1 pour cela.Après l'avoir enregistré dans un dossier dessinable en tant que fichier xml.Comment pouvons-nous l'utiliser?
Android Killer

1
@AndroidPower, vous pouvez l'utiliser avec R.drawable.FILE_NAME
slayton

2
Où va ce code, dans le code .axml du balisage du bouton? Va-t-il dans un fichier de type styles.xml?
theJerm

J'ai utilisé juste le trait (et l'ai rendu blanc) pour tracer un bouton avec du blanc. Fonctionne très bien avec 4.4 mais en 4.0.3 le bouton devient noir - des idées pourquoi?
Kibi

1
@Kibi désolé, quelqu'un a modifié ma réponse et vous a donné des conseils incorrects. Je l'ai changé mais je suis choqué que quelqu'un puisse modifier une réponse acceptée et changer l'utilité.
Pedantic

57

Android Official Solution

Depuis l' introduction d' Android Design Support v28 , il est facile de créer un bouton avec bordure à l'aide de MaterialButton. Cette classe fournit des styles de matériaux mis à jour pour le bouton dans le constructeur. À l'aide de app:strokeColoret app:strokeWidthvous pouvez créer une bordure personnalisée comme suit:


1. Lorsque vous utilisez androidx:

build.gradle

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

• Bouton bordé:

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

• Bouton bordé non rempli:

<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. Lorsque vous utilisez appcompat:

build.gradle

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

style.xml

Assurez-vous que votre thème d'application hérite de Theme.MaterialComponentsau lieu de Theme.AppCompat.

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

• Bouton bordé:

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

• Bouton bordé non rempli:

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



Résultat visuel

entrez la description de l'image ici


Je vois que vous avez déclaré textColor et textSize dans votre bouton XML. Que suggérez-vous si quelqu'un a déjà un style défini pour textColor et textSize et qu'il souhaite maintenant ajouter le style="@style/Widget.AppCompat.Button.Borderless"?
Someone Somewhere


Comme vous l'avez mentionné, il est possible de définir un style qui hérite du style sans bordure, puis d'ajouter des attributs préférés en fonction du style de base.
aminographie

Légèrement OT, mais quelle est la 4ème icône intéressante dans la barre d'action au bas du GIF? (Il semble également que le GIF ait été récupéré à partir d'un véritable appareil, cool)
i336_

1
Peut-être que je me trompe mais pour moi dans le • Bouton Bordé
Non Rempli

37

Créez un button_border.xmlfichier dans votre dossier dessinable.

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>

Et ajoutez un bouton à votre disposition d'activité XML et définissez l'arrière-plan 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

créez 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>

et le signaler comme @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

Si votre bouton ne nécessite pas d'arrière-plan transparent, vous pouvez créer l'illusion d'une bordure à l'aide d'une disposition de cadre. Ajustez simplement l'attribut "padding" de FrameLayout pour changer l'épaisseur de la bordure.

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

Je ne sais pas si les fichiers XML de forme ont des couleurs de bordure modifiables dynamiquement. Mais je sais qu'avec cette solution, vous pouvez changer dynamiquement la couleur de la bordure en définissant l'arrière-plan FrameLayout.


6

Dans votre mise en page 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" />

Dans le dossier dessinable, créez un fichier pour le style de bordure du bouton:

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

Et dans votre activité:

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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.