形状可绘制的涟漪效应

Question

试图在这里做一些非常简单的事情，并查找了一堆 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"


 />

这里有什么问题。谢谢！

Answer 1

试试这个。

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'

Answer 2

这会有所帮助

<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

Answer 3

我的建议是不要使用 <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 颜色替换为灰色。

Answer 4

对我有用 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"/>

希望对您有所帮助！！！

Answer 5

这对我有用..

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

Answer 6

我有类似的任务。让我解释一下我是如何解决它的。它输出带有阴影和波纹效果的圆形 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>

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

Answer 7

更简单的解决方案 - 使用此 drawable-xml 作为按钮的属性 "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"
/>

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

Answer 9

我只有这个作品

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

是的，应该可以点击

Answer 10

试试这个：

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"

形状可绘制的涟漪效应

Ripple effect on shape drawable

xml

android

android-5.0-lollipop