使用按钮背景颜色为我的按钮添加涟漪效果？

Question

我创建了一个按钮,我想为该按钮添加涟漪效果!

我创建了一个按钮bg XML文件:(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>

这是我的涟漪效应文件:(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>

这是我想要添加涟漪效果的按钮:

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

但添加涟漪效果后按钮背景是透明的,只有在点击时才会显示按钮,如下所示:

点击之前

点击

但我需要按钮背景颜色和涟漪效果,我在Stack Overflow的不同博客中发现了一些此代码,但它仍然无效!

Answer 1

如果"?attr/selectableItemBackground"视图foreground已经具有背景,则将其添加到视图的属性中android:clickable="true"

Answer 2

这是另一个可绘制的xml,适合那些想要将渐变背景,圆角半径和涟漪效果加在一起的人:

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

将其添加到按钮的背景中.

<Button
    ...
    android:background="@drawable/button_background" />

Answer 3

将涟漪效果/动画添加到Android按钮

只需用android:background ="？attr/selectableItemBackground"替换你的按钮背景属性,你的代码就像这样.

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

将波纹效果/动画添加到Android按钮的另一种方法

使用此方法,您可以自定义涟漪效果颜色.首先,您必须在drawable资源目录中创建一个xml文件.创建ripple_effect.xml文件并添加以下代码. RES /抽拉/ 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>

并将按钮的背景设置为上面的可绘制资源文件

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

Answer 4

除了Jigar Patel的解决方案之外,还要将其添加到ripple.xml以避免按钮的透明背景.

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

完整的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>

在按钮中使用此ripple.xml作为背景:

android:background="@drawable/ripple"

Answer 5

当按钮具有drawable的背景时,我们可以为前景参数添加涟漪效果.检查下面的代码,它的工作是我的按钮,具有不同的背景

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

为涟漪效果添加以下参数

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

有关参考,请参阅以下链接 https://madoverandroid.wordpress.com/2017/11/11/how-to-add-ripple-effect-to-an-android-app/

Answer 6

AppCompat v7 +

如果你的前缀没有?android:你的应用程序将崩溃.

您应该根据自己的喜好使用"?android:attr/selectableItemBackground"或"?android:attr/selectableItemBackgroundBorderless".我更喜欢Borderless.

您可以将其放入android:background或android:foreground保留现有属性.

元素必须具有android:clickable="true"并且android:focusable="true"为了使其起作用,但是许多元素(例如按钮)true默认具有它们.

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

Answer 7

一个简单的方法是设置一个视图主题，概述这里。

some_view.xml

<ImageView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:background="?attr/selectableItemBackgroundBorderless"
   android:focusable="true"
   android:src="@drawable/up_arrow"
   android:theme="@style/SomeButtonTheme"/>

some_style.xml

<style name="SomeButtonTheme" >
   <item name="colorControlHighlight">@color/someColor</item>
</style>

Answer 8

除了Sudheesh R

将波纹效果/动画添加到带有角的按钮矩形形状的 Android 按钮

创建 xml 文件 res/drawable/your_file_name.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>

Answer 9

添加前景和可点击属性对我有用。

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

Answer 10

尝试这个：

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