2015年1月13日火曜日

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