64

我已经阅读了材料设计指南,但我不知道如果波纹不是黑色(带有 alpha),它应该是什么颜色。

例如,我有一个 colorPrimary = blue 和 colorAccent = red 的应用程序。实际上我正在使用 colorAccent(带 alpha),如果我想要与波纹不同的黑色颜色,我应该使用 colorPrimary(带 alpha)吗?

我检查了谷歌的所有应用程序,但他们从不使用带颜色的涟漪。

像我现在这样的图像:

波纹

4

5 回答 5

71

对彩色波纹使用 26% 的 alpha。

Android L 不支持颜色状态列表中的主题属性,并且<ripple>元素没有 alpha 通道,但对于有界波纹,您可以执行以下操作:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="?android:attr/colorAccent">
    <item android:id="@android:id/mask">
        <color android:color="#42ffffff" />
    </item>
</ripple>

这不适用于无限的涟漪。或者,由于您知道自己的强调色,您可以定义 26% 的 alpha 版本或使用颜色状态列表。这些中的任何一个都可以很好地处理无界的涟漪。

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="@color/accent_26" />

资源/值/colors.xml:

<resources>
    ...
    <color name="accent">#ff33b5e5</color>
    <color name="accent_alpha26">#4233b5e5</color>
</resources>

res/color/accent_alpha26.xml:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/accent"
          android:alpha="0.26" />
</selector>
于 2015-02-12T20:31:57.993 回答
49

这是您要查找的内容:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
   ...
   <item name="colorControlHighlight">@color/ripple_material_dark</item>
   ...
</style>
于 2015-08-10T14:29:09.060 回答
37

Widget.Material.Button样式使用btn_default_material.xml作为其背景:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight">
  <item android:drawable="@drawable/btn_default_mtrl_shape" />
</ripple>

请注意,波纹颜色?attr/colorControlHighlight默认#40ffffff 或 #40000000(分别用于深色和浅色主题),如触摸反馈指南中所述。

正如您所注意到的,涟漪被用于触摸反馈的微妙指示,因此它们为什么不使用colorPrimarycolorAccent默认情况下不使用。这与 Android 4.4 (Kitkat) 中所做的更改一致,默认选择器颜色默认为中性。

于 2015-02-12T19:43:12.477 回答
14

这是 Roman Nurik 在推特上给我的这个问题的回复:

罗曼努里克
@romannurik

@dahnark @romainguy 它因情况而异,但您很少想使用强调色。我会说一般中性或主要

波纹颜色

于 2015-02-12T20:13:56.677 回答
14

作为参考,这些是 AppCompat 中定义的颜色。

<color name="ripple_material_dark">#33ffffff</color>
<color name="ripple_material_light">#1f000000</color>`
于 2018-09-10T08:18:11.893 回答