web-dev-qa-db-fra.com

Coins arrondis sur le bouton matériel

Je suis les conseils donnés par des questions telles que this pour créer un style de bouton similaire à celui suggéré dans Material Design.

 Button

Cependant, je dois changer le rayon de l'angle et je n'y suis pas parvenu en héritant du style Widget.AppCompat.Button.Colored et en définissant le paramètre radius.

Comment puis-je avoir le même style mais avec des coins arrondis?

androidmaterial-designandroid-support-libraryandroid-support-design
21
Juliano Nunes Silva Oliveira

Vous devez hériter de ce style. 

Ajoutez dans votre styles.xml:

 <style name="AppTheme.RoundedCornerMaterialButton" parent="Widget.AppCompat.Button.Colored">
        <item name="Android:background">@drawable/rounded_shape</item>
 </style>

Ajouter un fichier drawable/rounded_shape.xml:

<shape
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="rectangle"   >

    <solid
        Android:color="@color/colorAccent" >
    </solid>

    <corners
        Android:radius="11dp"   >
    </corners>

</shape>

Et enfin dans votre mise en page:

 <Button
       Android:layout_width="wrap_content"
       Android:layout_height="wrap_content"
       Android:text="Test Text"
       style="@style/AppTheme.RoundedCornerMaterialButton"/>

Edit: réponse mise à jour pour utiliser la couleur du thème plutôt que celle codée en dur.

30
Nikita Shaposhnik

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="XXXXX"
    Android:textSize="18sp"
    Android:backgroundTint="@color/colorPrimary"
    app:icon="@drawable/ic_Android_white_24dp" />

Vous pouvez définir le corner radius avec cet attribut:

  • app:cornerRadius: utilisé pour définir le rayon utilisé pour les coins du bouton

 enter image description here

Actuellement pour l'utiliser, vous devez utiliser Android Studio 3.1 ou supérieur et:

Android {
    compileSdkVersion 'Android-P'

    defaultConfig {
        targetSdkVersion 'P'
    }
    ...
}
dependencies {
  implementation 'com.Android.support:design:28.0.0-alpha1'
}

Vous pouvez également utiliser le nouveau Composants matériels pour Android .
Dans ce cas, vous pouvez utiliser dans votre fichier de présentation:

<com.google.Android.material.button.MaterialButton
    Android:id="@+id/material_button"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:text="XXXXX"
    app:cornerRadius=".."/>

Actuellement, vous devez utiliser Android Studio 3.2 et: 

Android {
    compileSdkVersion 'Android-P'

    defaultConfig {
        targetSdkVersion 'P'
    }
    ...
}
dependencies {
  implementation 'com.google.Android.material:material:1.0.0-alpha1'
}

Le doc officiel est ici et toutes les spécifications Android ici .

23
Gabriele Mariotti

Bouton de matière arrondi avec effet ondulé

 enter image description here

Créer un fichier dans un dossier pouvant être dessiné ripple.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:color="?android:attr/colorControlHighlight">
    <item Android:id="@Android:id/mask">
        <shape Android:shape="rectangle">
            <solid Android:color="@color/colorPrimary" />
            <corners Android:radius="20dp" />
        </shape>
    </item>
    <item Android:drawable="@drawable/rounded_shape" />
</ripple>

Créer un fichier dans un dossier pouvant être dessiné rounded_shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="rectangle"   >
    <solid
        Android:color="@color/colorPrimary" >
    </solid>
    <corners
        Android:radius="20dp"   >
    </corners>
</shape>

Et sur ton bouton:

<Button
Android:id="@+id/button1"
Android:background="@drawable/ripple"
Android:text="Login"/>
5
Christer

Je vais vous dire ma solution exacte pour cela. Dans les balises de sélecteur, vous pouvez mettre des éléments (fonctionnalité des boutons) 

Le deuxième élément de la balise de sélection a le comportement opposé. Vous pouvez ajouter autant que sélecteur (comportement du bouton) AJOUTER CE XML ATTACHABLE COMME FOND DU BOUTON Android: background = "@ drawable/this xml"

    <?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:color="#ffffff"> <!-- this is the ripple color(first touch color changes into this color) -->
    <item>
        <selector> 
            <item Android:state_enabled="true">
                <shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
                    Android:shape="rectangle">
                    <!-- default button color -->

                    <solid Android:color="@color/colorPrimary"></solid>

                    <corners Android:radius="151dp"></corners>

                </shape>
            </item>
            <item>
                <shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
                    Android:shape="rectangle">
                    <!-- button disabled color opposite behaviour -->
                    <solid Android:color="#e9d204"></solid>

                    <corners Android:radius="151dp"></corners>

                </shape>
            </item>
        </selector>
    </item>
    <item>
        <selector>
            <item Android:state_pressed="true">
                <shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
                    Android:shape="rectangle">
                    <!-- button first touch of your finger color -->
                    <solid Android:color="#1989fa"></solid>

                    <corners Android:radius="151dp"></corners>

                </shape>
            </item>
        </selector>
    </item>
    <item>
        <selector>
            <item Android:state_hovered="true">
                <shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
                    Android:shape="rectangle">
                    <!-- hovered with a note pencil -->
                    <solid Android:color="#4affffff"></solid>

                    <corners Android:radius="151dp"></corners>

                </shape>
            </item>
        </selector>
    </item>

</ripple>
4
Emre Kilinc Arslan

Un autre moyen simple est d’enrouler autour de cardView. N'oubliez pas de définir layout_width et layout_height de cardView sur wrap_content, ainsi que toute la marge nécessaire dont le bouton aura besoin doit être appliquée à cardView

<Android.support.v7.widget.CardView
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            app:cardCornerRadius="8dp"
            Android:layout_marginLeft="10dp"
            Android:layout_marginRight="10dp"
            Android:layout_marginBottom="40dp"
            app:elevation="10dp">

            <Android.support.v7.widget.AppCompatButton
                Android:id="@+id/login_Twitter"
                Android:tag="login_Twitter"
                Android:layout_width="300dp"
                Android:layout_height="60dp"
                Android:paddingLeft="10dp"
           Android:foreground="?attr/selectableItemBackgroundBorderless"
                Android:textColor="@color/blue_grey_ligthen_5"
                Android:drawableLeft="@drawable/Twitter"
                Android:background="@color/Twitter"
                Android:text="@string/login_with_Twitter" />
        </Android.support.v7.widget.CardView>
0
razzbee