Effetto materiale sul pulsante con il colore di sfondo

Sto usando la libreria di supporto di Android v21.

Ho creato un pulsante con il colore di sfondo personalizzato. Gli effetti di disegno Materiale come ondulazione, rivelazione scompaiono (tranne l'elevazione al clic) quando uso il colore di sfondo posteriore.

 <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"
 />

Quello che segue è un pulsante normale e gli effetti funzionano bene.

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

Quando si utilizza android:background, si sostituisce gran parte dello stile e l'aspetto di un pulsante con un colore bianco.

Aggiornamento: a partire dalla versione 23.0.0 di AppCompat , esiste un nuovo Widget.AppCompat.Button.Coloredstile che utilizza i temi colorButtonNormalper il colore disabilitato e colorAccentper il colore abilitato.

Ciò ti consente di applicarlo direttamente al tuo pulsante tramite

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

Se hai bisogno di una personalizzazione colorButtonNormalo colorAccent, puoi usare una ThemeOverlaycome spiegato in questo suggerimento e android:themesul pulsante.

Risposta precedente

È possibile utilizzare un disegno nella directory v21 per lo sfondo come:

<?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>

Ciò assicurerà che il colore di sfondo sia ?attr/colorPrimarye abbia l'animazione di ondulazione predefinita usando quella predefinita ?attr/colorControlHighlight(che puoi anche impostare nel tuo tema se lo desideri).

Nota: dovrai creare un selettore personalizzato per meno di 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>

Supponendo che tu abbia alcuni colori che desideri per lo stato predefinito, premuto e focalizzato. Personalmente, ho fatto uno screenshot di un'increspatura a metà della selezione e ne ho tirato fuori lo stato primario / focalizzato.

Esiste un'altra soluzione semplice per fornire uno sfondo personalizzato per i pulsanti "piatti" mantenendo gli effetti "Materiale".

1. Posiziona il pulsante in ViewGroup con lo sfondo desiderato impostato lì
2. imposta selectableItemBackground dal tema corrente come sfondo per il tuo pulsante (API> = 11)

cioè:

<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>

Può essere usato per i pulsanti Flat , funziona su API> = 11 e otterrai un effetto a catena su> = 21 dispositivi, mantenendo i pulsanti regolari su pre-21 fino a quando AppCompat non viene aggiornato per supportare anche l'ondulazione lì.

Puoi anche usare selectableItemBackgroundBorderless solo per i pulsanti> = 21.

Ecco un modo semplice e retrocompatibile per fornire l'effetto a catena ai pulsanti in rilievo con lo sfondo personalizzato.

Il layout dovrebbe apparire così

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

Ho riscontrato questo problema oggi giocando con la libreria v22.

Supponendo che tu stia utilizzando gli stili, puoi impostare la colorButtonNormalproprietà e i pulsanti utilizzeranno quel colore per impostazione predefinita.

<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>

Al di fuori di ciò, puoi comunque creare uno stile per il pulsante, quindi utilizzarlo per ogni pulsante se hai bisogno di un assortimento di colori (non ho testato, solo speculato).

Ricorda di aggiungere android:prima dei nomi degli oggetti nel tuo stile v21 .

Con AppCompat (22.1.1+) puoi aggiungere uno stile come questo:

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

E usalo semplicemente applicando lo stile:

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

Modificando a livello di codice il colore, ho scoperto che l'unico modo per aggiornare il colore (su API 15 o 16) era invece usare la "lista tinta di sfondo". E non rimuove la bella animazione radiale sui dispositivi API 21:

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

Perché button.setBackground(...)e button.getBackground().mutate().setColorFilter(...)non cambiare il colore dei pulsanti su API 15 e 16 come fanno su API 21.

La risposta di @ ianhanniballake è assolutamente corretta e semplice. Ma mi ci sono voluti alcuni giorni per capire. Per qualcuno che non capisce la sua risposta, ecco un'implementazione più dettagliata

<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>

=== === O

<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>

Ho usato backgroundTint e primo piano:

<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"/>

Sono venuto a questo post in cerca di un modo per avere un colore di sfondo per il mio ListViewoggetto, pur mantenendo l'increspatura.

Ho semplicemente aggiunto il mio colore come sfondo e l'ItemBackground selezionabile come primo piano:

<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>

e funziona come un fascino. Immagino che la stessa tecnica possa essere usata anche per i pulsanti. In bocca al lupo :)

Usa backgroundTintinvece dibackground

Se sei interessato a ImageButton puoi provare questa semplice cosa:

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

v22.1di appcompat-v7introdotto alcune nuove possibilità. Ora è possibile assegnare un tema specifico solo a una vista.

Uso obsoleto dell'app: tema per lo styling della barra degli strumenti. Ora puoi usare android: tema per le barre degli strumenti su tutti i dispositivi API livello 7 e successivi e android: supporto per temi per tutti i widget su API livello 11 e superiori.

Quindi, invece di impostare il colore desiderato in un tema globale, ne creiamo uno nuovo e lo assegniamo solo a Button

Esempio:

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

E usa questo stile come tema per il tuo Button

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

Se stai bene usando una libreria di terze parti, dai un'occhiata a traex / RippleEffect . Ti consente di aggiungere un effetto a catena a QUALSIASI vista con solo poche righe di codice. Devi solo avvolgere, nel tuo file di layout XML, l'elemento che vuoi avere un effetto a catena con un com.andexert.library.RippleViewcontenitore.

Come bonus aggiuntivo richiede SDK Min 9 in modo da poter avere coerenza progettuale tra le versioni del sistema operativo.

Ecco un esempio tratto dal repository GitHub delle librerie:

<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>

È possibile modificare il colore dell'ondulazione aggiungendo questo attributo all'elemento 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"/>

Uso

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

e il colore accetterà su pre-lolipop

Ci sono due approcci spiegati nel fantastico tutorial di Alex Lockwood: http://www.androiddesignpatterns.com/2016/08/coloring-buttons-with-themeoverlays-background-tints.html :

Approccio n. 1: modifica del colore di sfondo del pulsante con un tema di sovrapposizione

<!-- 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"/>

Approccio n. 2: impostazione della tonalità di sfondo di 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"/>

Applicazione a livello di codice dei colori:

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

Ho provato questo:

android:backgroundTint:"@color/mycolor"

invece di modificare la proprietà di sfondo. Questo non rimuove l'effetto materiale.