webentwicklung-frage-antwort-db.com.de

Verwenden von? SelectableItemBackground mit einer weißen Hintergrundfarbe

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

 enter image description here

 enter image description here

Wie kann ich den gewünschten Effekt erzielen?

androidandroid-styles
31
Farbod Salamat-Zadeh

Sie können den Vordergrund Ihres FrameLayout verwenden: 

<FrameLayout ...
    Android:background="@Android:color/white"
    Android:foreground="?attr/selectableItemBackground">
66
pdegand59

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

Die anderen Antworten funktionieren etwas, aber die folgenden funktionieren nur am besten für mich:

Im styles.xmlcolorControlHighlight 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

1
Pierre

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