对可绘制形状的涟漪效应答案

【问题标题】：Ripple effect on shape drawable对可绘制形状的涟漪效应
【发布时间】：2015-12-24 22:37:51
【问题描述】：

尝试在这里做一些非常简单的事情并查找了一堆 SO 资源，但无济于事。我正在尝试在使用drawable 背景类型为shape drawable 的按钮上获得涟漪效应。相关文件：

background_button：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke
        android:width="1px"
        android:color="#80ffffff" />
    <solid android:color="@android:color/transparent" />
</shape>

ripple.xml 在drawable-v21 文件夹中：

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="?attr/colorControlHighlight">
    <item android:drawable="@drawable/background_button"/>
</ripple>

Button.xml：

   <Button
                    android:id="@+id/login_button"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="20dp"
                    android:layout_weight="1"
                    android:paddingTop="10dp"
                    android:paddingBottom="10dp"
                    android:background="@drawable/ripple"


 />

这里有什么问题。谢谢！

【问题讨论】：

标签： android xml android-5.0-lollipop

【解决方案1】：

我的建议是不要使用<ripple 标签。我有 2 个原因：完全按照自己的意愿去做并不容易，而且每个背景都必须有 2 个不同的 .xml 文件。我不喜欢有drawable-v21 文件夹。

我的解决方案是用FrameLayout 包装你的Button 并使用android:foreground 属性。这样你就可以拥有你想要的任何背景，并且可以保持涟漪效应。

<FrameLayout
    android:id="@+id/login_button"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    android:layout_weight="1"
    android:paddingTop="10dp"
    android:paddingBottom="10dp"
    android:foreground="?attr/selectableItemBackground">

    <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/background_button"/>
</FrameLayout>

请注意，我已将所有属性和 id 移至 FrameLayout。您应该将onClickListener 设置为FrameLayout 而不是Button。

顺便说一句，?attr/selectableItemBackground 很棒。尽可能多地使用它。对于 Android 4.0 到 4.3 的旧设备，它将蓝色 Holo 颜色替换为灰色。

【讨论】：

这就是我长期以来一直在做的事情。它提供了从 Api 级别 7 到 23 的一致性。我希望它对你有用
我复制了您提供的相同内容。点击监听器是否需要从按钮或其他地方移动？
当然可以。 :( 对不起，我忘记了。点击监听器应该设置为 FrameLayout。
为什么不直接把前景元素放在按钮上呢？
有趣的解决方案，然而，涟漪效应似乎填满了整个矩形——如果背景不是矩形，效果就不太好了。也许面具会帮助控制它。（我还没有机会尝试。）此外，这只是 API 19 上的闪光，而不是涟漪，但总比没有好。谢谢你的想法，@tasomaniac！

【解决方案2】：

试试这个。

ripple_effect.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#2797e0"
tools:targetApi="lollipop">
<item android:id="@android:id/mask">
    <shape android:shape="rectangle">
        <solid android:color="#2797e0" />
    </shape>
</item>

button.xml

 <Button
                android:id="@+id/login_button"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:layout_weight="1"
                android:paddingTop="10dp"
                android:paddingBottom="10dp"
                android:background="@drawable/ripple_effect"/>

build.gradle

   compile 'com.android.support:appcompat-v7:23.1.1'

【讨论】：

这确实有效，尽管矩形不再可见
这行得通！而且，当然，您必须记住，波纹本身使用可绘制形状作为蒙版。因此，要同时显示波纹和形状，一个可以进入背景，另一个进入前景属性。
当我从 item 中删除 android:id="@android:id/mask" 时，这对我有用
工作谢谢..这应该是正确的答案。

【解决方案3】：

更简单的解决方案 - 将此 drawable-xml 用作 Button 的属性“android:background”的值：

drawable/bkg_ripple.xml：

<?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"/>
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="#000000" />
        </shape>
    </item>
</ripple>

button.xml：

<Button
    android:id="@+id/mybutton"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    ...
    android:background="@drawable/bkg_ripple"
/>

【讨论】：

【解决方案4】：

我有类似的任务。让我解释一下我是如何解决的。它输出带有阴影和波纹效果的圆形 imageViews 不会超出圆形边界。

<ImageView
    android:id="@+id/iv_undo"
    android:layout_width="@dimen/iv_width_altmenu"
    android:layout_height="@dimen/iv_height_altmenu"
    android:src="@drawable/undo"
    android:elevation="@dimen/elevation_buttons"
    android:foreground="@drawable/ripple_effect"
    android:background="@drawable/buttons_inactive_coloring"
   />

以下提供连锁反应：

android:foreground="@drawable/ripple_effect"

以下提供圆形imageView。

android:background="@drawable/buttons_inactive_coloring"

以下提供阴影：

android:foreground="@drawable/ripple_effect"

您可能面临的另一个问题是涟漪效应超出了圆圈边界。为了解决，使用以下文件（ripple_effect.xml）

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="@color/button_active"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask">
        <shape android:shape="oval">
            <solid android:color="@color/button_active" />
        </shape>
    </item>
</ripple>

如果您不使用以下内容：

<item android:id="@android:id/mask">
        <shape android:shape="oval">
            <solid android:color="@color/button_active" />
        </shape>
    </item>

涟漪效应超出了圆圈边界，这看起来不太好。小心点，放轻松。

【讨论】：

【解决方案5】：

对我有用 drawable/rect.xml

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

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/listview_background_shape">
    <stroke android:width="1dp" android:color="#FF4C71F5" />
    <padding android:left="0dp"
        android:top="0dp"
        android:right="0dp"
        android:bottom="0dp" />
    <corners android:radius="5dp" />
    <solid android:color="#00000000" />

</shape>

对于波纹 drawable/rip.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:id="@+id/nm"
                android:layout_width="80dp"
                android:layout_height="40dp"
                android:layout_weight="1"
                android:background="@drawable/rect"
                android:enabled="true"
                android:text="@string/vnm"
                android:textColor="@color/colorpr"
                android:textStyle="bold"
                android:foreground="@drawable/rip"/>

希望有帮助！！！

【讨论】：

【解决方案6】：

这对我有用..

<?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/smooth_white"
    tools:targetApi="lollipop">
    <item android:drawable="@drawable/button_green_background" />
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/smooth_white" />
        </shape>
    </item>
</ripple>

重点是部分

<item android:drawable="@drawable/button_green_background" />

【讨论】：

除非您的按钮形状与遮罩形状不同，否则使用相同的@drawable/button_green_background 作为背景和遮罩会更干净。

【解决方案7】：

试试这个：

card_back.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item>
            <shape android:shape="rectangle">
                <corners android:radius="20dp" />
                <solid android:color="?attr/cardBGColor" />
                <stroke android:width="1dp" android:color="?attr/borderColor"/>    
            </shape>
        </item>
</selector>

card_ripple.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#bbb">
    <item android:drawable="@drawable/card_back" />
</ripple>

设置 android:background="@drawable/card_ripple"

【讨论】：

【解决方案8】：

快速解决

    <?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/blue"
    tools:targetApi="lollipop">
    <item
        android:id="@android:id/mask"
        tools:targetApi="lollipop">
        <shape android:shape="rectangle">
            <solid android:color="@color/blue" />
            <corners android:radius="5dp" />
        </shape>
    </item>

    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <stroke
                android:width="0.1dp"
                android:color="#312D2D" />
            <solid android:color="#FFF" />
            <corners android:radius="50dp" />
            <padding
                android:bottom="5dp"
                android:left="5dp"
                android:right="5dp"
                android:top="5dp" />
        </shape>
    </item>
</ripple>

【讨论】：

【解决方案9】：

这会有所帮助

<com.abcd.ripplebutton.widget.RippleButton
        android:id="@+id/Summit"
        android:layout_width="260dp"
        android:layout_height="50dp"
        android:text="Login"
        android:textColor="@color/white"
        android:textStyle="bold"
        app:buttonColor="@color/Button"
        app:rippleColor="@color/white" />

更多信息请见this

【讨论】：

【解决方案10】：

对我来说只有这个工作

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#cccccc">
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white" />
        </shape>
    </item>
</ripple>

在布局中

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clickable="true"
    android:background="@drawable/ripple_white"/>

是的，它应该是可点击的

【讨论】：