Ich habe immer Android:background="?selectableItemBackground"
für einen Ripple-Effekt verwendet, wenn auf eine Ansicht (beispielsweise eine LinearLayout
) geklickt wird. Ich glaube, ich habe irgendwo gelesen, dass dies mit API 14 abwärtskompatibel ist.
Ich habe jedoch festgestellt, dass ich diesen Ripple-Effekt verwenden muss, jedoch mit einem weißen Hintergrund. Insbesondere habe ich ein Layout für ein Listenelement, das auf dem Standardfarbhintergrund angezeigt wird (ich erweitere mich von Theme.AppCompat.Light.NoActionBar
). Ich möchte, dass sich das Listenelement von diesem Hintergrund abhebt, indem es das Listenelement einfach weiß (#FFFFFF
) färbt. .
Hier ist das Layout der Listenelemente:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:background="?selectableItemBackground"
Android:layout_width="match_parent"
Android:layout_height="wrap_content">
...
<LinearLayout
Android:orientation="vertical"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:gravity="center_vertical"
Android:paddingLeft="@dimen/mdu_keyline_1"
Android:paddingRight="@dimen/mdu_keyline_1"
Android:paddingTop="@dimen/mdu_padding_normal"
Android:paddingBottom="@dimen/mdu_padding_normal">
...
</LinearLayout>
</FrameLayout>
Das Obige erzeugt den Welleneffekt ohne den weißen Hintergrund.
Wenn ich es versuche:
<FrameLayout ...
Android:background="@color/white">
Dies erzeugt offensichtlich einen weißen Hintergrund, jedoch ohne den Welleneffekt.
Ich habe auch etwas anderes ausprobiert - und dies ergab ein Ergebnis, das dem entspricht, was ich suche:
<FrameLayout ...
Android:background="@color/white">
...
<LinearLayout ...
Android:background="?selectableItemBackground">
Das oben genannte gab mir den weißen Hintergrund mit einem Welleneffekt. Allerdings scheint die Welligkeit immer von der Mitte aus zu beginnen, unabhängig davon, auf welchen Teil des Elements ich klicke.
Hier sind einige Screenshots, die das aktuelle Ergebnis zeigen (ignorieren Sie den Schatten oben in den Listenelementen - dies ist der Schatten von AppBarLayout
und Toolbar
, den ich verwende).
Wie kann ich den gewünschten Effekt erzielen?
Sie können den Vordergrund Ihres FrameLayout verwenden:
<FrameLayout ...
Android:background="@Android:color/white"
Android:foreground="?attr/selectableItemBackground">
Sie können eine Layerliste in Ihrem Drawables-Ordner erstellen und diese in Ihren Hintergrund setzen:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item Android:drawable="@Android:color/white"/>
<item Android:drawable="?attr/selectableItemBackground"/>
</layer-list>
Die anderen Antworten funktionieren etwas, aber die folgenden funktionieren nur am besten für mich:
Im styles.xml
colorControlHighlight
hinzufügen
<style name="ExampleTheme" parent="Theme.AppCompat">
<item name="colorAccent">...</item>
<item name="colorPrimary">...</item>
<item name="colorPrimaryDark">...</item>
...
<item name="colorControlHighlight">@color/purple_bg</item> <-- THIS LINE
...
</style>
</resources>
Im colors.xml
füge Farbe deiner Wahl mit ein bisschen Alpha hinzu #77632E8E
<?xml version="1.0" encoding="UTF-8" ?>
<resources>
<color name="purple_bg">#77632E8E</color>
</resources>
Im AndroidManifest.xml
stelle das Thema auf deine Aktivität ein (alle)
<activity Android:name=".MainActivity"
...
Android:theme="@style/ExampleTheme"
... />
Im Layout der Aktivität main_layout.xml
setze das Android:background
in der Ansicht, auf die Sie den Effekt anwenden möchten:
<LinearLayout
Android:id="@+id/llBlock"
Android:orientation="vertical"
Android:layout_width="match_parent"
Android:layout_height="100dp"
Android:background="?attr/selectableItemBackgroundBorderless">
....
</LinearLayout>
Beide ?attr/selectableItemBackground
und ?attr/selectableItemBackgroundBorderless
funktioniert
Ripple Drawable ist eine LayerDrawable
. Der richtige Weg, dies zu tun, ist:
<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:color="?attr/colorControlHighlight">
<item>
<shape>
<solid
Android:color="#FFFFFF"/>
</shape>
</item>
<item Android:id="@Android:id/mask">
<shape>
<solid Android:color="@Android:color/white"/>
</shape>
</item>
</ripple>