Wie kann ich die Welligkeitsfarbe ändern, wenn ich? Attr / selectableItemBackground als Hintergrund verwende?

102

Ich habe einige SO-Fragen gesehen und sie gaben einige mögliche Methoden an, um das zu erreichen, was ich will. Beispielsweise:

  1. Verwenden Sie das colorControlHighlightAttribut in styles.xml.

    Hier ist meine styles-v21.xml:

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

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

    Und es funktioniert nicht. Ich habe auch versucht, den parent="Theme.AppCompatStil "SelectableItemBackground" zu ergänzen oder zu ändern colorControlHighlight(no android: prefix)"oder zu ändern ?android:attr/selectableItemBackground, beides ist nicht nützlich.

  2. Verwenden Sie backgroundTintAttribut im Layout.

    Also füge ich android:backgroundTint="#5677FC"meinem hinzu TextView. Immer noch nutzlos. Dann habe ich versucht, android:backgroundTintModezu src_inund zu wechseln src_atop, und sie machen nie einen Unterschied.

Wie kann ich die Welligkeitsfarbe ändern, wenn ich sie ?attr/selectableItemBackgroundals Hintergrund verwende ? Ich konzentriere mich nur auf Lollipop und höher. Vielen Dank im Voraus!

ywwynm
quelle

Antworten:

153

Schließlich finde ich die Lösung: Anstatt android:colorControlHighlightdirekt im Thema zu verwenden SelectableItemBackground, sollte ich einen anderen Stil schreiben:

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

Dann:

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

Schließlich fügen Sie style="@style/SelectableItemBackground"zu Viewin layout.xml.

AKTUALISIERT AM 26.08.2016 Nach der Veröffentlichung von N stellte ich fest, dass wir diese Methode manchmal nicht verwenden können, um die Welligkeitsfarbe für eine Art von View(zum Beispiel die CardView) festzulegen . Jetzt empfehle ich Entwicklern dringend RippleDrawable, die auch in XML deklariert werden können. Hier ist ein Beispiel:

Ich möchte einen CardViewWelleneffekt zeigen, wenn der Benutzer eine der oben genannten API21 berührt / klickt , und natürlich sollte es vor Lollipop eine andere Art von Feedback geben. Also sollte ich schreiben:

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

und selectable_item_backgroundim drawableOrdner:

<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_backgroundim drawable-v21Ordner:

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

Schließlich der Ordner ripple_blackin drawable(oder 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-->

Das ist es. Für andere Ansichten sollten Sie vielleicht verwenden android:background="@drawable/selectable_item_background". Vergessen Sie nicht , ein zu setzen OnClickListener, OnTouchListeneroder so etwas wie die für sie, sonst Welligkeit wird nicht angezeigt.

ywwynm
quelle
14
Verwenden Sie colorControlHighlightstatt android:colorControlHighlightfunktioniert besser für mich, sonst ist es nur für v21 +
Liuting
1
Dies ist nicht die richtige Antwort, siehe @ harranes Antwort unten.
Jin
2
Falls Sie keinen ClickListener festgelegt haben, machen Sie einfach die Ansicht anklickbar clickable="true"und der Ripple-Effekt wird funktionieren
Hedisam
58

Ripple-Effekt auf Pre- und Lollipop + -Geräten

Harrane und Liuting haben recht. Die akzeptierte Antwort ist nicht der beste Weg. Lassen Sie mich im Code zeigen, wie Sie die Welligkeitsfarbe für Versionen vor Lollipop und höher ändern können

  1. Ihr AppTheme sollte von jedem AppCompat-Design erben und das colorControlHighlight-Attribut enthalten (ohne Präfix 'android:').

    <!-- Application theme. -->
    <style name="AppTheme" parent="@style/Theme.AppCompat.Light.NoActionBar">
    <item name="colorControlHighlight">#40ffffff</item>
    </style>
  2. Ihre Ansicht sollte clickable = "true" enthalten (oder einen programmgesteuerten Klick-Listener haben) und der Hintergrund sollte "? Attr / selectableItemBackgroundBorderless" oder "? Attr / selectableItemBackground" sein:

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

Hinweis: Wenn Ihre übergeordnete Ansicht einen weißen Hintergrund hat, wird kein Welligkeitseffekt angezeigt, da dieser weiß ist. Ändern Sie den colorControlHighlight-Wert für eine andere Farbe

Wenn Sie für verschiedene Aktivitäten unterschiedliche Wellenfarben wünschen, können Sie für jede Aktivität in der Manifest-Datei ein persönliches Thema festlegen, z. B.:

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

Unterschiedliche Wellenfarben für unterschiedliche Fragmente in derselben Aktivität?

Sie können die Attribute des Aktivitätsthemas für jedes Fragment zur Laufzeit ändern. Überschreiben Sie sie einfach, bevor das Fragment mit Ihrem benutzerdefinierten Stil aufgeblasen wurde, und wenden Sie es auf ein aktuelles Thema an:

in values ​​/ styles.xml

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

Dann in Ihrem Fragment vor der Inflation 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;
    }

Dieser Stil funktioniert nur für dieses Fragment


Unterschiedliche Welligkeitsfarbe für unterschiedliche Ansichten? (Lutscher +)

Sie können die Welligkeitsfarbe für jede Ansicht separat mithilfe eines colorControlHighlightAttributs ändern. Dies funktioniert nicht, wenn Sie sie direkt auf eine Ansicht anwenden:

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

Sie sollten es als Thema anwenden:

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

PS Manchmal hilft dieser Ansatz auch, wenn Sie unbekannte Probleme mit der Welligkeit haben und diese nicht herausfinden können. In meinem Fall habe ich die Sliding Lib von Drittanbietern verwendet, die die Welligkeitseffekte für das gesamte Layout durcheinander gebracht und dieses Thema explizit zu allen für mich erarbeiteten anklickbaren Ansichten hinzugefügt hat.

Kirill Karmazin
quelle
10

Es zeigt einen Welleneffekt mit Farbe auf API +21 und einen einfachen grauen Hintergrund auf Druck für API-21. Fügen Sie diesen Stil hinzu:

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

Und setzen Sie es auf die Ansicht:

<Button
   ...
   android:theme="@style/AppTheme.MyRipple" />
Mahdi Khansari
quelle
3
Es ist wichtig zu bemerken, dass es tatsächlich so ist, wie Sie es geschrieben haben android:themeund nicht das, was die Leute normalerweise benutzen style.
Android-Entwickler
4

Führen Sie die folgenden Schritte aus:

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

-Das Stilattribut ruft den von uns erstellten Stil auf.

-Foreground-Attribut ruft das standardmäßig auswählbare Attribut der Andorid auf.

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>
Prajwal W.
quelle
0

Dieser Code funktioniert für mich, um eine Welligkeit zu erzeugen:

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);
    }
}

Ich habe keine Möglichkeit gefunden, das Attribut selectableItemBackground zu ändern. Deshalb habe ich es wie oben gemacht.

Mika
quelle
0

In dunkelschwarzen Themen (oder anderen) Apps versuchen Sie, wie unten zu verwenden, zuerst ripple_effect.xmlin einem drawableOrdner zu erstellen und Code wie hinzuzufügen

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

Stellen Sie dann den Hintergrund auf Ihre Ansicht wie Linear layout, Button, TextViewusw. ein.

 <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" />
OmiK
quelle
-1

Verwenden Sie das Vordergrundattribut als selectableItemBackground und das Hintergrundattribut als gewünschte Farbe.

android:foreground="?attr/selectableItemBackground"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:background="@color/white"
Titto Jose
quelle
1
Auf diese Weise haben Sie keine Möglichkeit, die Farbe des Welleneffekts zu ändern. Die Frage -How can I modify ripple color when using ?attr/selectableItemBackground as background?
HB.