对形状可绘制的涟漪效应

时间：2015-12-24 22:37:51

标签： android xml android-5.0-lollipop

尝试在这里做一些非常简单的事情，并查找了一堆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>
drawable-v21文件夹中的

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="@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"


 />

这里有什么问题。 谢谢！

10 个答案:

答案 0 :(得分：18)

我的建议是不要使用ActorA标签。我有两个原因：要做到你想要的并不容易，每个背景都需要2个不同的<ripple个文件。我不喜欢.xml个文件夹。

我的解决方案是将drawable-v21与Button一起打包并使用FrameLayout属性。这样你可以拥有你想要的任何背景，你可以保持涟漪效果。 

android:foreground

请注意，我已将所有属性和ID移至<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> 。您应该将FrameLayout设置为onClickListener而不是FrameLayout。

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

答案 1 :(得分：12)

试试这个。

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'

答案 2 :(得分：3)

对我有用 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"/>
希望这有帮助!!!

答案 3 :(得分：2)

这项工作对我来说.. 

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

答案 4 :(得分：2)

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

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

以下提供了circle 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 :(得分：1)

更简单的解决方案-使用此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"
/>

答案 6 :(得分：1)

尝试一下：

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"

答案 7 :(得分：0)

这将有助于

<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

答案 8 :(得分：0)

快速解决方案

    <?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" />
            <!--<gradient
                android:angle="90"
                android:endColor="@color/blue"
                android:startColor="@color/colorPrimary"
                android:type="linear" />-->
        </shape>
    </item>
</ripple>

答案 9 :(得分：0)

仅对我而言这项工作

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

是的，它应该可以点击

相关问题
最新问题