customizing theme and style for material design : droid kaigi 2016

151

Upload: yuki-anzai

Post on 14-Apr-2017

13.763 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 2: Customizing Theme and Style for Material Design : Droid Kaigi 2016

- -

Page 3: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 4: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 5: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 6: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<Button style="@style/Widget.AppCompat.Button.Small" android:layout_width="wrap_content" android:layout_height="wrap_content" />

Page 7: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<activity android:name=".SampleActivity" android:theme="@style/AppTheme" />

<Button style="@style/Widget.AppCompat.Button.Small" android:layout_width="wrap_content" android:layout_height="wrap_content" />

Page 8: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<EditText android:textColor="#333333" />

<EditText style="@style/MyTextView" />

<style name="MyTextView"> <item name="android:textColor">#333333</item> </style>

<style name="AppTheme" parent="…"> <item name="editTextColor">#333333</item> </style>

Page 9: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<style name="Theme.AppCompat.NoActionBar"> <item name="windowActionBar">false</item> <item name="windowNoTitle">true</item> </style>

<style name=“Theme.AppCompat" parent="Base.Theme.AppCompat"/>

Page 10: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 11: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 12: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 13: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 14: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 15: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 16: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 17: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 18: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 19: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<style name="Theme.AppCompat.DialogWhenLarge" parent="Base.Theme.AppCompat.DialogWhenLarge">

values/values.xml <style name="Base.Theme.AppCompat.DialogWhenLarge" parent="Theme.AppCompat"/>

values-large/values-large.xml <style name="Base.Theme.AppCompat.DialogWhenLarge" parent="Base.Theme.AppCompat.Dialog.FixedSize"/>

Page 20: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<style name="Base.Theme.AppCompat.Dialog.FixedSize"> <item name="windowFixedWidthMajor">@dimen/abc_dialog_fixed_width_major</item> <item name="windowFixedWidthMinor">@dimen/abc_dialog_fixed_width_minor</item> <item name="windowFixedHeightMajor">@dimen/abc_dialog_fixed_height_major</item> <item name="windowFixedHeightMinor">@dimen/abc_dialog_fixed_height_minor</item> </style>

values/values.xml <item name="abc_dialog_fixed_height_major" type="dimen">80%</item> <item name="abc_dialog_fixed_height_minor" type="dimen">100%</item> <item name="abc_dialog_fixed_width_major" type="dimen">320dp</item> <item name="abc_dialog_fixed_width_minor" type="dimen">320dp</item>

values-large/values-large.xml <item name="abc_dialog_fixed_height_major" type="dimen">60%</item> <item name="abc_dialog_fixed_height_minor" type="dimen">90%</item> <item name="abc_dialog_fixed_width_major" type="dimen">60%</item> <item name="abc_dialog_fixed_width_minor" type="dimen">90%</item>

values-xlarge/values-xlarge.xml <item name="abc_dialog_fixed_height_major" type="dimen">60%</item> <item name="abc_dialog_fixed_height_minor" type="dimen">90%</item> <item name="abc_dialog_fixed_width_major" type="dimen">50%</item> <item name="abc_dialog_fixed_width_minor" type="dimen">70%</item>

Page 21: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 22: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 23: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<style name="Theme.DroidKaigi.DialogWhenLarge" parent="Theme.AppCompat.DialogWhenLarge"> <item name="windowActionBar">false</item> <item name="windowNoTitle">true</item> </style>

Page 24: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<style name="Theme.DroidKaigi.DialogWhenLarge" parent="Theme.AppCompat.DialogWhenLarge"> <item name="windowActionBar">false</item> <item name="windowNoTitle">true</item> </style>

Page 25: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 26: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 27: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<!-- 黒系 --><style name="Theme.DroidKaigi" parent="Theme.AppCompat"> </style> <style name="Theme.DroidKaigi.NoActionBar"> <item name="windowActionBar">false</item> <item name="windowNoTitle">true</item> </style> <!-- 白系 --><style name="Theme.DroidKaigi.Light" parent="Theme.AppCompat.Light.DarkActionBar"> </style> <style name="Theme.DroidKaigi.Light.NoActionBar"> <item name="windowActionBar">false</item> <item name="windowNoTitle">true</item> </style>

Page 28: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<!-- 黒系 --><style name="Theme.DroidKaigi" parent="Theme.AppCompat"> </style> <style name="Theme.DroidKaigi.NoActionBar"> <item name="windowActionBar">false</item> <item name="windowNoTitle">true</item> </style> <!-- 白系 --><style name=“Theme.DroidKaigi.Light" parent="Theme.AppCompat.Light.DarkActionBar"> </style> <style name="Theme.DroidKaigi.Light.NoActionBar"> <item name="windowActionBar">false</item> <item name="windowNoTitle">true</item> </style>

Page 29: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 30: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 31: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 32: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 33: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 34: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 35: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 36: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 37: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 39: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 40: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 41: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 42: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 43: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 44: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<!-- textAppearance --><style name="TextAppearance.DroidKaigi.Title" parent="TextAppearance.AppCompat.Title"> <item name="android:textSize">21sp</item> </style> <style name="TextAppearance.DroidKaigi.Title.Inverse" parent="TextAppearance.AppCompat.Title.Inverse"> <item name="android:textSize">21sp</item> </style> <style name="TextAppearance.DroidKaigi.Subhead" parent="TextAppearance.AppCompat.Subhead"> <item name="android:textSize">17sp</item> </style> <style name="TextAppearance.DroidKaigi.Subhead.Inverse" parent="TextAppearance.AppCompat.Subhead.Inverse"> <item name="android:textSize">17sp</item> </style>

Page 45: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<style name="TextAppearance.DroidKaigi.Body2" parent="TextAppearance.AppCompat.Body2"> <item name="android:textSize">15sp</item> </style> <style name="TextAppearance.DroidKaigi.Body1" parent="TextAppearance.AppCompat.Body1"> <item name="android:textSize">15sp</item> </style> <style name="TextAppearance.DroidKaigi.Caption" parent="TextAppearance.AppCompat.Caption"> <item name="android:textSize">13sp</item> </style> <style name="TextAppearance.DroidKaigi.Button" parent="TextAppearance.AppCompat.Button"> <item name="android:textSize">15sp</item> </style>

Page 46: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 47: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 48: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 49: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 50: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 51: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 52: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 53: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 54: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 55: Customizing Theme and Style for Material Design : Droid Kaigi 2016

カスタムビューをつくるときはこれらを継承する

Page 56: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 57: Customizing Theme and Style for Material Design : Droid Kaigi 2016

Button

Page 58: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 59: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 60: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<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> <style name="Base.Widget.AppCompat.Button.Borderless"> <item name="android:background">@drawable/abc_btn_borderless_material</item> </style> <style name="Base.Widget.AppCompat.Button.Borderless.Colored"> <item name="android:textColor">?attr/colorAccent</item> </style> <style name="Base.Widget.AppCompat.Button.Colored"> <item name="android:background">@drawable/abc_btn_colored_material</item> <item name="android:textAppearance">@style/TextAppearance.AppCompat.Widget.Button.Inverse</item> </style> <style name="Base.Widget.AppCompat.Button.Small"> <item name="android:minHeight">48dip</item> <item name="android:minWidth">48dip</item> </style>

Page 61: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 62: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 63: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 64: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<style name="AppTheme.ButtonOverlay"> <item name="colorAccent">#FF4081</item> </style>

<Button style="@style/Widget.AppCompat.Button.Colored" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="b" android:theme="@style/AppTheme.ButtonOverlay" />

Page 65: Customizing Theme and Style for Material Design : Droid Kaigi 2016

CompoundButton

Page 66: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 67: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 68: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<style name="Base.Widget.AppCompat.CompoundButton.CheckBox" parent="android:Widget.CompoundButton.CheckBox"> <item name="android:button">?android:attr/listChoiceIndicatorMultiple</item> <item name="android:background">?attr/controlBackground</item> </style> <style name="Base.Widget.AppCompat.CompoundButton.RadioButton" parent="android:Widget.CompoundButton.RadioButton"> <item name="android:button">?android:attr/listChoiceIndicatorSingle</item> <item name="android:background">?attr/controlBackground</item> </style> <style name="Base.Widget.AppCompat.CompoundButton.Switch" parent="android:Widget.CompoundButton"> <item name="track">@drawable/abc_switch_track_mtrl_alpha</item> <item name="android:thumb">@drawable/abc_switch_thumb_material</item> <item name="switchTextAppearance">@style/TextAppearance.AppCompat.Widget.Switch</item> <item name="android:background">?attr/controlBackground</item> <item name="showText">false</item> <item name="switchPadding">@dimen/abc_switch_padding</item> <item name="android:textOn">@string/abc_capital_on</item> <item name="android:textOff">@string/abc_capital_off</item> </style>

Page 69: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 70: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 71: Customizing Theme and Style for Material Design : Droid Kaigi 2016

TintManager の TINT_CHECKABLE_BUTTON_LIST

Page 72: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<style name="AppTheme" parent="Theme.AppCompat"> <item name="colorControlActivated">#FF4081</item> <item name="colorControlNormal">#3F51B5</item> </style>

Page 73: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 74: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<style name="AppTheme" parent="Theme.AppCompat"> <item name="colorControlActivated">#FF4081</item> <item name="android:colorForeground">#3F51B5</item> <item name="colorSwitchThumbNormal">@color/switch_thumb</item> </style>

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

Page 75: Customizing Theme and Style for Material Design : Droid Kaigi 2016

EditText

Page 76: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 77: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 78: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<style name="Base.V7.Widget.AppCompat.EditText" parent="android:Widget.EditText"> <item name="android:background">?attr/editTextBackground</item> <item name="android:textColor">?attr/editTextColor</item> <item name="android:textAppearance">?android:attr/textAppearanceMediumInverse</item> </style>

Page 79: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 80: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 81: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<style name="AppTheme" parent="Theme.AppCompat"> <item name="colorControlActivated">#FF4081</item> <item name="colorControlNormal">#3F51B5</item> </style>

Page 82: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 83: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 85: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<style name="Theme.DroidKaigi" parent="Theme.AppCompat"> <item name="editTextStyle">@style/Widget.DroidKaigi.EditText</item> <!-- ↑だけで十分だが、プレビューに適用させるにはこれも必要 --> <item name="android:editTextStyle">@style/Widget.DroidKaigi.EditText</item> </style>

<style name="Widget.DroidKaigi.EditText" parent="Widget.AppCompat.EditText"> <item name="android:textAppearance">@style/TextAppearance.DroidKaigi.Widget.EditText</item> </style>

<style name="TextAppearance.DroidKaigi.Widget.EditText" parent="TextAppearance.AppCompat.Medium.Inverse"> <item name="android:textSize">17sp</item> </style>

Page 87: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<style name="Platform.AppCompat" parent="android:Theme"> … <item name="android:textColorHint">@color/hint_foreground_material_dark</item> <item name="android:textColorHintInverse">@color/hint_foreground_material_light</item> … </style>

<color name="hint_foreground_material_dark">@color/bright_foreground_disabled_material_dark</color> <color name="hint_foreground_material_light">@color/bright_foreground_disabled_material_light</color>

<color name="bright_foreground_disabled_material_dark">#80ffffff</color> <color name="bright_foreground_disabled_material_light">#80000000</color>

Page 88: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<style name="Theme.DroidKaigi.Light" parent="..."> <item name="android:textColorHint">#61000000</item> </style>

Page 89: Customizing Theme and Style for Material Design : Droid Kaigi 2016

Spinner

Page 90: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 91: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<style name="Base.Widget.AppCompat.Spinner" parent="Platform.Widget.AppCompat.Spinner"> <item name="android:background">@drawable/abc_spinner_mtrl_am_alpha</item> <item name="android:popupBackground">@drawable/abc_popup_background_mtrl_mult</item> <item name="android:dropDownSelector">?attr/listChoiceBackgroundIndicator</item> <item name="android:dropDownVerticalOffset">0dip</item> <item name="android:dropDownHorizontalOffset">0dip</item> <item name="android:dropDownWidth">wrap_content</item> <item name="android:clickable">true</item> <item name="android:gravity">left|start|center_vertical</item> <item name="overlapAnchor">true</item> </style> <style name="Base.Widget.AppCompat.Spinner.Underlined"> <item name="android:background">@drawable/abc_spinner_textfield_background_material</item> </style> <style name="Base.Widget.AppCompat.TextView.SpinnerItem" parent="android:Widget.TextView.SpinnerItem"> <item name="android:textAppearance">@style/TextAppearance.AppCompat.Widget.TextView.SpinnerItem</item> <item name="android:paddingLeft">8dp</item> <item name="android:paddingRight">8dp</item> </style>

Page 92: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 93: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 94: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 95: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 96: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<resources> <string-array name="android"> <item>Donuts</item> <item>Eclair</item> <item>Froyo</item> </string-array> </resources>

<Spinner android:layout_width="match_parent" android:layout_height="wrap_content" android:entries="@array/android" />

Page 97: Customizing Theme and Style for Material Design : Droid Kaigi 2016

public AbsSpinner(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) { super(context, attrs, defStyleAttr, defStyleRes); initAbsSpinner(); final TypedArray a = context.obtainStyledAttributes( attrs, R.styleable.AbsSpinner, defStyleAttr, defStyleRes); final CharSequence[] entries = a.getTextArray(R.styleable.AbsSpinner_entries); if (entries != null) { final ArrayAdapter<CharSequence> adapter = new ArrayAdapter<CharSequence>( context, R.layout.simple_spinner_item, entries); adapter.setDropDownViewResource(R.layout.simple_spinner_dropdown_item); setAdapter(adapter); } a.recycle();}

Page 98: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<TextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/text1" style="?android:attr/spinnerItemStyle" android:singleLine="true" android:layout_width="match_parent" android:layout_height="wrap_content" android:ellipsize="marquee" android:textAlignment="inherit"/>

<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/text1" style="?android:attr/spinnerDropDownItemStyle" android:singleLine="true" android:layout_width="match_parent" android:layout_height="?android:attr/dropdownListPreferredItemHeight" android:ellipsize="marquee"/>

Page 99: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<TextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/text1" style="?android:attr/spinnerItemStyle" android:singleLine="true" android:layout_width="match_parent" android:layout_height="wrap_content" android:ellipsize="marquee" android:textAlignment="inherit"/>

<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/text1" style="?android:attr/spinnerDropDownItemStyle" android:singleLine="true" android:layout_width="match_parent" android:layout_height="?android:attr/dropdownListPreferredItemHeight" android:ellipsize="marquee"/>

Widget.AppCompat.TextView.SpinnerItem

Page 100: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<TextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/text1" style="?android:attr/spinnerItemStyle" android:singleLine="true" android:layout_width="match_parent" android:layout_height="wrap_content" android:ellipsize="marquee" android:textAlignment="inherit"/>

<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/text1" style="?android:attr/spinnerDropDownItemStyle" android:singleLine="true" android:layout_width="match_parent" android:layout_height="?android:attr/dropdownListPreferredItemHeight" android:ellipsize="marquee"/>

Widget.AppCompat.TextView.SpinnerItem

Widget.AppCompat.ListView.DropDown

Page 101: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<style name="Theme.DroidKaigi" parent="Theme.AppCompat"> <item name="android:spinnerItemStyle">@style/Widget.DroidKaigi.TextView.SpinnerItem</item> </style>

<style name="Widget.DroidKaigi.TextView.SpinnerItem" parent="Widget.AppCompat.TextView.SpinnerItem"> <item name="android:minHeight">?attr/listPreferredItemHeightSmall</item> <item name="android:gravity">center_vertical</item> </style>

Page 102: Customizing Theme and Style for Material Design : Droid Kaigi 2016

SeekBar

Page 103: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 104: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<style name="Base.Widget.AppCompat.SeekBar" parent="android:Widget"> <item name="android:indeterminateOnly">false</item> <item name="android:progressDrawable">@drawable/abc_seekbar_track_material</item> <item name="android:indeterminateDrawable">@drawable/abc_seekbar_track_material</item> <item name="android:thumb">@drawable/abc_seekbar_thumb_material</item> <item name="android:focusable">true</item> <item name="android:paddingLeft">16dip</item> <item name="android:paddingRight">16dip</item> </style>

Page 105: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 106: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 107: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<style name="AppTheme" parent="Theme.AppCompat"> <item name="colorControlActivated">#FF4081</item> <item name="colorControlNormal">#3F51B5</item> </style>

Page 108: Customizing Theme and Style for Material Design : Droid Kaigi 2016

ProgressBar

Page 109: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 110: Customizing Theme and Style for Material Design : Droid Kaigi 2016

ActionBar

Page 111: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 112: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<style name="Platform.ThemeOverlay.AppCompat" parent=""/><style name="Platform.ThemeOverlay.AppCompat.Dark"> <!-- Action Bar styles --> <item name="actionBarItemBackground">@drawable/abc_item_background_holo_dark</item> <item name="actionDropDownStyle">@style/Widget.AppCompat.Spinner.DropDown.ActionBar</item> <item name="selectableItemBackground">@drawable/abc_item_background_holo_dark</item> <!-- SearchView styles --> <item name="android:autoCompleteTextViewStyle">@style/Widget.AppCompat.AutoCompleteTextView</item> <item name="android:dropDownItemStyle">@style/Widget.AppCompat.DropDownItem.Spinner</item> </style> <style name="Platform.ThemeOverlay.AppCompat.Light"> <item name="actionBarItemBackground">@drawable/abc_item_background_holo_light</item> <item name="actionDropDownStyle">@style/Widget.AppCompat.Light.Spinner.DropDown.ActionBar</item> <item name="selectableItemBackground">@drawable/abc_item_background_holo_light</item> <!-- SearchView attributes --> <item name="android:autoCompleteTextViewStyle">@style/Widget.AppCompat.Light.AutoCompleteTextView</item> <item name="android:dropDownItemStyle">@style/Widget.AppCompat.DropDownItem.Spinner</item> </style>

ベーステーマなし

ActionBar系のスタイルだけ指定

Page 113: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<style name="Base.ThemeOverlay.AppCompat" parent="Platform.ThemeOverlay.AppCompat"/><style name="Base.ThemeOverlay.AppCompat.ActionBar"> <item name="colorControlNormal">?android:attr/textColorPrimary</item> <item name="searchViewStyle">@style/Widget.AppCompat.SearchView.ActionBar</item> </style>

Page 114: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<style name="Base.ThemeOverlay.AppCompat" parent="Platform.ThemeOverlay.AppCompat"/><style name="Base.ThemeOverlay.AppCompat.ActionBar"> <item name="colorControlNormal">?android:attr/textColorPrimary</item> <item name="searchViewStyle">@style/Widget.AppCompat.SearchView.ActionBar</item> </style>ActionBar の ←, オーバーフローアイコンの色

Page 115: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<style name="Base.ThemeOverlay.AppCompat.Dark" parent="Platform.ThemeOverlay.AppCompat.Dark"> <item name="android:windowBackground">@color/background_material_dark</item> <item name="android:colorForeground">@color/foreground_material_dark</item> <item name="android:colorForegroundInverse">@color/foreground_material_light</item> <item name="android:colorBackground">@color/background_material_dark</item> <item name="android:colorBackgroundCacheHint">@color/abc_background_cache_hint_selector_material_dark</item> <item name="android:textColorPrimary">@color/abc_primary_text_material_dark</item> <item name="android:textColorPrimaryInverse">@color/abc_primary_text_material_light</item> <item name="android:textColorPrimaryDisableOnly">@color/abc_primary_text_disable_only_material_dark</item> <item name="android:textColorSecondary">@color/abc_secondary_text_material_dark</item> <item name="android:textColorSecondaryInverse">@color/abc_secondary_text_material_light</item> <item name="android:textColorTertiary">@color/abc_secondary_text_material_dark</item> <item name="android:textColorTertiaryInverse">@color/abc_secondary_text_material_light</item> <item name="android:textColorHint">@color/hint_foreground_material_dark</item> <item name="android:textColorHintInverse">@color/hint_foreground_material_light</item> <item name="android:textColorHighlight">@color/highlighted_text_material_dark</item> <item name="colorControlNormal">?android:attr/textColorSecondary</item> <item name="colorControlHighlight">@color/ripple_material_dark</item> <item name="colorButtonNormal">@color/button_material_dark</item> <item name="colorSwitchThumbNormal">@color/switch_thumb_material_dark</item> <!-- Used by MediaRouter --> <item name="isLightTheme">false</item> </style> <style name="Base.ThemeOverlay.AppCompat.Dark.ActionBar"> <item name="colorControlNormal">?android:attr/textColorPrimary</item> <item name="searchViewStyle">@style/Widget.AppCompat.SearchView.ActionBar</item> </style>

Page 116: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<style name="Base.ThemeOverlay.AppCompat.Dark" parent="Platform.ThemeOverlay.AppCompat.Dark"> <item name="android:windowBackground">@color/background_material_dark</item> <item name="android:colorForeground">@color/foreground_material_dark</item> <item name="android:colorForegroundInverse">@color/foreground_material_light</item> <item name="android:colorBackground">@color/background_material_dark</item> <item name="android:colorBackgroundCacheHint">@color/abc_background_cache_hint_selector_material_dark</item> <item name="android:textColorPrimary">@color/abc_primary_text_material_dark</item> <item name="android:textColorPrimaryInverse">@color/abc_primary_text_material_light</item> <item name="android:textColorPrimaryDisableOnly">@color/abc_primary_text_disable_only_material_dark</item> <item name="android:textColorSecondary">@color/abc_secondary_text_material_dark</item> <item name="android:textColorSecondaryInverse">@color/abc_secondary_text_material_light</item> <item name="android:textColorTertiary">@color/abc_secondary_text_material_dark</item> <item name="android:textColorTertiaryInverse">@color/abc_secondary_text_material_light</item> <item name="android:textColorHint">@color/hint_foreground_material_dark</item> <item name="android:textColorHintInverse">@color/hint_foreground_material_light</item> <item name="android:textColorHighlight">@color/highlighted_text_material_dark</item> <item name="colorControlNormal">?android:attr/textColorSecondary</item> <item name="colorControlHighlight">@color/ripple_material_dark</item> <item name="colorButtonNormal">@color/button_material_dark</item> <item name="colorSwitchThumbNormal">@color/switch_thumb_material_dark</item> <!-- Used by MediaRouter --> <item name="isLightTheme">false</item> </style> <style name="Base.ThemeOverlay.AppCompat.Dark.ActionBar"> <item name="colorControlNormal">?android:attr/textColorPrimary</item> <item name="searchViewStyle">@style/Widget.AppCompat.SearchView.ActionBar</item> </style>

背景と色を指定

Page 117: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<style name="Base.ThemeOverlay.AppCompat.Light" parent="Platform.ThemeOverlay.AppCompat.Light"> <item name="android:windowBackground">@color/background_material_light</item> <item name="android:colorForeground">@color/foreground_material_light</item> <item name="android:colorForegroundInverse">@color/foreground_material_dark</item> <item name="android:colorBackground">@color/background_material_light</item> <item name="android:colorBackgroundCacheHint">@color/abc_background_cache_hint_selector_material_light</item> <item name="android:textColorPrimary">@color/abc_primary_text_material_light</item> <item name="android:textColorPrimaryInverse">@color/abc_primary_text_material_dark</item> <item name="android:textColorSecondary">@color/abc_secondary_text_material_light</item> <item name="android:textColorSecondaryInverse">@color/abc_secondary_text_material_dark</item> <item name="android:textColorTertiary">@color/abc_secondary_text_material_light</item> <item name="android:textColorTertiaryInverse">@color/abc_secondary_text_material_dark</item> <item name="android:textColorPrimaryDisableOnly">@color/abc_primary_text_disable_only_material_light</item> <item name="android:textColorPrimaryInverseDisableOnly">@color/abc_primary_text_disable_only_material_dark</item> <item name="android:textColorHint">@color/hint_foreground_material_light</item> <item name="android:textColorHintInverse">@color/hint_foreground_material_dark</item> <item name="android:textColorHighlight">@color/highlighted_text_material_light</item> <item name="colorControlNormal">?android:attr/textColorSecondary</item> <item name="colorControlHighlight">@color/ripple_material_light</item> <item name="colorButtonNormal">@color/button_material_light</item> <item name="colorSwitchThumbNormal">@color/switch_thumb_material_light</item> <!-- Used by MediaRouter --> <item name="isLightTheme">true</item> </style>

Page 118: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<style name="Base.ThemeOverlay.AppCompat.Light" parent="Platform.ThemeOverlay.AppCompat.Light"> <item name="android:windowBackground">@color/background_material_light</item> <item name="android:colorForeground">@color/foreground_material_light</item> <item name="android:colorForegroundInverse">@color/foreground_material_dark</item> <item name="android:colorBackground">@color/background_material_light</item> <item name="android:colorBackgroundCacheHint">@color/abc_background_cache_hint_selector_material_light</item> <item name="android:textColorPrimary">@color/abc_primary_text_material_light</item> <item name="android:textColorPrimaryInverse">@color/abc_primary_text_material_dark</item> <item name="android:textColorSecondary">@color/abc_secondary_text_material_light</item> <item name="android:textColorSecondaryInverse">@color/abc_secondary_text_material_dark</item> <item name="android:textColorTertiary">@color/abc_secondary_text_material_light</item> <item name="android:textColorTertiaryInverse">@color/abc_secondary_text_material_dark</item> <item name="android:textColorPrimaryDisableOnly">@color/abc_primary_text_disable_only_material_light</item> <item name="android:textColorPrimaryInverseDisableOnly">@color/abc_primary_text_disable_only_material_dark</item> <item name="android:textColorHint">@color/hint_foreground_material_light</item> <item name="android:textColorHintInverse">@color/hint_foreground_material_dark</item> <item name="android:textColorHighlight">@color/highlighted_text_material_light</item> <item name="colorControlNormal">?android:attr/textColorSecondary</item> <item name="colorControlHighlight">@color/ripple_material_light</item> <item name="colorButtonNormal">@color/button_material_light</item> <item name="colorSwitchThumbNormal">@color/switch_thumb_material_light</item> <!-- Used by MediaRouter --> <item name="isLightTheme">true</item> </style>

背景と色を指定

Page 119: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<style name="Theme.DroidKaigi.Light" parent="Theme.AppCompat.Light.DarkActionBar"> <item name=“actionBarTheme”>@style/ThemeOverlay.DroidKaigi.Dark.ActionBar</item> </style> <style name="ThemeOverlay.DroidKaigi.Dark.ActionBar" parent="ThemeOverlay.AppCompat.Dark.ActionBar"> <item name="colorControlNormal">#FF4081</item> </style>

Page 120: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/ThemeOverlay.DroidKaigi.Dark.ActionBar"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> </android.support.design.widget.AppBarLayout>

Page 121: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 122: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 123: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 124: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<item name="android:windowTranslucentStatus">true</item>

Page 125: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 126: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<style name="Theme.DroidKaigi.TranslucentStatusBar" parent="Theme.DroidKaigi.Light.NoActionBar" />

<style name="Theme.DroidKaigi.TranslucentStatusBar" parent="..."> <item name="android:windowTranslucentStatus">true</item> </style>

Page 127: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<style name="Theme.DroidKaigi.TranslucentStatusBar" parent="Theme.DroidKaigi.Light.NoActionBar" />

<style name="Theme.DroidKaigi.TranslucentStatusBar" parent="..."> <item name="android:windowTranslucentStatus">true</item> </style>

Page 128: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" android:orientation="vertical"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="New Button" /> </LinearLayout>

Page 129: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" android:orientation="vertical"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="New Button" /> </LinearLayout>

Page 130: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 131: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:src="@drawable/cover" tools:ignore="ContentDescription" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="New Button" /> </FrameLayout>

Page 132: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:src="@drawable/cover" tools:ignore="ContentDescription" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="New Button" /> </FrameLayout>

Page 133: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:src="@drawable/cover" tools:ignore="ContentDescription" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:fitsSystemWindows="true" android:text="New Button" /> </FrameLayout>

Page 134: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:src="@drawable/cover" tools:ignore="ContentDescription" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:fitsSystemWindows="true" android:text="New Button" /> </FrameLayout>

Page 135: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView ... /> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="New Button" /> </FrameLayout> </FrameLayout>

Page 136: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView ... /> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="New Button" /> </FrameLayout> </FrameLayout>

Page 137: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 138: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<item name="android:statusBarColor">@android:color/transparent</item>

Page 139: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<item name="android:statusBarColor">@android:color/transparent</item>

Page 140: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<item name="android:statusBarColor">@android:color/transparent</item>

<style name="Theme.DroidKaigi.TranslucentStatusBar" parent="..."> <item name="android:statusBarColor">@android:color/transparent</item> <item name="android:windowDrawsSystemBarBackgrounds">false</item> </style>

Page 141: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<item name="android:statusBarColor">@android:color/transparent</item>

<style name=“Theme.Material"> ... <item name="windowDrawsSystemBarBackgrounds">true</item> ...</style>

Page 142: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<item name="android:statusBarColor">@android:color/transparent</item>

Page 143: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<item name="android:statusBarColor">@android:color/transparent</item>

<style name="Theme.DroidKaigi.TranslucentStatusBar" parent="..."> <item name="android:statusBarColor">@android:color/transparent</item> <item name="android:windowTranslucentStatus">true</item> </style>

Page 144: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<style name="Theme.DroidKaigi.TranslucentStatusBar" parent="..."> <item name="android:statusBarColor">@android:color/transparent</item> </style>

@Overrideprotected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); findViewById(android.R.id.content).setSystemUiVisibility( View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);}

Page 145: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 146: Customizing Theme and Style for Material Design : Droid Kaigi 2016
Page 147: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<item name="android:windowLightStatusBar">true</item>

Page 148: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<style name="Theme.DroidKaigi.TranslucentStatusBar" parent="..."> <item name="android:statusBarColor">@android:color/transparent</item> <item name="android:windowLightStatusBar">true</item> </style>

Page 149: Customizing Theme and Style for Material Design : Droid Kaigi 2016

<style name="Theme.DroidKaigi.TranslucentStatusBar" parent="..."> <item name="android:statusBarColor">@android:color/transparent</item> <item name="android:windowLightStatusBar">true</item> </style>

<style name=“Theme.DroidKaigi.TranslucentStatusBar" parent="Theme.DroidKaigi.Light.NoActionBar" />

<style name="Theme.DroidKaigi.TranslucentStatusBar" parent="..."> <item name="android:windowTranslucentStatus">true</item> </style>

<style name="Theme.DroidKaigi.TranslucentStatusBar" parent="..."> <item name="android:statusBarColor">@android:color/transparent</item> </style>

Page 150: Customizing Theme and Style for Material Design : Droid Kaigi 2016

@Overrideprotected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); findViewById(android.R.id.content).setSystemUiVisibility( View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE); }

Page 151: Customizing Theme and Style for Material Design : Droid Kaigi 2016