web-dev-qa-db-fra.com

Bouton de conception matérielle avec bordure

Je sais comment créer un bouton Material Design avec remplissage de couleur:

style="@style/Widget.AppCompat.Button.Colored"

Et bouton transparent sans bordure:

style="@style/Widget.AppCompat.Button.Borderless.Colored"

Cependant, y a-t-il un moyen de faire un bouton avec bordure (transparent à l'intérieur)? Quelque chose comme ci-dessous?

 enter image description here

androidbuttonbordermaterial-design
15
jclova

Voici comment le faire correctement. 

Ce que tu dois faire c'est

1 - Créer une forme dessinable avec trait
2 - Créer une ondulation pouvant être dessinée 
3 - Créer un sélecteur dessinable pour moins de v21
4 - Créer un nouveau style pour bouton avec bordure
5 - Appliquer le style sur le bouton

1 - Crée une forme avec un traitbtn_outline.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="rectangle">

    <stroke
        Android:width="2dp"
        Android:color="@color/colorAccent">
    </stroke>
    <solid Android:color="@color/colorTransparent"/>
    <corners
        Android:radius="5dp">
    </corners>

</shape>

2 - Crée une ondulation pouvant être dessinéedrawable-v21/bg_btn_outline.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:color="@color/colorOverlay">
    <item>
        <shape>
            <stroke
                Android:width="2dp"
                Android:color="@color/colorAccent"/>
            <corners Android:radius="5dp"/>
        </shape>
    </item>
    <item Android:id="@Android:id/mask">
        <shape>
            <stroke
                Android:width="2dp"
                Android:color="@color/colorAccent"/>
            <solid Android:color="@Android:color/white"/>
            <corners Android:radius="5dp"/>
        </shape>
    </item>

</ripple>

Android:id="@Android:id/mask" est nécessaire pour avoir un retour tactile sur le bouton. Le calque marqué comme masque n’est pas visible à l’écran, c’est juste pour le retour tactile. 

3 - Crée un sélecteur pouvant être dessiné pour moins de v21drawable/bg_btn_outline.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:drawable="@drawable/btn_outline" Android:state_pressed="true">
        <shape Android:shape="rectangle">
            <solid Android:color="@color/colorOverlay"/>
        </shape>
    </item>
    <item Android:drawable="@drawable/btn_outline" Android:state_focused="true">
        <shape Android:shape="rectangle">
            <solid Android:color="@color/colorOverlay"/>
        </shape>
    </item>

    <item Android:drawable="@drawable/btn_outline"/>

</selector>

4 - Crée un nouveau style pour le bouton avec une bordure Toutes les ressources nécessaires à la création du style sont indiquées ci-dessus. Votre style devrait donc ressembler à cela.

<style name="ButtonBorder" parent="Widget.AppCompat.Button.Colored"/>

<style name="ButtonBorder.Accent">
        <item name="Android:background">@drawable/bg_btn_outline</item>
        <item name="Android:textColor">@color/colorAccent</item>
        <item name="Android:textAllCaps">false</item>
        <item name="Android:textSize">16sp</item>
        <item name="Android:singleLine">true</item>
    </style>

4 - Appliquer le style sur le bouton

<Button
   style="@style/ButtonBorder.Accent"
   Android:layout_width="wrap_content"
   Android:layout_height="wrap_content"/>

C'est à peu près tout. Voici un exemple de l'apparence des boutons.  enter image description here

22
Noman Rafique

Avec la nouvelle version de Support Library 28.0.0 - alpha1 , la bibliothèque de conception contient maintenant le Material Button.

Vous pouvez ajouter ce bouton à notre fichier de mise en page avec:

<Android.support.design.button.MaterialButton
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:text="XXXX"
    Android:textSize="18sp"
    app:icon="@drawable/ic_Android_white_24dp" />

Vous pouvez personnaliser le bouton avec ces attributs:

  • app:backgroundTint: Utilisé pour appliquer une teinte à l'arrière-plan du bouton. Si vous souhaitez modifier la couleur d'arrière-plan du bouton, utilisez cet attribut au lieu de l'arrière-plan.

  • app:strokeColor: la couleur à utiliser pour le tracé du bouton

  • app:strokeWidth: la largeur à utiliser pour le tracé du bouton

Également 

13
Gabriele Mariotti

Crédits à @NomanRafique pour la réponse détaillée! Cependant, en raison de l'arrière-plan personnalisé, nous avons perdu quelques éléments importants:

  1. La hauteur du bouton est plus grande que la valeur par défaut Widget.AppCompat.Button
  2. Rembourrages
  3. Activer/désactiver les états

Au cas où vous vous le demanderiez, voici à quoi ressemble l'arrière-plan par défaut: https://Android.googlesource.com/platform/frameworks/support/+/a7487e7/v7/appcompat/res/drawable-v21/abc_btn_colored_material. xml

En réutilisant les encarts, les rembourrages et les sélecteurs de couleur d'origine, nous pouvons, dans un cas simple, obtenir quelque chose comme ceci (toutes les valeurs sont celles par défaut et proviennent du support/de la bibliothèque de matériaux Android):

drawable-v21/bg_btn_outlined.xml

<inset xmlns:Android="http://schemas.Android.com/apk/res/Android"
       Android:insetLeft="@dimen/abc_button_inset_horizontal_material"
       Android:insetTop="@dimen/abc_button_inset_vertical_material"
       Android:insetRight="@dimen/abc_button_inset_horizontal_material"
       Android:insetBottom="@dimen/abc_button_inset_vertical_material">
    <ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
            Android:color="?attr/colorControlHighlight">
        <item>
            <shape>
                <stroke
                    Android:width="2dp"
                    Android:color="@color/abc_btn_colored_borderless_text_material"/>
                <corners Android:radius="@dimen/abc_control_corner_material"/>
                <padding
                    Android:bottom="@dimen/abc_button_padding_vertical_material"
                    Android:left="@dimen/abc_button_padding_horizontal_material"
                    Android:right="@dimen/abc_button_padding_horizontal_material"
                    Android:top="@dimen/abc_button_padding_vertical_material"/>
            </shape>
        </item>
        <item Android:id="@Android:id/mask">
            <shape>
                <stroke
                    Android:width="2dp"
                    Android:color="@color/abc_btn_colored_borderless_text_material"/>
                <solid Android:color="@Android:color/white"/>
                <corners Android:radius="@dimen/abc_control_corner_material"/>
            </shape>
        </item>
    </ripple>
</inset>

styles.xml

<style name="Button.Outlined" parent="Widget.AppCompat.Button.Borderless.Colored">
    <item name="Android:background">@drawable/bg_btn_outlined</item>
</style>

À ce stade, nous devrions avoir un bouton indiqué qui répond aux contacts, respecte l'état enabled="false" et est de la même hauteur que le Widget.AppCompat.Button par défaut:

 enter image description here

À partir de là, vous pouvez commencer à personnaliser les couleurs en fournissant votre propre implémentation du sélecteur de couleurs @color/abc_btn_colored_borderless_text_material. 

4
Ghedeon

C’est comme cela que je fais des boutons uniquement avec une bordure et un effet d’entraînement sur Lollipop et les versions supérieures. Tout comme les boutons AppCompat, ceux-ci ont un effet de repli sur les API inférieures (si vous avez besoin d'ondulations sur les API inférieures, vous devez utiliser une bibliothèque externe). J'utilise FrameLayout parce que c'est bon marché. La couleur du texte et de la bordure est noire, mais vous pouvez la changer avec une couleur personnalisée:

<FrameLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_margin="20dp"
    Android:background="@drawable/background_button_ghost">

    <TextView
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:background="?android:selectableItemBackground"
        Android:gravity="center"
        Android:padding="14dp"
        Android:textSize="16sp"
        Android:textAllCaps="true"
        Android:textStyle="bold"
        Android:textColor="@Android:color/black"
        Android:text="Text"/>
</FrameLayout>

drawable/background_button_ghost.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <stroke
        Android:width="2dp"
        Android:color="@Android:color/black"/>
    <solid Android:color="@color/transparent"/>
</shape>

Si j'ai oublié quelque chose, laissez un commentaire et je mettrai à jour la réponse.

2
Galya

Simplement vous pouvez utiliser ce code. Il a l'air tellement bon. 

           <LinearLayout
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:background="#ffffff"
                Android:orientation="vertical">

                <Android.support.v7.widget.AppCompatButton
                    Android:layout_width="match_parent"
                    Android:layout_height="wrap_content"
                    Android:backgroundTint="#F48025"
                    Android:text="login"
                    Android:textColor="@color/colorWhite" />

            </LinearLayout>

Ici la couleur de la bordure est: 

Android:background="#ffffff"

Et la couleur de fond est: 

Android:backgroundTint="#F48025"
0
Md. Shahinur Rahman