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 時の色は最終的に以下になります。

view plainprint?

1. <color name="secondary_text_default_material_dark">#b3ffffff</color>  
2. <color name="secondary_text_default_material_light">#8a000000</color>  

#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

view plainprint?

1. <inset xmlns:android="http://schemas.android.com/apk/res/android"  
2.         android:inset="@dimen/control_inset_material">  
3.     <ripple android:color="?attr/colorControlActivated">  
4.         <item>  
5.             <selector>  
6.                 <item android:state_enabled="false">  
7.                     <nine-patch android:src="@drawable/textfield_default_mtrl_alpha"  
8.                         android:tint="?attr/colorControlNormal"  
9.                         android:alpha="?attr/disabledAlpha" />  
10.                 </item>  
11.                 <item>  
12.                     <nine-patch android:src="@drawable/textfield_default_mtrl_alpha"  
13.                         android:tint="?attr/colorControlNormal" />  
14.                 </item>  
15.             </selector>  
16.         </item>  
17.         <item android:id="@+id/mask" android:drawable="@drawable/textfield_activated_mtrl_alpha" />  
18.     </ripple>  
19. </inset>  

<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

view plainprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <inset xmlns:android="http://schemas.android.com/apk/res/android"  
3.         android:inset="@dimen/control_inset_material">  
4.     <ripple android:color="?attr/colorControlActivated">  
5.         <item>  
6.             <selector>  
7.                 <item android:state_enabled="false">  
8.                     <nine-patch android:src="@drawable/abc_textfield_default_mtrl_alpha"  
9.                         android:tint="?attr/colorEditTextNormal"  
10.                         android:alpha="?android:attr/disabledAlpha" />  
11.                 </item>  
12.                 <item>  
13.                     <nine-patch android:src="@drawable/abc_textfield_default_mtrl_alpha"  
14.                         android:tint="?attr/colorEditTextNormal" />  
15.                 </item>  
16.             </selector>  
17.         </item>  
18.         <item android:id="@android:id/mask" android:drawable="@drawable/abc_textfield_activated_mtrl_alpha" />  
19.     </ripple>  
20. </inset>  

<?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

view plainprint?

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

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

view plainprint?

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

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