AppCompat でカラーの Raised Button を設定する正しい方法

http://www.google.com/design/spec/components/buttons.html#buttons-flat-raised-buttons

まとめ

• ボタンの文字は android:textAppearanceButton（文字サイズは 14sp、文字色は textColorPrimary）
• ボタンの色は colorButtonNormal
  • 4以下にも適用される
  • テーマ直下の属性なので、全部のボタンに適用されてしまうのが難点

1. 背景が Light でボタンのテキストが Dark

view plainprint?

1. <style name="AppTheme" parent="Theme.AppCompat.Light">  
2.     <item name="colorButtonNormal">#2196F3</item>  
3. </style>  

<style name="AppTheme" parent="Theme.AppCompat.Light"> <item name="colorButtonNormal">#2196F3</item> </style>

2. 背景が Light でボタンのテキストが Dark（Disabled 時はグレー）

view plainprint?

1. <style name="AppTheme" parent="Theme.AppCompat.Light">  
2.     <item name="colorButtonNormal">@color/button_color</item>  
3. </style>  

<style name="AppTheme" parent="Theme.AppCompat.Light"> <item name="colorButtonNormal">@color/button_color</item> </style> res/color/button_color.xml

view plainprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <item android:color="#1E000000" android:state_enabled="false" />  
4.     <item android:color="#2196F3" />  
5. </selector>  

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:color="#1E000000" android:state_enabled="false" /> <item android:color="#2196F3" /> </selector>

3. 背景が Dark でボタンのテキストが Light

view plainprint?

1. <style name="AppTheme" parent="Theme.AppCompat">  
2.     <item name="colorButtonNormal">#2196F3</item>  
3. </style>  

<style name="AppTheme" parent="Theme.AppCompat"> <item name="colorButtonNormal">#2196F3</item> </style>

4. 背景が Dark でボタンのテキストが Light（Disabled 時はグレー）

view plainprint?

1. <style name="AppTheme" parent="Theme.AppCompat">  
2.     <item name="colorButtonNormal">@color/button_color</item>  
3. </style>  

<style name="AppTheme" parent="Theme.AppCompat"> <item name="colorButtonNormal">@color/button_color</item> </style> res/color/button_color.xml

view plainprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <item android:color="#1EFFFFFF" android:state_enabled="false" />  
4.     <item android:color="#2196F3" />  
5. </selector>  

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:color="#1EFFFFFF" android:state_enabled="false" /> <item android:color="#2196F3" /> </selector>

5. 背景が Light でボタンのテキストが Light

view plainprint?

1. <style name="AppTheme" parent="Theme.AppCompat.Light">  
2.     <item name="colorButtonNormal">#2196F3</item>  
3.     <item name="android:textAppearanceButton">@style/TextAppearance.Button</item>  
4. </style>  
5.   
6. <style name="TextAppearance.Button" parent="Base.TextAppearance.AppCompat.Button">  
7.     <item name="android:textColor">?android:attr/textColorPrimaryInverse</item>  
8. </style>  

<style name="AppTheme" parent="Theme.AppCompat.Light"> <item name="colorButtonNormal">#2196F3</item> <item name="android:textAppearanceButton">@style/TextAppearance.Button</item> </style> <style name="TextAppearance.Button" parent="Base.TextAppearance.AppCompat.Button"> <item name="android:textColor">?android:attr/textColorPrimaryInverse</item> </style>

6. 背景が Light でボタンのテキストが Light（Disabled 時はグレー）

view plainprint?

1. <style name="AppTheme" parent="Theme.AppCompat.Light">  
2.     <item name="colorButtonNormal">@color/button_color</item>  
3.     <item name="android:textAppearanceButton">@style/TextAppearance.Button</item>  
4. </style>  
5.   
6. <style name="TextAppearance.Button" parent="Base.TextAppearance.AppCompat.Button">  
7.     <item name="android:textColor">?android:attr/textColorPrimaryInverse</item>  
8. </style>  

<style name="AppTheme" parent="Theme.AppCompat.Light"> <item name="colorButtonNormal">@color/button_color</item> <item name="android:textAppearanceButton">@style/TextAppearance.Button</item> </style> <style name="TextAppearance.Button" parent="Base.TextAppearance.AppCompat.Button"> <item name="android:textColor">?android:attr/textColorPrimaryInverse</item> </style> res/color/button_color.xml

view plainprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <item android:color="#1E000000" android:state_enabled="false" />  
4.     <item android:color="#2196F3" />  
5. </selector>  

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:color="#1E000000" android:state_enabled="false" /> <item android:color="#2196F3" /> </selector>

7. 背景が Light でボタンのテキストが Light（Disabled 時は文字もグレー）

view plainprint?

1. <style name="AppTheme" parent="Theme.AppCompat.Light">  
2.     <item name="colorButtonNormal">@color/button_color</item>  
3.     <item name="android:textAppearanceButton">@style/TextAppearance.Button</item>  
4. </style>  
5.   
6. <style name="TextAppearance.Button" parent="Base.TextAppearance.AppCompat.Button">  
7.     <item name="android:textColor">@color/button_text_color</item>  
8. </style>  

<style name="AppTheme" parent="Theme.AppCompat.Light"> <item name="colorButtonNormal">@color/button_color</item> <item name="android:textAppearanceButton">@style/TextAppearance.Button</item> </style> <style name="TextAppearance.Button" parent="Base.TextAppearance.AppCompat.Button"> <item name="android:textColor">@color/button_text_color</item> </style> res/color/button_color.xml

view plainprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <item android:color="#1E000000" android:state_enabled="false" />  
4.     <item android:color="#2196F3" />  
5. </selector>  

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:color="#1E000000" android:state_enabled="false" /> <item android:color="#2196F3" /> </selector> res/color/button_text_color.xml

view plainprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <item android:color="@color/primary_text_disabled_material_light" android:state_enabled="false" />  
4.     <item android:color="@color/primary_text_default_material_dark" />  
5. </selector>  

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:color="@color/primary_text_disabled_material_light" android:state_enabled="false" /> <item android:color="@color/primary_text_default_material_dark" /> </selector>


解説

Widget.AppCompat.Button

values.xml

view plainprint?

1. <style name="Widget.AppCompat.Button" parent="Base.Widget.AppCompat.Button"/>  

<style name="Widget.AppCompat.Button" parent="Base.Widget.AppCompat.Button"/>

Base.Widget.AppCompat.Button

values.xml

view plainprint?

1. <style name="Base.Widget.AppCompat.Button" parent="android:Widget">  
2.     <item name="android:background">@drawable/abc_btn_default_mtrl_shape</item>  
3.     <item name="android:textAppearance">?android:attr/textAppearanceButton</item>  
4.     <item name="android:minHeight">48dip</item>  
5.     <item name="android:minWidth">88dip</item>  
6.     <item name="android:focusable">true</item>  
7.     <item name="android:clickable">true</item>  
8.     <item name="android:gravity">center_vertical|center_horizontal</item>  
9. </style>  

<style name="Base.Widget.AppCompat.Button" parent="android:Widget"> <item name="android:background">@drawable/abc_btn_default_mtrl_shape</item> <item name="android:textAppearance">?android:attr/textAppearanceButton</item> <item name="android:minHeight">48dip</item> <item name="android:minWidth">88dip</item> <item name="android:focusable">true</item> <item name="android:clickable">true</item> <item name="android:gravity">center_vertical|center_horizontal</item> </style> values-v21.xml

view plainprint?

1. <style name="Base.Widget.AppCompat.Button" parent="android:Widget.Material.Button"/>  
2.   
3. <style name="Widget.Material.Button">  
4.     <item name="background">@drawable/btn_default_material</item>  
5.     <item name="textAppearance">?attr/textAppearanceButton</item>  
6.     <item name="minHeight">48dip</item>  
7.     <item name="minWidth">88dip</item>  
8.     <item name="stateListAnimator">@anim/button_state_list_anim_material</item>  
9.     <item name="focusable">true</item>  
10.     <item name="clickable">true</item>  
11.     <item name="gravity">center_vertical|center_horizontal</item>  
12. </style>  

<style name="Base.Widget.AppCompat.Button" parent="android:Widget.Material.Button"/> <style name="Widget.Material.Button"> <item name="background">@drawable/btn_default_material</item> <item name="textAppearance">?attr/textAppearanceButton</item> <item name="minHeight">48dip</item> <item name="minWidth">88dip</item> <item name="stateListAnimator">@anim/button_state_list_anim_material</item> <item name="focusable">true</item> <item name="clickable">true</item> <item name="gravity">center_vertical|center_horizontal</item> </style> これを見ると、ボタンの文字は ?attr/textAppearanceButton を参照していることがわかる


textAppearanceButton

values.xml

view plainprint?

1. <style name="Theme.AppCompat" parent="Base.Theme.AppCompat"/>  
2.   
3. <style name="Base.Theme.AppCompat" parent="Base.V7.Theme.AppCompat">  
4.   
5. <style name="Base.V7.Theme.AppCompat" parent="Platform.AppCompat">  
6.     <item name="android:textAppearanceButton">@style/TextAppearance.AppCompat.Button</item>  
7.     ...  
8. </style>  
9.   
10. <style name="Base.V7.Theme.AppCompat.Light" parent="Platform.AppCompat.Light">  
11.     <item name="android:textAppearanceButton">@style/TextAppearance.AppCompat.Button</item>  
12. </style>  
13.   
14. <style name="TextAppearance.AppCompat.Button" parent="Base.TextAppearance.AppCompat.Button"/>  
15.   
16. <style name="Base.TextAppearance.AppCompat.Button">  
17.     <item name="android:textSize">@dimen/abc_text_size_button_material</item>  
18.     <item name="textAllCaps">true</item>  
19.     <item name="android:textColor">?android:textColorPrimary</item>  
20. </style>  

<style name="Theme.AppCompat" parent="Base.Theme.AppCompat"/> <style name="Base.Theme.AppCompat" parent="Base.V7.Theme.AppCompat"> <style name="Base.V7.Theme.AppCompat" parent="Platform.AppCompat"> <item name="android:textAppearanceButton">@style/TextAppearance.AppCompat.Button</item> ... </style> <style name="Base.V7.Theme.AppCompat.Light" parent="Platform.AppCompat.Light"> <item name="android:textAppearanceButton">@style/TextAppearance.AppCompat.Button</item> </style> <style name="TextAppearance.AppCompat.Button" parent="Base.TextAppearance.AppCompat.Button"/> <style name="Base.TextAppearance.AppCompat.Button"> <item name="android:textSize">@dimen/abc_text_size_button_material</item> <item name="textAllCaps">true</item> <item name="android:textColor">?android:textColorPrimary</item> </style> values-v14.xml

view plainprint?

1. <style name="Base.TextAppearance.AppCompat.Button">  
2.     <item name="android:textSize">@dimen/abc_text_size_button_material</item>  
3.     <item name="android:textAllCaps">true</item>  
4.     <item name="android:textColor">?android:textColorPrimary</item>  
5. </style>  

<style name="Base.TextAppearance.AppCompat.Button"> <item name="android:textSize">@dimen/abc_text_size_button_material</item> <item name="android:textAllCaps">true</item> <item name="android:textColor">?android:textColorPrimary</item> </style> 文字サイズは @dimen/abc_text_size_button_material (=14sp)、文字色は ?attr/textColorPrimary である。

values-v21.xml

view plainprint?

1. <style name="Base.Theme.AppCompat" parent="Base.V21.Theme.AppCompat"/>  
2.   
3. <style name="Base.V21.Theme.AppCompat" parent="Base.V7.Theme.AppCompat">  
4.     ...  
5. </style>  
6.   
7. <style name="Base.TextAppearance.AppCompat.Button" parent="android:TextAppearance.Material.Button"/>  

<style name="Base.Theme.AppCompat" parent="Base.V21.Theme.AppCompat"/> <style name="Base.V21.Theme.AppCompat" parent="Base.V7.Theme.AppCompat"> ... </style> <style name="Base.TextAppearance.AppCompat.Button" parent="android:TextAppearance.Material.Button"/> styles_material.xml

view plainprint?

1. <style name="TextAppearance.Material.Widget.Button" parent="TextAppearance.Material.Button" />  
2.   
3. <style name="TextAppearance.Material.Button">  
4.     <item name="textSize">@dimen/text_size_button_material</item>  
5.     <item name="fontFamily">@string/font_family_button_material</item>  
6.     <item name="textAllCaps">true</item>  
7.     <item name="textColor">?attr/textColorPrimary</item>  
8. </style>  

<style name="TextAppearance.Material.Widget.Button" parent="TextAppearance.Material.Button" /> <style name="TextAppearance.Material.Button"> <item name="textSize">@dimen/text_size_button_material</item> <item name="fontFamily">@string/font_family_button_material</item> <item name="textAllCaps">true</item> <item name="textColor">?attr/textColorPrimary</item> </style> 文字サイズは @dimen/text_size_button_material (=14sp)、文字色は ?attr/textColorPrimary である。


btn_default_material

view plainprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <!-- Copyright (C) 2014 The Android Open Source Project  
3.   
4.      Licensed under the Apache License, Version 2.0 (the "License");  
5.      you may not use this file except in compliance with the License.  
6.      You may obtain a copy of the License at  
7.   
8.           http://www.apache.org/licenses/LICENSE-2.0  
9.   
10.      Unless required by applicable law or agreed to in writing, software  
11.      distributed under the License is distributed on an "AS IS" BASIS,  
12.      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.  
13.      See the License for the specific language governing permissions and  
14.      limitations under the License.  
15. -->  
16.   
17. <ripple xmlns:android="http://schemas.android.com/apk/res/android"  
18.         android:color="?attr/colorControlHighlight">  
19.     <item android:drawable="@drawable/btn_default_mtrl_shape" />  
20. </ripple>  

<?xml version="1.0" encoding="utf-8"?> <!-- Copyright (C) 2014 The Android Open Source Project Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> <ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="?attr/colorControlHighlight"> <item android:drawable="@drawable/btn_default_mtrl_shape" /> </ripple>

btn_default_mtrl_shape

view plainprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <!-- Copyright (C) 2014 The Android Open Source Project  
3.   
4.      Licensed under the Apache License, Version 2.0 (the "License");  
5.      you may not use this file except in compliance with the License.  
6.      You may obtain a copy of the License at  
7.   
8.           http://www.apache.org/licenses/LICENSE-2.0  
9.   
10.      Unless required by applicable law or agreed to in writing, software  
11.      distributed under the License is distributed on an "AS IS" BASIS,  
12.      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.  
13.      See the License for the specific language governing permissions and  
14.      limitations under the License.  
15. -->  
16.   
17. <!-- Used as the canonical button shape. -->  
18.   
19. <inset xmlns:android="http://schemas.android.com/apk/res/android"  
20.        android:insetLeft="@dimen/button_inset_horizontal_material"  
21.        android:insetTop="@dimen/button_inset_vertical_material"  
22.        android:insetRight="@dimen/button_inset_horizontal_material"  
23.        android:insetBottom="@dimen/button_inset_vertical_material">  
24.     <shape android:shape="rectangle">  
25.         <corners android:radius="@dimen/control_corner_material" />  
26.         <solid android:color="?attr/colorButtonNormal" />  
27.         <padding android:left="@dimen/button_padding_horizontal_material"  
28.                  android:top="@dimen/button_padding_vertical_material"  
29.                  android:right="@dimen/button_padding_horizontal_material"  
30.                  android:bottom="@dimen/button_padding_vertical_material" />  
31.     </shape>  
32. </inset>  

<?xml version="1.0" encoding="utf-8"?> <!-- Copyright (C) 2014 The Android Open Source Project Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> <!-- Used as the canonical button shape. --> <inset xmlns:android="http://schemas.android.com/apk/res/android" android:insetLeft="@dimen/button_inset_horizontal_material" android:insetTop="@dimen/button_inset_vertical_material" android:insetRight="@dimen/button_inset_horizontal_material" android:insetBottom="@dimen/button_inset_vertical_material"> <shape android:shape="rectangle"> <corners android:radius="@dimen/control_corner_material" /> <solid android:color="?attr/colorButtonNormal" /> <padding android:left="@dimen/button_padding_horizontal_material" android:top="@dimen/button_padding_vertical_material" android:right="@dimen/button_padding_horizontal_material" android:bottom="@dimen/button_padding_vertical_material" /> </shape> </inset> これを見ると ?attr/colorButtonNormal が solid の color に指定されていることがわかる