Y.A.M の雑記帳

AppCompat v7 で tint 処理しているクラスとか

メモ

Android 5.0 で EditText の normal 時の色を独自に変える

以前のエントリ「Android 5.0 でのカラーカスタマイズと属性名の関係」で書いたように、EditText の normal 時の線の色は colorControlNormal になります。

colorControlNormal にはデフォルトでは textColorSecondary が指定されており、Theme.Material では @color/secondary_text_material_dark、Theme.Material.Light では @color/secondary_text_material_light になります。
これらの normal 時の色は最終的に以下になります。


    #b3ffffff
    #8a000000

つまり、Theme.Material.Light では線の色は #8a000000 です。

実際にこの色の EditText を配置してみると、Material Design の Components > Text fields で例としてあげられている画像の色より、かなり濃いことがわかります。

colorControlNormal に薄いグレーを指定すれば、EditText の normal 時の色を変えられますが、この属性はさまざまなところで使われており、例えば CheckBox の normal 時の色も薄くなってしまいます。

colorControlNormal ではなく独自に色を指定したい場合、残念ながら用意されている属性値ではできません。 EditText の背景を独自のリソースに変える必要があります。

EditText の 5.0 でのデフォルト背景は次のようになっています。

android:drawable/edit_text_material.xml


<inset xmlns:android="http://schemas.android.com/apk/res/android"
        android:inset="@dimen/control_inset_material">
    <ripple android:color="?attr/colorControlActivated">
        <item>
            <selector>
                <item android:state_enabled="false">
                    <nine-patch android:src="@drawable/textfield_default_mtrl_alpha"
                        android:tint="?attr/colorControlNormal"
                        android:alpha="?attr/disabledAlpha" />
                </item>
                <item>
                    <nine-patch android:src="@drawable/textfield_default_mtrl_alpha"
                        android:tint="?attr/colorControlNormal" />
                </item>
            </selector>
        </item>
        <item android:id="@+id/mask" android:drawable="@drawable/textfield_activated_mtrl_alpha" />
    </ripple>
</inset>

これを参考に、AppCompat の画像リソースを利用して次のようにします。

drawable-v21/my_edit_text_material.xml


<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
        android:inset="@dimen/control_inset_material">
    <ripple android:color="?attr/colorControlActivated">
        <item>
            <selector>
                <item android:state_enabled="false">
                    <nine-patch android:src="@drawable/abc_textfield_default_mtrl_alpha"
                        android:tint="?attr/colorEditTextNormal"
                        android:alpha="?android:attr/disabledAlpha" />
                </item>
                <item>
                    <nine-patch android:src="@drawable/abc_textfield_default_mtrl_alpha"
                        android:tint="?attr/colorEditTextNormal" />
                </item>
            </selector>
        </item>
        <item android:id="@android:id/mask" android:drawable="@drawable/abc_textfield_activated_mtrl_alpha" />
    </ripple>
</inset>

ここでは、?attr/colorControlNormal の代わりに ?attr/colorEditTextNormal を指定しています。

values/attr.xml


<?xml version="1.0" encoding="utf-8"?>
<resources>
    <attr name="colorEditTextNormal" format="color|reference" />
</resources>

values-v21/styles.xml


<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="editTextBackground">@drawable/my_edit_text_material</item>
        <item name="colorEditTextNormal">#1f000000</item>
    </style>
</resources>

Material Design の Resources > Sticker sheets & icons で配布されている stickersheet_general.ai では、EditText の色は divider と同じ #000000 の alpha 12% でした。

Android 5.0 でのカラーカスタマイズと属性名の関係

CheckBox

normal : colorControlNormal
checked: colorControlActivated

btn_check_material_anim.xml

RadioButton

normal : colorControlNormal
checked: colorControlActivated

btn_radio_material_anim.xml

Switch

thumb

normal : colorSwitchThumbNormal
checked: colorControlActivated

switch_thumb_material_anim.xml

track

normal : colorForeground, alpha=0.3
checked: colorControlActivated, alpha=0.3

switch_track_material.xml

RatingBar

normal : colorControlNormal
pressed: colorControlActivated

ratingbar_full_empty_material.xml
ratingbar_full_filled_material.xml

EditText

normal : colorControlNormal
focused: colorControlActivated

edit_text_material.xml

Text選択

ハンドル : colorControlActivated
カーソル : colorControlActivated

text_cursor_material.xml
text_select_handle_left_material.xml
text_select_handle_middle_material.xml
text_select_handle_right_material.xml

Button

ベース

normal : colorButtonNormal
pressed : colorControlHighlight

btn_default_material.xml
btn_borderless_material.xml

ToggleButton

ベース

normal : colorButtonNormal
pressed : colorControlHighlight

インディケータ

normal : colorControlNormal
checked: colorControlActivated

btn_toggle_material.xml

ProgressBar

くるくる : colorControlActivated

vector_drawable_progress_indeterminate_horizontal.xml

Horizontal

ベース : colorControlNormal, alpha=disabledAlpha
Progress : colorControlActivated
SecondaryProgress : colorControlActivated, alpha=disabledAlpha

progress_horizontal_material.xml

SeekBar

ベース : colorControlNormal
Progress : colorControlActivated
取手 : colorControlActivated

scrubber_control_selector_material.xml
scrubber_control_material_anim.xml
scrubber_progress_horizontal_material.xml

Spinner

normal : colorControlNormal
pressed : colorControlActivated
checked : colorControlActivated

spinner_background_material.xml

ScrollBar

handle : colorControlNormal

scrollbar_handle_material.xml

FastScroll

thumb

normal : colorControlNormal
pressed : colorControlActivated

fastscroll_thumb_material.xml

track

常時 : colorControlNormal

fastscroll_track_material.xml

TimePicker のヘッダー

normal : colorAccent
pressed: colorControlHighlight

time_picker_header_material.xml

ExpandableListView

expander : colorControlNormal

expander_group_material.xml

selectableItemBackground

pressed: colorControlHighlight

item_background_material.xml
item_background_borderless_material.xml

■ 参考


    <style name="Theme.Material">
        ...

        <!-- Color palette -->
        <item name="colorPrimaryDark">@color/primary_dark_material_dark</item>
        <item name="colorPrimary">@color/primary_material_dark</item>
        <item name="colorAccent">@color/accent_material_dark</item>
        <item name="colorEdgeEffect">?attr/colorPrimary</item>

        <item name="colorControlNormal">?attr/textColorSecondary</item>
        <item name="colorControlActivated">?attr/colorAccent</item>

        <item name="colorControlHighlight">@color/ripple_material_dark</item>
        <item name="colorButtonNormal">@color/btn_default_material_dark</item>
        <item name="colorSwitchThumbNormal">@color/switch_thumb_material_dark</item>
    </style>

    <style name="Theme.Material.Light" parent="Theme.Light">
        ...

        <!-- Color palette -->
        <item name="colorPrimaryDark">@color/primary_dark_material_light</item>
        <item name="colorPrimary">@color/primary_material_light</item>
        <item name="colorAccent">@color/accent_material_light</item>

        <item name="colorControlNormal">?attr/textColorSecondary</item>
        <item name="colorControlActivated">?attr/colorAccent</item>

        <item name="colorControlHighlight">@color/ripple_material_light</item>
        <item name="colorButtonNormal">@color/btn_default_material_light</item>
        <item name="colorSwitchThumbNormal">@color/switch_thumb_material_light</item>
    </style>

support/v7/appcompat/src/android/support/v7/internal/widget/TintManager.java
support/v7/appcompat/src/android/support/v7/internal/widget/TintDrawableWrapper.java

Y.A.M の雑記帳

2015年1月13日火曜日

AppCompat v7 で tint 処理しているクラスとか

Android 5.0 で EditText の normal 時の色を独自に変える

Android 5.0 でのカラーカスタマイズと属性名の関係

自己紹介