使用按钮背景颜色为我的按钮添加波纹效果?
Add ripple effect to my button with button background color?
我创建了一个按钮,我想为该按钮添加涟漪效果!
我创建了一个按钮 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 的不同博客中找到了一些这段代码,但仍然无法正常工作!
将波纹 Effect/Animation 添加到 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 按钮添加波纹 Effect/Animation 的另一种方法
使用此方法,您可以自定义波纹效果颜色。首先,您必须在可绘制资源目录中创建一个 xml 文件。创建一个 ripple_effect.xml 文件并添加以下代码。
res/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="#f816a463"
tools:targetApi="lollipop">
<item android:id="@android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#f816a463" />
</shape>
</item>
</ripple>
并将按钮的背景设置为上面的drawable资源文件
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/ripple_effect"
android:padding="16dp"
android:text="New Button" />
当您使用 android:background 时,您正在用空白颜色替换按钮的大部分样式和外观。
更新:从 AppCompat 23.0.0 版开始,有一个新的 Widget.AppCompat.Button.A 彩色样式,它使用主题的 colorButtonNormal 作为禁用颜色,使用 colorAccent 作为启用颜色。
这允许您直接通过
将它应用到您的按钮
<Button
...
style="@style/Widget.AppCompat.Button.Colored" />
您可以使用 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="?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>
除了 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"
将 "?attr/selectableItemBackground"
添加到视图的 android:foreground
属性(如果它已经具有背景以及 android:clickable="true"
)。
只需使用:
android:backgroundTint="#f816a463"
而不是:
android:background="#f816a463"
别忘了将您的 Button
更改为 android.support.v7.widget.AppCompatButton
当按钮有来自 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"
参考如下link
https://jascode.wordpress.com/2017/11/11/how-to-add-ripple-effect-to-an-android-app/
这是另一个可绘制对象 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" />
PS:此答案适用于 android api 21 岁及以上。
除了 Sudheesh R
Add Ripple Effect/Animation to a Android Button with button rectangle shape with corner
Create xml file 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>
试试这个
<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" />
添加前景和可点击属性对我有用。
<Button
...
android:background="@color/your_color"
android:foreground="?attr/selectableItemBackgroundBorderless"
android:clickable="true" />
AppCompat v7+
If you don't prefix with ?android:
your app will crash.
您应该根据自己的喜好使用 "?android:attr/selectableItemBackground"
或 "?android:attr/selectableItemBackgroundBorderless"
。我更喜欢 Borderless
.
您可以将其放在 android:background
或 android: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"
/>
以编程方式(Java)
TypedValue value = new TypedValue();
context.getTheme().resolveAttribute(android.R.attr.selectableItemBackground, value, true);
myView.setBackgroundResource(value.resourceId);
myView.setFocusable(true); // If needed for view type
以编程方式 (Kotlin)
val value = TypedValue()
context.theme.resolveAttribute(android.R.attr.selectableItemBackground, value, true)
myView.setBackgroundResource(value.resourceId)
myView.setFocusable(true) // If needed for view type
可复用的 Kotlin 扩展函数
myView.ripple()
fun View.ripple(): View {
val value = TypedValue()
context.theme.resolveAttribute(android.R.attr.selectableItemBackground, value, true)
setBackgroundResource(value.resourceId)
isFocusable = true // Required for some view types
return this
}
使用 <ripple>
标签的替代解决方案(我个人不喜欢这样做,因为颜色不是 "default"),如下所示:
为按钮背景创建一个可绘制对象,并在 <layer-list>
中包含 <item android:drawable="?attr/selectableItemBackground">
然后(我认为这是重要的部分)以编程方式在您的按钮实例上设置 backgroundResource(R.drawable.custom_button)
。
Activity/Fragment
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>
一个简单的方法是设置视图主题,如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>
setForeground
添加到API级别23。利用 RevealAnimator
的力量,以防您需要中继 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" />
With kotlin ext function, it's way osm !
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
}
}
我创建了一个按钮,我想为该按钮添加涟漪效果!
我创建了一个按钮 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 的不同博客中找到了一些这段代码,但仍然无法正常工作!
将波纹 Effect/Animation 添加到 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 按钮添加波纹 Effect/Animation 的另一种方法
使用此方法,您可以自定义波纹效果颜色。首先,您必须在可绘制资源目录中创建一个 xml 文件。创建一个 ripple_effect.xml 文件并添加以下代码。 res/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="#f816a463"
tools:targetApi="lollipop">
<item android:id="@android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#f816a463" />
</shape>
</item>
</ripple>
并将按钮的背景设置为上面的drawable资源文件
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/ripple_effect"
android:padding="16dp"
android:text="New Button" />
当您使用 android:background 时,您正在用空白颜色替换按钮的大部分样式和外观。
更新:从 AppCompat 23.0.0 版开始,有一个新的 Widget.AppCompat.Button.A 彩色样式,它使用主题的 colorButtonNormal 作为禁用颜色,使用 colorAccent 作为启用颜色。
这允许您直接通过
将它应用到您的按钮<Button
...
style="@style/Widget.AppCompat.Button.Colored" />
您可以使用 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="?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>
除了 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"
将 "?attr/selectableItemBackground"
添加到视图的 android:foreground
属性(如果它已经具有背景以及 android:clickable="true"
)。
只需使用:
android:backgroundTint="#f816a463"
而不是:
android:background="#f816a463"
别忘了将您的 Button
更改为 android.support.v7.widget.AppCompatButton
当按钮有来自 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"
参考如下link https://jascode.wordpress.com/2017/11/11/how-to-add-ripple-effect-to-an-android-app/
这是另一个可绘制对象 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" />
PS:此答案适用于 android api 21 岁及以上。
除了 Sudheesh R
Add Ripple Effect/Animation to a Android Button with button rectangle shape with corner
Create xml file 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>
试试这个
<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" />
添加前景和可点击属性对我有用。
<Button
...
android:background="@color/your_color"
android:foreground="?attr/selectableItemBackgroundBorderless"
android:clickable="true" />
AppCompat v7+
If you don't prefix with
?android:
your app will crash.
您应该根据自己的喜好使用 "?android:attr/selectableItemBackground"
或 "?android:attr/selectableItemBackgroundBorderless"
。我更喜欢 Borderless
.
您可以将其放在 android:background
或 android: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"
/>
以编程方式(Java)
TypedValue value = new TypedValue();
context.getTheme().resolveAttribute(android.R.attr.selectableItemBackground, value, true);
myView.setBackgroundResource(value.resourceId);
myView.setFocusable(true); // If needed for view type
以编程方式 (Kotlin)
val value = TypedValue()
context.theme.resolveAttribute(android.R.attr.selectableItemBackground, value, true)
myView.setBackgroundResource(value.resourceId)
myView.setFocusable(true) // If needed for view type
可复用的 Kotlin 扩展函数
myView.ripple()
fun View.ripple(): View {
val value = TypedValue()
context.theme.resolveAttribute(android.R.attr.selectableItemBackground, value, true)
setBackgroundResource(value.resourceId)
isFocusable = true // Required for some view types
return this
}
使用 <ripple>
标签的替代解决方案(我个人不喜欢这样做,因为颜色不是 "default"),如下所示:
为按钮背景创建一个可绘制对象,并在 <layer-list>
<item android:drawable="?attr/selectableItemBackground">
然后(我认为这是重要的部分)以编程方式在您的按钮实例上设置 backgroundResource(R.drawable.custom_button)
。
Activity/Fragment
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>
一个简单的方法是设置视图主题,如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>
setForeground
添加到API级别23。利用 RevealAnimator
的力量,以防您需要中继 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" />
With kotlin ext function, it's way osm !
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
}
}