Come posso modificare il colore dell'increspatura quando uso? Attr / selectableItemBackground come sfondo?


103

Ho visto alcune domande SO e hanno dato alcuni possibili metodi per ottenere ciò che voglio. Per esempio:

  1. Usa l' colorControlHighlightattributo in styles.xml.

    Ecco il mio styles-v21.xml:

    <style name="SelectableItemBackground">
        <item name="android:colorControlHighlight">#5677FC</item>
        <item name="android:background">?attr/selectableItemBackground</item>
    </style>

    E il mio widget:

    <TextView
        android:id="@+id/tv_take_photo_as_bt"
        android:layout_width="280dp"
        android:layout_height="48dp"
        android:text="@string/act_take_photo"
        style="@style/SelectableItemBackground"/>

    E non funziona. Ho anche provato ad aggiungere lo parent="Theme.AppCompatstile "SelectableItemBackground", o passare a colorControlHighlight(no android: prefix)", o passare a ?android:attr/selectableItemBackground, nessuno dei due è utile.

  2. Usa backgroundTintattributo nel layout.

    Quindi aggiungo android:backgroundTint="#5677FC"al mio TextView. Ancora inutile. Poi ho provato a cambiare android:backgroundTintModein src_ine src_atop, e non hanno mai fatto la differenza.

Quindi, come posso cambiare il colore dell'increspatura quando uso ?attr/selectableItemBackgroundcome sfondo. Mi concentro solo su Lollipop e superiori. Grazie in anticipo!

Risposte:


154

Finalmente trovo la soluzione: invece di usare android:colorControlHighlightdirettamente nel tema SelectableItemBackground, dovrei scrivere un altro stile:

<style name="SelectableItemTheme">
    <item name="colorControlHighlight">@color/ripple_color</item>
</style>

Poi:

<style name="SelectableItemBackground">
    <item name="android:theme">@style/SelectableItemTheme</item>
    <item name="android:background">?attr/selectableItemBackground</item>
</style>

Infine aggiungi style="@style/SelectableItemBackground"a Viewlayout.xml.

AGGIORNATO IL 26/8/2016 Dopo il rilascio di N, ho scoperto che a volte non è possibile utilizzare questo metodo per impostare il colore dell'increspatura per qualche tipo di View(ad esempio, il CardView). Ora consiglio vivamente agli sviluppatori di utilizzare RippleDrawable, che può anche essere dichiarato in xml. Ecco un esempio:

Voglio mostrare un effetto a CardViewcatena quando l'utente tocca / fa clic su una API21 sopra, e ovviamente dovrebbe esserci un altro tipo di feedback prima di Lollipop. Quindi dovrei scrivere:

<android.support.v7.widget.CardView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:foreground="@drawable/selectable_item_background"/>

e selectable_item_backgroundnella drawablecartella:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false" android:drawable="@android:color/transparent" />
    <item android:drawable="@color/color_clicked" />
</selector>

selectable_item_backgroundnella drawable-v21cartella:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ripple_black" />
</selector>

infine, la cartella ripple_blackin drawable(o drawable-v21):

<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="@color/color_clicked"
    tools:ignore="NewApi" /> <!--you can remove this line if it's in v21 folder-->

Questo è tutto. Per altre visualizzazioni, forse dovresti usare android:background="@drawable/selectable_item_background". Non dimenticare di impostare un OnClickListener, OnTouchListenero qualcosa di simile a quelli per loro, altrimenti l'increspatura non verrà visualizzata.


14
Usa colorControlHighlightinvece di android:colorControlHighlightfunziona meglio per me, altrimenti è solo per v21 +
Liuting

1
Questa non è la risposta giusta, si prega di vedere la risposta di @ harrane di seguito.
Jin

2
Nel caso in cui non hai impostato un ClickListener, rendi la visualizzazione selezionabile clickable="true"e l'effetto a
catena

58

Effetto ondulazione su dispositivi pre e Lollipop +

harrane e Liuting hanno ragione. La risposta accettata non è il modo migliore. Fammi mostrare nel codice come cambiare il colore dell'increspatura per le versioni pre-Lollipop e successive

  1. Il tuo AppTheme dovrebbe ereditare da qualsiasi tema AppCompat e contenere l'attributo colorControlHighlight (senza il prefisso "android:")

    <!-- Application theme. -->
    <style name="AppTheme" parent="@style/Theme.AppCompat.Light.NoActionBar">
    <item name="colorControlHighlight">#40ffffff</item>
    </style>
  2. La tua visualizzazione dovrebbe contenere clickable = "true" (o dovrebbe avere un listener di clic impostato a livello di programmazione) e lo sfondo dovrebbe essere "? Attr / selectableItemBackgroundBorderless" o "? Attr / selectableItemBackground":

    <LinearLayout
    ...
    android:clickable="true"
    android:background="?attr/selectableItemBackgroundBorderless"/>

Nota: se la vista genitore ha uno sfondo bianco, non vedrai l'effetto a catena poiché è bianco. Modificare il valore colorControlHighlight per un colore diverso

Inoltre, se desideri diversi colori di ondulazione su diverse attività, puoi impostare un tema personale per ciascuna attività nel file Manifest, ad esempio:

       <activity
        android:name="com.myapp.GalleryActivity"
        android:theme="@style/RedRippleTheme"
        />

Diversi colori di ondulazione per diversi frammenti nella stessa attività?

È possibile modificare gli attributi del tema dell'attività per ogni frammento in runtime. Basta sovrascriverli prima che il frammento venga gonfiato con il tuo stile personalizzato e applicarlo a un tema corrente:

in values ​​/ styles.xml

    <style name="colorControlHighlight_blue">
       <item name="colorControlHighlight">@color/main_blue_alpha26</item>
    </style>

Quindi, nel tuo frammento prima dell'inflazione in onCreateView():

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
       getContext().getTheme().applyStyle(R.style.colorControlHighlight_blue, true); //blue ripple color
       View view = inflater.inflate(R.layout.my_fragment_layout, container, false);
       return view;
    }

Questo stile funzionerà solo per questo frammento


Colore ondulazione diverso per viste diverse? (Lecca-lecca +)

Puoi cambiare il colore dell'increspatura per ogni vista separatamente usando l' colorControlHighlightattributo, non funziona se li applichi direttamente a una vista:

    <TextView
     ...
     colorControlHighlight="#40ffffff"/> <!-- DOESN'T WORK -->

dovresti applicarlo come tema:

<TextView
  ...
  android:theme="@style/colorControlHighlight_blue"/>

PS Inoltre, a volte questo approccio aiuta se hai problemi sconosciuti con ondulazione e non riesci a capirlo. Nel mio caso, ho utilizzato una libreria scorrevole di terze parti che ha incasinato gli effetti a catena per l'intero layout e aggiungendo esplicitamente questo tema a tutte le visualizzazioni cliccabili elaborate per me.


10

Mostra un effetto a catena con il colore su API +21 e un semplice sfondo grigio in stampa per API -21. Aggiungi questo stile:

<style name="AppTheme.MyRipple">
   <item name="colorControlHighlight">@color/your_color</item>
   <item name="android:background">?selectableItemBackgroundBorderless</item>
</style>

E impostalo sulla vista:

<Button
   ...
   android:theme="@style/AppTheme.MyRipple" />

3
È importante notare che è davvero come hai scritto android:themee non quello che le persone usano di solito style.
sviluppatore Android


5

Utilizzare i passaggi seguenti:

1. Make changes to button view in your layout.xml
2. Add new styles in styles.xml

your_layout.xml

<Button
                        android:id="@+id/setup_submit_button"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="16dp"
                        android:text="@string/action_sign_in"
                        android:textStyle="bold"
                        android:background="@color/colorPrimary"
                        android:textColor="@color/white"
                        style="@style/SelectableItemBackground"
                        android:foreground="?android:attr/selectableItemBackground"/>

-L'attributo style chiama lo stile che abbiamo creato.

L'attributo -Foreground chiama l'attributo selezionabile predefinito di andorid.

styles.xml

 <style name="SelectableItemTheme">
        <item name="colorControlHighlight">@color/white</item>
    </style>


    <style name="SelectableItemBackground">
        <item name="android:theme">@style/SelectableItemTheme</item>
        <item name="android:background">?attr/selectableItemBackground</item>
    </style>

0

Questo codice funziona per me per creare un'ondulazione:

public static void setRippleDrawable(View view, int normalColor, int touchColor) {
    try {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            RippleDrawable rippleDrawable = new RippleDrawable(ColorStateList.valueOf(touchColor), view.getBackground(), null);
            view.setBackground(rippleDrawable);
        } else {
            StateListDrawable stateListDrawable = new StateListDrawable();
            stateListDrawable.addState(new int[]{android.R.attr.state_pressed}, new ColorDrawable(touchColor));
            stateListDrawable.addState(new int[]{android.R.attr.state_focused}, new ColorDrawable(touchColor));
            stateListDrawable.addState(new int[]{}, new ColorDrawable(normalColor));
            view.setBackground(stateListDrawable);
            }
    } catch (Exception e) {
        Log.e(LOG_TAG, "" + e);
    }
}

Non ho trovato alcun modo per modificare l'attributo selectableItemBackground. Ecco perché l'ho fatto come sopra.


0

Nel tema nero scuro (o qualsiasi altra) app prova a usare come sotto prima crea ripple_effect.xmlnella drawablecartella e aggiungi codice come

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#f5f5f5">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="#f5f5f5" />

        </shape>
    </item>

</ripple>

quindi imposta lo sfondo su Any view come Linear layout, Button, TextViewecc.

 <TextView
                    android:id="@+id/tvApply"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@drawable/ripple_effect"
                    android:clickable="true"
                    android:text="APPLY"
                    android:textColor="#FFFFFF"
                    android:gravity="center"
                    android:textSize="@dimen/_8sdp"
                    android:padding="@dimen/_8sdp"
                    android:focusable="true" />

-1

Usa l'attributo di primo piano come selectableItemBackground e l'attributo di sfondo come il colore che desideri.

android:foreground="?attr/selectableItemBackground"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:background="@color/white"

1
In questo modo, non avrai la possibilità di cambiare il colore dell'effetto increspatura. La domanda -How can I modify ripple color when using ?attr/selectableItemBackground as background?
HB.
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.