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

时间:2016-10-12 21:25:11

标签: android android-layout android-drawable rippledrawable

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

我创建了一个按钮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的不同博客中发现了一些代码,但它仍然没有用!

15 个答案:

答案 0 :(得分:110)

"?attr/selectableItemBackground"添加到您观看的foreground属性中,如果它已有背景和android:clickable="true"

答案 1 :(得分:82)

这是另一个可绘制的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" />

答案 2 :(得分:55)

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

答案 3 :(得分:30)

除了 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"

答案 4 :(得分:26)

当按钮具有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://jascode.wordpress.com/2017/11/11/how-to-add-ripple-effect-to-an-android-app/

答案 5 :(得分:7)

AppCompat v7 +

  

如果您不在?android:前缀,则您的应用会崩溃。

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

您可以将其放在android:backgroundandroid: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"
/>

答案 6 :(得分:5)

一种简单的方法是按照here所述设置视图主题。

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>

答案 7 :(得分:4)

当你使用android:background时,你正在用一个空白颜色替换大部分样式和外观。

更新:从AppCompat版本23.0.0开始,有一个新的Widget.AppCompat.Button.A彩色样式,它使用主题的colorButtonNormal表示禁用的颜色,colorAccent表示启用的颜色。 / p>

这允许您直接通过

将其应用于按钮
<Button
 ...
style="@style/Widget.AppCompat.Button.Colored" />

您可以在v21目录中使用drawable作为背景,例如:

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

这将确保您的背景颜色为?attr / colorPrimary,并使用默认的?attr / colorControlHighlight(如果您愿意,也可以在主题中设置)使用默认的波纹动画。

注意:您必须为小于v21:

创建自定义选择器
<?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>

答案 8 :(得分:4)

除了 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>

答案 9 :(得分:4)

试试这个

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

答案 10 :(得分:4)

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

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

答案 11 :(得分:2)

只需使用:

android:backgroundTint="#f816a463"

而不是:

android:background="#f816a463"

请勿忘记将Button更改为android.support.v7.widget.AppCompatButton

答案 12 :(得分:1)

使用<ripple>标签(由于颜色不是“默认”,我个人不希望这样做)的另一种解决方法是:

为按钮背景创建一个可绘制对象,并将<item android:drawable="?attr/selectableItemBackground">包含在<layer-list>

然后(我认为这是重要的一部分)以编程方式在按钮实例上设置backgroundResource(R.drawable.custom_button)

活动/片段

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

布局

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

答案 13 :(得分:0)

现在我们需要创建一个可绘制的资源文件,并将其命名为涟漪效果,如下所示

ripple_effect.xml

<?xml version="1.0" encoding="utf-8"?>

<ripple

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:color="@color/colorRipple">     <!-- ripple color -->

    <!-- for Button -->

    <item>

        <shape android:shape="rectangle">

            <corners android:radius="3dp" />

            <solid android:color="@color/colorPrimary"/>

        </shape>

    </item>

</ripple>

来源完整:https://code-android-example.blogspot.com/2020/11/ripple-effect-in-android-for-button.html

答案 14 :(得分:0)

setForeground已添加到 API级别23 中。如果您需要中继foreground属性,请利用 <View android:id="@+id/circular_reveal" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/primaryMilk_22" android:elevation="@dimen/margin_20" android:visibility="invisible" /> 的强大功能!

fun View.circularReveal() {
    val cx: Int = width / 2
    val cy: Int = height / 2
    val finalRadius: Int =
        width.coerceAtLeast(height)
    val anim: Animator = ViewAnimationUtils.createCircularReveal(
        this,
        cx,
        cy,
        0f,
        finalRadius.toFloat()
    )
    anim.interpolator = AccelerateDecelerateInterpolator()
    anim.duration = 400
    isVisible = true
    anim.start()
    anim.doOnEnd {
        isVisible = false
    }
}

具有kotlin ext功能,这是osm的方式!

git merge