Effet matériel sur bouton avec couleur de fond

J'utilise la bibliothèque de support Android v21.

J'ai créé un bouton avec une couleur d'arrière-plan personnalisée. Les effets de conception de matériau comme l'ondulation, la révélation ont disparu (sauf l'élévation au clic) lorsque j'utilise la couleur de fond.

 <Button
 style="?android:attr/buttonStyleSmall"
 android:background="?attr/colorPrimary"
 android:textColor="@color/white"
 android:textAllCaps="true"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:text="Button1"
 />

Ce qui suit est un bouton normal et les effets fonctionnent très bien.

<Button
 style="?android:attr/buttonStyleSmall"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:textAllCaps="true"
 android:text="Button1"
/>

Lorsque vous utilisez android:background, vous remplacez une grande partie du style et de l'apparence d'un bouton par une couleur vierge.

Mise à jour: Depuis la version 23.0.0 d' AppCompat , il existe un nouveau Widget.AppCompat.Button.Coloredstyle qui utilise votre thème colorButtonNormalpour la couleur désactivée et colorAccentpour la couleur activée.

Cela vous permet de l'appliquer directement sur votre bouton via

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

Si vous avez besoin d'un colorButtonNormalou personnalisé colorAccent, vous pouvez utiliser un ThemeOverlaycomme expliqué dans ce pro-tip et android:themesur le bouton.

Réponse précédente

Vous pouvez utiliser un dessin dans votre répertoire v21 pour votre arrière-plan, comme:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="?attr/colorControlHighlight">
    <item android:drawable="?attr/colorPrimary"/>
</ripple>

Cela garantira que votre couleur d'arrière-plan est ?attr/colorPrimaryet a l'animation d'ondulation par défaut en utilisant la valeur par défaut ?attr/colorControlHighlight(que vous pouvez également définir dans votre thème si vous le souhaitez).

Remarque: vous devrez créer un sélecteur personnalisé pour moins de v21:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/primaryPressed" android:state_pressed="true"/>
    <item android:drawable="@color/primaryFocused" android:state_focused="true"/>
    <item android:drawable="@color/primary"/>
</selector>

En supposant que vous ayez certaines couleurs que vous souhaitez pour l'état par défaut, pressé et concentré. Personnellement, j'ai pris une capture d'écran d'une ondulation au milieu de la sélection et j'ai retiré l'état principal / concentré de cela.

Il existe une autre solution simple pour fournir un arrière-plan personnalisé aux boutons «plats» tout en conservant leurs effets «matériel».

1. Placez votre bouton dans ViewGroup avec l'arrière-plan souhaité défini
2. définissez selectableItemBackground du thème actuel comme arrière-plan pour votre bouton (API> = 11)

c'est à dire :

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/blue">
    <Button
        style="?android:attr/buttonStyleSmall"
        android:background="?android:attr/selectableItemBackground"
        android:textColor="@android:color/white"
        android:textAllCaps="true"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Button1"
        />
</FrameLayout>

Peut être utilisé pour les boutons plats , il fonctionne sur l'API> = 11, et vous obtiendrez un effet d'entraînement sur les appareils> = 21, en gardant les boutons réguliers sur la pré-21 jusqu'à ce que AppCompat soit mis à jour pour prendre en charge l'ondulation également.

Vous pouvez également utiliser selectableItemBackgroundBorderless pour les boutons> = 21 uniquement.

Voici un moyen simple et rétrocompatible de fournir un effet d'entraînement aux boutons surélevés avec l'arrière-plan personnalisé.

Votre mise en page devrait ressembler à ceci

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/my_custom_background"
    android:foreground="?android:attr/selectableItemBackground"/>

J'ai rencontré ce problème aujourd'hui en jouant avec la bibliothèque v22.

En supposant que vous utilisez des styles, vous pouvez définir la colorButtonNormalpropriété et les boutons utiliseront cette couleur par défaut.

<style name="AppTheme" parent="BaseTheme">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/primaryColor</item>
    <item name="colorPrimaryDark">@color/primaryColorDark</item>
    <item name="colorAccent">@color/accentColor</item>
    <item name="colorButtonNormal">@color/primaryColor</item>
</style>

En dehors de cela, vous pouvez toujours créer un style pour le bouton, puis l'utiliser par bouton si vous avez besoin d'un assortiment de couleurs (non testé, juste spéculant).

N'oubliez pas d'ajouter android:avant les noms des éléments dans votre style v21 .

Avec AppCompat (22.1.1+), vous pouvez ajouter un style comme celui-ci:

<style name="MyGreenButton">
    <item name="colorButtonNormal">#009900</item>
</style>

Et utilisez-le en appliquant simplement le style:

<android.support.v7.widget.AppCompatButton
    style="@style/MyGreenButton"
    android:layout_width="match_width"
    android:layout_height="wrap_content"
    android:text="A Green Button"
    />

En modifiant la couleur par programme, j'ai trouvé que la seule façon de mettre à jour la couleur (sur l'API 15 ou 16) était d'utiliser à la place la «liste de teintes d'arrière-plan». Et cela ne supprime pas la belle animation radiale sur les appareils API 21:

ColorStateList colorStateList = new ColorStateList(new int[][] {{0}}, new int[] {0xFF009900}); // 0xAARRGGBB
button.setSupportBackgroundTintList(colorStateList);

Parce que button.setBackground(...)et button.getBackground().mutate().setColorFilter(...)ne changez pas la couleur des boutons sur les API 15 et 16 comme ils le font sur l'API 21.

La réponse de @ ianhanniballake est absolument correcte et simple. Mais il m'a fallu quelques jours pour comprendre. Pour quelqu'un qui ne comprend pas sa réponse, voici une implémentation plus détaillée

<Button
        android:id="@+id/btn"
        style="@style/MaterialButton"
        ... />


<style name="MaterialButton" parent="Widget.AppCompat.Button.Colored">
    <item name="android:theme">@style/Theme.MaterialButton</item>
   ...
</style>


<style name="Theme.MaterialButton" parent="YourTheme">
    <item name="colorAccent">@color/yourAccentColor</item>
    <item name="colorButtonNormal">@color/yourButtonNormalColor</item>
</style>

=== Ou ===

<Button
        android:id="@+id/btn"
        style="@style/Widget.AppCompat.Button.Colored"
        android:theme="@style/Theme.MaterialButton" />

<style name="Theme.MaterialButton" parent="YourTheme">
    <item name="colorAccent">@color/yourAccentColor</item>
    <item name="colorButtonNormal">@color/yourButtonNormalColor</item>
</style>

J'ai utilisé le backgroundTint et le premier plan:

<Button
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:backgroundTint="@color/colorAccent"
    android:foreground="?android:attr/selectableItemBackground"
    android:textColor="@android:color/white"
    android:textSize="10sp"/>

Je suis venu à ce poste à la recherche d'un moyen d'avoir une couleur d'arrière-plan de mon ListViewarticle, tout en conservant l'ondulation.

J'ai simplement ajouté ma couleur comme arrière-plan et le selectableItemBackground comme premier plan:

<style name="my_list_item">
    <item name="android:background">@color/white</item>
    <item name="android:foreground">?attr/selectableItemBackground</item>
    <item name="android:layout_height">@dimen/my_list_item_height</item>
</style>

et cela fonctionne comme un charme. Je suppose que la même technique pourrait également être utilisée pour les boutons. Bonne chance :)

Utiliser backgroundTintau lieu debackground

Si ImageButton vous intéresse, vous pouvez essayer cette chose simple:

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@android:drawable/ic_button"
    android:background="?attr/selectableItemBackgroundBorderless"
/>

v22.1de appcompat-v7introduit de nouvelles possibilités. Il est désormais possible d'assigner un thème spécifique à une seule vue.

Utilisation obsolète de l'application: thème pour le style de la barre d'outils. Vous pouvez désormais utiliser android: theme pour les barres d'outils sur tous les appareils API de niveau 7 et supérieur et android: theme pour tous les widgets sur API de niveau 11 et supérieur.

Ainsi, au lieu de définir la couleur souhaitée dans un thème global, nous en créons une nouvelle et l’affectons uniquement au Button

Exemple:

<style name="MyColorButton" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorButtonNormal">@color/myColor</item>
</style>

Et utilisez ce style comme thème de votre Button

<Button
 style="?android:attr/buttonStyleSmall"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:text="Button1"
 android:theme="@style/MyColorButton"/>

Si vous êtes d'accord avec l'utilisation d'une bibliothèque tierce, consultez traex / RippleEffect . Il vous permet d'ajouter un effet d'entraînement à n'importe quelle vue avec seulement quelques lignes de code. Il vous suffit d'envelopper, dans votre fichier de mise en page XML, l'élément que vous souhaitez avoir un effet d'entraînement avec un com.andexert.library.RippleViewconteneur.

Comme bonus supplémentaire, il nécessite Min SDK 9 afin que vous puissiez avoir une cohérence de conception entre les versions du système d'exploitation.

Voici un exemple tiré du référentiel GitHub des bibliothèques:

<com.andexert.library.RippleView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:rv_centered="true">

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@android:drawable/ic_menu_edit"
        android:background="@android:color/holo_blue_dark"/> 

</com.andexert.library.RippleView>

Vous pouvez modifier la couleur de l'ondulation en ajoutant cet attribut à l'élément RippleView: app:rv_color="@color/my_fancy_ripple_color

<android.support.v7.widget.AppCompatButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:backgroundTint="#fff"
    android:textColor="#000"
    android:text="test"/>

Utilisation

xmlns:app="http://schemas.android.com/apk/res-auto"

et la couleur sera acceptée sur pré-lolipop

Il y a deux approches expliquées dans le grand tutoriel d'Alex Lockwood: http://www.androiddesignpatterns.com/2016/08/coloring-buttons-with-themeoverlays-background-tints.html :

Approche n ° 1: modification de la couleur d'arrière-plan du bouton avec un ThemeOverlay

<!-- res/values/themes.xml -->
<style name="RedButtonLightTheme" parent="ThemeOverlay.AppCompat.Light">
    <item name="colorAccent">@color/googred500</item>
</style>

<Button
    style="@style/Widget.AppCompat.Button.Colored"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:theme="@style/RedButtonLightTheme"/>

Approche n ° 2: définition de la teinte d'arrière-plan de AppCompatButton

<!-- res/color/btn_colored_background_tint.xml -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Disabled state. -->
    <item android:state_enabled="false"
          android:color="?attr/colorButtonNormal"
          android:alpha="?android:attr/disabledAlpha"/>

    <!-- Enabled state. -->
    <item android:color="?attr/colorAccent"/>

</selector>

<android.support.v7.widget.AppCompatButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:backgroundTint="@color/btn_colored_background_tint"/>

Application par programme des couleurs:

if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {

    ColorStateList colorStateListRipple = new ColorStateList(
            new int[][] {{0}},
            new int[] {Color.WHITE} // ripple color
            );

    RippleDrawable rippleDrawable = (RippleDrawable) myButton.getBackground();
    rippleDrawable.setColor(colorStateListRipple);
    myButton.setBackground(rippleDrawable); // applying the ripple color
}

ColorStateList colorStateList = new ColorStateList(
        new int[][]{
                new int[]{android.R.attr.state_pressed}, // when pressed
                new int[]{android.R.attr.state_enabled}, // normal state color
                new int[]{} // normal state color
        },
        new int[]{
                Color.CYAN, // when pressed
                Color.RED, // normal state color
                Color.RED // normal state color
        }
);

ViewCompat.setBackgroundTintList(myButton, colorStateList); // applying the state colors

J'ai essayé ceci:

android:backgroundTint:"@color/mycolor"

au lieu de modifier la propriété d'arrière-plan. Cela ne supprime pas l'effet matériel.