web-dev-qa-db-ja.com

Ripple、colorPrimary、またはcolorAccentの色は何ですか? (材料設計)

Material Design Guidelines を読んでいますが、Rippleが黒でない(アルファ付き)場合、Rippleの色はどうあるべきかわかりません。

たとえば、colorPrimary = blue、colorAccent = redのアプリがあります。実際には、colorAccent(アルファ付き)を使用していますが、リップルと黒の異なる色が必要な場合は、colorPrimary(アルファ付き)を使用する必要がありますか?

Googleのすべてのアプリをチェックしましたが、色付きの波紋は使用しません。

私が今持っているような画像:

ripple

43

色付きの波紋には26%のアルファを使用します。

Android Lは、カラー状態リストおよび<ripple>要素にはアルファチャンネルはありませんが、境界のあるリップルについては次のようなことができます。

<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%のアルファバージョンを定義するか、カラー状態リストを使用できます。これらのいずれかは、無制限のリップルに対して正常に機能します。

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

res/values/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>
52
alanv

探しているものは次のとおりです。

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
   ...
   <item name="colorControlHighlight">@color/ripple_material_dark</item>
   ...
</style>
37
i.shadrin

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 which デフォルト#40ffffffまたは#400000 (それぞれ暗いテーマと明るいテーマの場合) タッチフィードバックガイド に記載されています。

お気づきのように、リップルはタッチフィードバックの微妙な指標として使用されるため、デフォルトでcolorPrimaryまたはcolorAccentを使用しないのはなぜですか。これは、Android 4.4(KitKat))で行われた変更と一致しており、デフォルトでデフォルトのセレクターカラーをニュートラルにしました。

29
ianhanniballake

これは、Roman NurikがTwitterでこの質問に答えたものです。

ローマン・ヌリック
@ romannurik

@dahnark @romainguyそれは状況によって異なりますが、めったにアクセントカラーを使いたくありません。私は一般的に中立またはプライマリで言うだろう

ripple color

13

参考までに、これらはAppCompatで定義されている色です。

<color name="ripple_material_dark">#33ffffff</color>
<color name="ripple_material_light">#1f000000</color>`
4