具有背景颜色和波纹效果的 Android 按钮答案

【问题标题】：Android Button With Background Color And Ripple Effect具有背景颜色和波纹效果的 Android 按钮
【发布时间】：2016-05-13 07:04:13
【问题描述】：

我有一个 android 按钮，我想给它一个背景颜色和涟漪效果

我的波纹 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="#BDA0CB"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="#BDA0CB" />
        </shape>
    </item>
</ripple>

我的按钮是

 <Button android:id="@+id/Button_activity_login_ViewProfile" style="?android:textAppearanceSmall"
        android:layout_width="fill_parent" android:layout_height="wrap_content"
        android:layout_marginTop="16dp" android:text="Save"
        android:textStyle="bold"
        android:layout_marginLeft="@dimen/margin_left"
        android:layout_marginRight="@dimen/margin_right"
        android:textColor="#ffffffff"
        android:fontFamily="sans-serif"
        android:background="#ff7e51c2" />

为了产生涟漪效果，我必须移除背景颜色...有什么方法可以同时保留。

【问题讨论】：

github.com/traex/RippleEffect

标签： android background ripple

【解决方案1】：

这可以通过在你的ripple.xml中添加android:drawable来实现。

首先将此添加到您的 color.xml。假设 #ff7e51c2 是您希望按钮的背景颜色。

...
<color name="btn_bg_color">#ff7e51c2</color>
....

然后为按钮背景创建一个drawable（/drawable/btn_bg.xml）：

<?xml version="1.0" encoding="utf-8"?><shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners android:radius="2dp" />
<solid
    android:color="@color/btn_bg_color" />
</shape>

然后在你的ripple.xml中使用drawable：

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

【讨论】：

【解决方案2】：

你可以在xml做这样的事情：

<Button
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background="@drawable/ripple"/>

如下更改drawable/文件夹中的ripple.xml：

<ripple xmlns:android="http://schemas.android.com/apk/res/android" 
                  android:color="?android:colorControlHighlight">
    <item android:id="@android:id/mask">
        <shape android:shape="oval">
            <solid android:color="?android:colorAccent" />
        </shape>
    </item>

【讨论】：

【解决方案3】：

在你的drawable文件夹中创建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="#1182bc"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="#1182bc" />
        </shape>
    </item>
</ripple>

使用这个 xml 作为视图的背景，如下所示

android:background="@drawable/ripple_effect"

希望这会有所帮助..

【讨论】：

【解决方案4】：

创建两个不同版本的 xml 文件，以便它可以在 Pre Lollipop 设备上运行。

drawable/button_effect.xml :-

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
  <solid android:color="#3ab5d6"/>
  <corners android:radius="3dp"/>
</shape>

drawable-v21/button_effect.xml:-

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:tools="http://schemas.android.com/tools"
    android:color="#635a5a"
    xmlns:android="http://schemas.android.com/apk/res/android"
    tools:targetApi="lollipop">
    <item android:drawable="@drawable/round_button" />
</ripple>

在drawable文件夹中创建有形的drawable

drawable/round_button.xml :-

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#3ab5d6"/>
    <corners android:radius="3dp"/>
</shape>

你可以在 layout.xml 中做这样的事情：

<Button
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background="@drawable/button_effect"/>

【讨论】：