wake-up-neo.com

Hinzufügen von Welleneffekten zu meiner Schaltfläche mit Hintergrundfarbe der Schaltfläche?

Ich habe einen Button erstellt und möchte diesen Button mit einem Ripple-Effekt versehen!

Ich habe eine Schaltfläche bg XML-Datei erstellt: (bg_btn.xml)

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="rectangle">
<gradient Android:startColor="#FFFFFF" Android:endColor="#00FF00" Android:angle="270" />
<corners Android:radius="3dp" />
<stroke Android:width="5px" Android:color="#000000" />
</shape>

Und das ist meine Ripple-Effekt-Datei: (ripple_bg.xml)

<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:color="#f816a463"
    tools:targetApi="Lollipop">
    <item Android:id="@Android:id/mask">
        <shape Android:shape="rectangle">
            <solid Android:color="#f816a463" />
        </shape>
    </item>
</ripple>

Und dies ist mein Button, den ich mit einem Ripple-Effekt versehen möchte:

<Button
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:text="New Button"
Android:id="@+id/button"
Android:layout_centerHorizontal="true"
Android:layout_marginTop="173dp"
Android:textColor="#fff"
Android:background="@drawable/ripple_bg"
Android:clickable="true" />

Nach dem Hinzufügen des Ripple-Effekt-Schaltflächenhintergrunds ist der Hintergrund jedoch transparent, und die Schaltflächen werden nur angezeigt, wenn darauf geklickt wird.

Vor Klick

Klicken Sie auf

Aber ich brauche sowohl die Hintergrundfarbe der Schaltfläche als auch den Welleneffekt. Ich habe etwas Code in verschiedenen Blogs von Stack Overflow gefunden, aber es funktioniert immer noch nicht!

65
rakcode

Hier ist ein weiteres zeichnungsfähiges XML-Dokument für alle, die Farbverlaufshintergrund, Eckenradius und Welligkeitseffekt zusammen hinzufügen möchten:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:color="@color/colorPrimaryDark">
    <item Android:id="@Android:id/mask">
        <shape Android:shape="rectangle">
            <solid Android:color="@color/colorPrimaryDark" />
            <corners Android:radius="@dimen/button_radius_large" />
        </shape>
    </item>

    <item Android:id="@Android:id/background">
        <shape Android:shape="rectangle">
            <gradient
                Android:angle="90"
                Android:endColor="@color/colorPrimaryLight"
                Android:startColor="@color/colorPrimary"
                Android:type="linear" />
            <corners Android:radius="@dimen/button_radius_large" />
        </shape>
    </item>
</ripple>

Fügen Sie dies dem Hintergrund Ihrer Schaltfläche hinzu.

<Button
    ...
    Android:background="@drawable/button_background" />
68
Pei

fügen Sie dem foreground-Attribut Ihrer Ansicht den "?attr/selectableItemBackground" hinzu, wenn dieser zusammen mit Android:clickable="true" bereits einen Hintergrund hat.

92
backslashN

Ripple-Effekt/Animation zu einer Android-Schaltfläche hinzufügen

Ersetzen Sie einfach das Hintergrundattribut der Schaltfläche durch Android: background = "? Attr/selectableItemBackground" und Ihr Code sieht so aus.

      <Button
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:background="?attr/selectableItemBackground"
        Android:text="New Button" />

Eine weitere Möglichkeit, einem Android-Button einen Ripple-Effekt/eine Animation hinzuzufügen

Mit dieser Methode können Sie die Farbe des Ripple-Effekts anpassen. Zuerst müssen Sie eine XML-Datei in Ihrem Ressourcenverzeichnis erstellen. Erstellen Sie eine Ripple_effect.xml-Datei und fügen Sie den folgenden Code hinzu .res/drawable/ripple_effect.xml

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

Stellen Sie den Hintergrund der Schaltfläche auf die überziehbare Ressourcendatei

<Button
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:background="@drawable/ripple_effect"
    Android:padding="16dp"
    Android:text="New Button" />
52
Jigar Patel

Fügen Sie zusätzlich zur Lösung von Jigar Patel diese zur ripple.xml hinzu, um einen transparenten Hintergrund der Schaltflächen zu vermeiden.

<item
    Android:id="@Android:id/background"
    Android:drawable="@color/your-color" />

Vollständige XML :

<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:color="@color/your-color"
    tools:targetApi="Lollipop">
    <item Android:id="@Android:id/mask">
        <shape Android:shape="rectangle">
            <solid Android:color="@color/your-color" />
        </shape>
    </item>
    <item
        Android:id="@Android:id/background"
        Android:drawable="@color/your-color" />
</ripple>

Verwenden Sie diese ripple.xml als Hintergrund für Ihre Schaltfläche: 

Android:background="@drawable/ripple"
28
Sudheesh R

Wenn die Schaltfläche einen Hintergrund von der Zeichenfläche hat, können Sie dem Vordergrundparameter einen Welleneffekt hinzufügen. Überprüfen Sie den folgenden Code, wenn er für meine Schaltfläche mit einem anderen Hintergrund arbeitet

    <Button
    Android:layout_width="wrap_content"
    Android:layout_height="40dp"
    Android:gravity="center"
    Android:layout_centerHorizontal="true"                                                             
    Android:background="@drawable/shape_login_button"
    Android:foreground="?attr/selectableItemBackgroundBorderless"
    Android:clickable="true"
    Android:text="@string/action_button_login"
     />

Fügen Sie den folgenden Parameter für den Ripple-Effekt hinzu 

   Android:foreground="?attr/selectableItemBackgroundBorderless"
   Android:clickable="true"

Referenz finden Sie unter dem folgenden Link https://madoverandroid.wordpress.com/2017/11/11/how-to-add-ripple-effect-to-an-Android-app/

22
Jasmine John

AppCompat v7 +

Wenn Sie nicht mit ?android: beginnen, stürzt Ihre App ab.

Sie sollten je nach Ihren Wünschen "?android:attr/selectableItemBackground" oder "?android:attr/selectableItemBackgroundBorderless" verwenden. Ich bevorzuge Borderless.

Sie können es entweder in Android:background oder Android:foreground setzen, um vorhandene Eigenschaften beizubehalten.

Das Element muss Android:clickable="true" und Android:focusable="true" haben, damit dies funktioniert. Viele Elemente, z. B. Schaltflächen, haben jedoch standardmäßig true.

<Button
    ...
    Android:background="@color/white"
    Android:foreground="?android:attr/selectableItemBackgroundBorderless"
/>
<TextView
    ...
    Android:background="?android:attr/selectableItemBackgroundBorderless"
    Android:clickable="true"
    Android:focusable="true"
/>
7
Gibolt

Das Hinzufügen von Vordergrund- und anklickbaren Attributen hat für mich funktioniert.

<Button
    ... 
    Android:background="@color/your_color"
    Android:foreground="?attr/selectableItemBackgroundBorderless"
    Android:clickable="true" />
4
Ashwin

Wenn Sie Android: background verwenden, ersetzen Sie einen Großteil des Stylings und das Erscheinungsbild einer Schaltfläche mit einer leeren Farbe.

Update: Ab der Version 23.0.0 von AppCompat gibt es einen neuen Widget.AppCompat.Button.A-Farbstil, der colorButtonNormal Ihres Themas für die deaktivierte Farbe und colorAccent für die aktivierte Farbe verwendet.

Dadurch können Sie es direkt über Ihre Schaltfläche anwenden

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

Sie können ein Drawable in Ihrem v21-Verzeichnis für Ihren Hintergrund verwenden, z.

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

Dadurch wird sichergestellt, dass Ihre Hintergrundfarbe „attr/colorPrimary“ ist und die standardmäßige Ripple-Animation mit dem Standard „attr/colorControlHighlight“ (die Sie auch in Ihrem Design festlegen können, wenn Sie möchten) verfügt.

Hinweis: Sie müssen einen benutzerdefinierten Selektor für weniger als v21 erstellen:

<?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>
4
Atman Bhatt

Neben Sudheesh R

Fügen Sie einen Ripple-Effekt/eine Animation zu einer Android-Schaltfläche hinzu

Erstellen Sie die XML-Datei res/drawable/Ihre_Dateiname.xml 

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:color="@color/colorWhite"
    tools:targetApi="Lollipop">
    <item Android:id="@Android:id/mask">
        <shape Android:shape="rectangle">
            <solid Android:color="@color/colorPrimaryDark" />
            <corners Android:radius="50dp" />
        </shape>
    </item>

    <item Android:id="@Android:id/background">
        <shape Android:shape="rectangle">
            <gradient
                Android:angle="90"
                Android:endColor="@color/colorAccent"
                Android:startColor="@color/colorPrimary"
                Android:type="linear" />
            <corners Android:radius="50dp" />
        </shape>
    </item>
</ripple>
4

versuche dies

<Button
            Android:id="@+id/btn_location"
            Android:layout_width="121dp"
            Android:layout_height="38dp"
            Android:layout_gravity="center"
            Android:layout_marginBottom="24dp"
            Android:layout_marginTop="24dp"
            Android:foreground="?attr/selectableItemBackgroundBorderless"
            Android:clickable="true"
            Android:background="@drawable/btn_corner"
            Android:gravity="center_vertical|center_horizontal"
            Android:paddingLeft="13dp"
            Android:paddingRight="13dp"
            Android:text="Save"
            Android:textColor="@color/color_white" />
3
Raveendra

Benutz einfach :

Android:backgroundTint="#f816a463"

Anstatt:

Android:background="#f816a463"

Vergessen Sie nicht, Ihre Button in Android.support.v7.widget.AppCompatButton zu ändern.

2
Gilad Shapira

Eine Alternative zur Verwendung des <ripple>-Tags (was ich persönlich lieber nicht mache, weil die Farben nicht "Standard" sind), ist folgende:

Erstellen Sie ein Zeichen für den Schaltflächenhintergrund und fügen Sie <item Android:drawable="?attr/selectableItemBackground"> in den <layer-list> ein.

Dann (und ich denke, das ist der wichtige Teil), programmieren Sie backgroundResource(R.drawable.custom_button) auf Ihrer Schaltflächeninstanz.

Aktivität/Fragment

Button btn_temp = view.findViewById(R.id.btn_temp);
btn_temp.setBackgroundResource(R.drawable.custom_button);

Layout

<Button
    Android:id="@+id/btn_temp"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:background="@drawable/custom_button"
    Android:text="Test" />

custom_button.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item>
        <shape Android:shape="rectangle">
            <solid Android:color="@Android:color/white" />
            <corners Android:radius="10dp" />
        </shape>
    </item>
    <item Android:drawable="?attr/selectableItemBackground" />
</layer-list>
0
Aidan Host