Des coins arrondis sur le matériel de bouton

Je suis en suivant les conseils des questions comme cette pour créer un style de bouton comme suggéré sur la Conception de Matériel.

Cependant, j'ai besoin de changer le rayon de l'angle et n'ont pas été en mesure de le faire en héritant Widget.AppCompat.Button.Colored style et le réglage du paramètre de rayon.

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

OriginalL'auteur Juliano Nunes Silva Oliveira | 2017-03-09

Vous avez besoin d'hériter de ce style.

Ajouter 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 de la mise en page:

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

Edit: mise à jour de réponse à utiliser le thème de la couleur plutôt que codé en dur.

Cependant, ce qui supprime l'effet d'entraînement de la touche. Comment faire pour obtenir l'effet d'entraînement sur le bouton personnalisé?
href="http://stackoverflow.com/a/24530169/401025">stackoverflow.com/a/24530169/401025
Merci, je vais essayer celui-ci.

OriginalL'auteur Nikita Shaposhnik

22

Avec la nouvelle Bibliothèque de prise en charge 28.0.0-alpha1 libération, la Conception de la Bibliothèque contient maintenant la 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 la le rayon de l'angle avec cet attribut:
- app:cornerRadius: Utilisé pour définir le rayon utilisé pour les angles du bouton
Actuellement pour l'utiliser, vous devez utiliser la version d'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 la nouvelle Les éléments matériels pour Android.

Dans ce cas, vous pouvez utiliser dans votre fichier de mise en page:
```
<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 la version d'Android Studio 3.2 et:
```
android {
    compileSdkVersion 'android-P'

    defaultConfig {
        targetSdkVersion 'P'
    }
    ...
}
dependencies {
  implementation 'com.google.android.material:material:1.0.0-alpha1'
}
```
La doc officielle est ici et tous les android spécifications ici.

ce sera la meilleure solution, mais après Android Studio version 3.2 actuellement Android Studio 3.1 ne compilera pas Android P
Il n'est pas totalement correcte. Il fonctionne avec android Studio 3.1 ou supérieur. Et oui il doit être compilé avec Android P
J'ai eu une erreur sur mon Android studio 3.1 lorsque je reviens en arrière pour Android O il a obtenu résolu Donc je pense qu'il pourrait être le studio
Lors de l'utilisation de la nouvelle MaterialButton, pour le faire fonctionner, vous devez également utiliser la nouvelle MaterialComponents thème. Par exemple définir votre thème pour s'étendre de Thème.MaterialComponents.La lumière.NoActionBar au lieu de Thème.AppCompat.La lumière.NoActionBar

OriginalL'auteur Gabriele Mariotti

Arrondies Matériau du Bouton avec effet d'entraînement

Des coins arrondis sur le matériel de bouton

Créer un fichier dans le dossier drawable 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 le dossier drawable 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 votre Bouton:

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

OriginalL'auteur Christer

Je vais vous raconter ma solution exacte pour cela . À l'intérieur du sélecteur de balises, vous pouvez mettre des articles (fonctionnalité des boutons)

Deuxième élément du sélecteur de balise a l'opposé du comportement. Vous pouvez ajouter autant que le sélecteur (comportement du bouton)
AJOUTER CETTE DRAWABLE XML COMME arrière-plan DU BOUTON android:background="@drawable/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>

OriginalL'auteur Emre Kilinc Arslan

Aussi un autre moyen simple est de l'enrouler autour de cardView,n'oubliez pas de régler le layout_width et layout_height de la cardView à wrap_content, aussi tout le nécessaire de la marge sur le bouton, le besoin doit être appliqué à la 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>

OriginalL'auteur razzbee

Vous devez vous connecter pour publier un commentaire.