Comment ajouter une bordure à un bouton? Est-il possible de le faire sans recourir à l'utilisation d'images?
Comment ajouter une bordure à un bouton? Est-il possible de le faire sans recourir à l'utilisation d'images?
Réponses:
É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"
/>
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:strokeColor
et app:strokeWidth
vous pouvez créer une bordure personnalisée comme suit:
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" />
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.MaterialComponents
au 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" />
style="@style/Widget.AppCompat.Button.Borderless"
?
Créez un button_border.xml
fichier 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" />
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" />
Veuillez regarder ici pour créer une forme dessinable http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape
Une fois que vous avez fait cela, dans le XML de votre jeu de boutons android:background="@drawable/your_button_border"
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.
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();
}
});
Je sais que d'un an de retard, mais vous pouvez aussi créer une image de chemin 9 Il y a un outil qui vient avec Android SDK qui contribue à créer telle image Voir ce lien: http://developer.android.com/tools/help/draw9patch .html
PS: l'image peut également être mise à l'échelle à l'infini