2015年1月13日火曜日

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% でした。


0 件のコメント:

コメントを投稿