DroidKaigi2019で発表したAndroid Themeの話のスライド補足
DroidKaigi2019お疲れ様でした。日高さんはじめスタッフの皆さん、登壇者の皆さん、自分のセッションに来ていただいた皆さん、直接お話させていただいた皆さんありがとうございました。
英語での発表で、30分に収めるために削った部分も多く、スライドだけだと伝わりにくい部分もあると思うので日本語で補足しておこうと思います。
内容に関して、間違っている部分やわからない部分があれば、お手数ですが直接 @konifarまで連絡をもらえるとありがたいです。
- 今日は聞きにきていただいてありがとうございます。
- AndroidのThemeについてお話します。
- まず少しだけ自己紹介をさせてください。
- 小西裕介と言います。konifarという名前でGitHubやTwitterをやっています。
- GitHubのリポジトリでいくつかのツールやアプリを公開しています。
- 普段はKyashという日本でFintechをやっている会社で働いています。
- Kyashを使えば、Visaカードをアプリ上で簡単に発行して誰かに送金することができます。
- もしこの発表がよかったと感じたら、インストールして自分に投げ銭してみてください。すみません冗談です。
- 実は、今日の発表のためにサンプルアプリを作ってあります。
- AppCompat、Material Componentsのテーマを適用したコンポーネントがどう見えるかを確認できます。また、テーマの動的な切り替えやNight modeの対応も入っています。
- このアプリのテーマ自分の愛猫を元にしていて、毛の色をprimaryColorに、眼の色をsecondaryColorに設定しています。今日はこのサンプル猫アプリの実装を例に説明していきます。
- まずAndroid Themeについて少しおさらいしましょう。
- みなさんご存知のとおり、Android Themeをうまく使うことでアプリのデザインに統一感を持たせることができます。
- Themeは技術的にはStyleを同じです。ざっくり言えば、Themeはグローバル、Styleはローカルの設定のようなものだと言えます。
- Material Designが登場した2014年からは特に重要なものとなりました。
- AppCompatを使っているのであれば、もっとも有名なのはこの3つの属性でしょう。colorPrimary、colorPrimaryDark、colorAccentです。
- 画面で見るとこんな感じですね。NavigationBar、Toolbar、FloatingActionButtonなどに先ほど設定した色が適用されます。
- テーマをうまく使えば統一感のあるアプリを作ることができます。
- しかし実際には、うまくthemeを使えている人があまり多くないように思います。
- 「テーマはなんだか難しい、複雑だ」と感じさせる問題が2つあると考えています。
- 1つめは、親テーマが多すぎる問題です。
- Android Studioでサジェストされる親テーマを見てみると、たくさんのテーマがありますね。
- テーマを継承して作成する際に、どれを指定するのが正解なのか実はよくわかっておらず、なんとなく選んでいる人もいるのではないでしょうか。
- 2つめは、属性が多すぎる問題です。
- テーマでは、色だけではなく各コンポーネントのスタイルも色々と調整できます。本当にたくさんの属性があるので、おそらく有効活用しきれていないのではないでしょうか。
- また、2018年にはMaterial Componentsがリリースされて色や形を指定するための属性が増えました。
- どのような属性があるかわからないことで、本当はテーマで指定できるものを各Viewでいちいち指定していることはありませんか？
- ほとんどのコンポーネントのStyleや色をテーマで設定できるので、どういうものをStyleで設定するべきなのかわからないという方もいるでしょう。
- ということで、今日はうまくテーマを活用してアプリのデザインに統一感を持たせる方法についてお話しようと思います。
- ほとんどのアプリはAppCompatとMaterial Componentsを使っていると思うので、今日はその2つを使うことを前提にお話しします。
- まず最初に、テーマの適用について少し体系的に話します。
- 親のテーマに何を選べばいいのか。AppCompatもMaterial Componentsもたくさんのテーマを提供してくれています。どれを選べばいいのでしょうか。
- また、テーマをActivityやFragmentで動的に変更したり、Night Modeに切り替えたりするにはどのように実装すればよいのでしょうか。
- 2つめは、テーマの属性について話します。おそらく、こちらの方が気になっている方も多いのではないでしょうか。
- テーマには本当にたくさんの属性がありますよね。どんな属性があり、どこに影響するのかについてお話しします。
- 1つずつ順番に説明するだけでは単調になってしまうので、今日は「指定できるテーマの属性をどのように調べればいいのか」という方法について話そうと思います。
- このセッションが終わった時に、テーマについて前より少しでも詳しくなったと思ってもらえたら嬉しいです。
- それでは、テーマの適用から見ていきましょう。
- まずはAndroidManifestでのテーマの適用について少し復習しましょう。
- Androidのテーマは、既存のテーマを継承してAndroidManifestのApplicationまたはActivityに指定します。
- カメラ画面のような透明なActivityなど画面固有のテーマを適用したい場合には、Activityで指定することもあります。
- この親のテーマに何を指定すればいいのかを説明していきます。
- その前に、まずテーマの継承についてお話します。
- テーマの継承の方法は、dot区切りとparentでの指定の2種類があります。
- このdot区切りの例では、
Theme.AppCompat.Lightを継承していくつかのActionBarに関する属性を指定し、Theme.AppCompat.Light.NoActionBarというテーマを定義しています。
- 一方、parentで指定して継承することもできます。
- parentで指定した場合、dot区切りよりも優先されます。
- この2つの継承方法を使い分けるために、どんな時にparentの指定を使うべきなのかを説明します。
- 1つは、AppCompatやMaterial Componentsといったライブラリが提供するテーマを継承する時。
- もう1つは、APIバージョンによる属性の差異に対応したい時です。
- この
Base.Theme.AppCompat.Lightを例に、APIバージョンの差異にどのように対応しているかを見てみましょう。 - Androidのテーマは常に進化を続けているので、途中から追加された属性が色々あります。
- Androidでは、それらを
values-{version}というsuffixをつけたディレクトリの中で定義することで、バージョンに応じて適用するテーマを変更できます。
- バージョンsuffixのないvaluesディレクトリの中を見ると、
Base.V7.Theme.AppCompat.Lightというテーマを継承しています。 - 親は
Platform.AppCompat.Lightです。属性はたくさん指定されています。
- 一方、values-v21の中の同じテーマを見てみると、
Base.V21.Theme.AppCompat.Lightというテーマを継承しています。 - この親は
Material.Light.NoActionBarという先ほどとは違うテーマです。
- values-v28では、また違うテーマを継承しています。
- このように、APIバージョンに応じて適切なテーマと属性を設定し、それをparentで継承することで
Base.Theme.AppCompat.Lightという同じ名前のテーマを使うことができます。 - ここまでででわかると思いますが、AppCompatなどのライブラリが提供する
Base~から始まるテーマはバージョン差異を吸収するためのものなので、アプリを作る上では継承することはありません。
- では、何のテーマを継承すればよいのでしょうか。
- 適切な親テーマを選ぶためには、ライブラリが提供するテーマの命名規則を知っておくとよいです。
- 各コンポーネントごとのテーマはたくさんありますが、ActivityやFragmentにセットするテーマのルールは実はとてもシンプルです。
- 最初の部分は単なるPrefixです。基本的には、Themeで始まるものを使えばよいです。
- ThemeOverlayから始まるものは、各Viewでオーバーライドする時に使うものです。
- 2つめの部分はテーマの名前です。ライブラリ名といってもよいでしょう。
- AppCompat、MaterialComponentsを使うことが多いと思います。
- Designというのは、MaterialComponentsが提供しているもので、AppCompatのエイリアスなので実態はAppCompatと同じです。
- 3つめは、背景の明るさです。
- 何も指定しなければ、黒い背景・明るい文字色になります。Lightを指定すると、明るい背景・暗い文字色になります。
- DayNightを指定すると、その2つを時間帯や任意のタイミングで切り替えられるようになります 。
- 最後のDarkActionBarの部分は、背景はLightだけどActionBarは暗い色にしたい時に指定します。
- NoActionBarを指定すると、ActionBarは表示されません。ActionBarのいらない画面か、ToolBarと組み合わせて使う時に指定します。
- まとめるとこんな感じです。
- AndroidManifestでセットする全体のテーマは、実はこれらの掛け合わせだけで選べるということです。簡単ですね。
- もうひとつ、Material Componentsで追加された、最後にBridgeがつくテーマがあります。
- これはAppCompatを継承したテーマで、AppCompatから簡単に移行するために新しい必須の属性を追加してくれています。
- 何のテーマを選べばいいかわかったところで少し話を変えて、コードからテーマを変更する方法について見ていきましょう。
- Activityはこんな感じです。
setTheme()メソッドをsetContentView()よりも前に呼ぶだけです。 - この
setTheme()に渡すstyleをSharedPreferenceに保存したstyleにすれば、設定に応じてテーマを切り替えることもできます。
- Fragmentの場合も簡単です。
onCreateView()でViewをinflateする前にcontextThemeWrapperにstyleを渡し、それを使ってinflaterをcloneします。cloneしたinflaterを使ってinflateするだけです。
- 同じように、DayNight modeをコードから切り替える方法について説明します。
- まず、DayNight用のテーマを継承したテーマを作ります。
- ここで、textColorとcolorBackgroundの色を指定しておきます。
- 画面ではこんな感じで変更されます。背景とテキストの色が変わっていますね。
- DayNight modeをコードから変更するのは簡単です。activity delegateの
setLocalNightMode()メソッドを呼ぶだけです。 - テーマの変更と違ってActivityを再起動する必要もありません。
- こんな感じですぐに変更されます。
- テーマと属性を適切に設定しておけば、かなり簡単にnightmodeに対応することができますね。 If you set the theme and attributes properly, it’s so easy to support night mode. テーマについて話したところで、次に属性を適切に設定する方法について見ていきましょう。 Then, on next part, I’ll talk how we can find and set proper theme attributes.
- 1つ1つを順番に説明するのではなく、何の属性があってどこに影響するか、それをどう調べればいいかといった話を中心に話します。
- 一番正確なのは、コードを読むことです。
- 基本的には、themes.xmlかthemes_base.xmlに定義できる属性が全部書いてあります。
- Android Framework
- AppCompat
- MaterialComponents
- ただ、xmlを読んで理解するのは大変ですよね。
- ですので、どんな項目が定義できるのかを分類しながら整理しましょう。
- テーマで設定できる属性はたくさんありますが、実は7種類のカテゴリに分けられます。
- Colors、Drawables、Text appearances、Shape appearances、Widget styles、Themes、Window configurationsの7つです。
- その中の全ての属性を覚えておく必要はありません。
- それぞれのカテゴリがどういうイメージのものなのかをざっと説明します。
- Material Designのケーススタディの1つである、Owlというサービスを例に説明していきます。
- Owlは、画面ごとに鮮やかなテーマが切り変わるアプリです。
- テーマの色は異なりますが、いくつか共通部分はあるのでAppThemeというテーマを作ります。
- 例えば、TextAppearanceで定義する文字サイズやフォント、行間のサイズなどは共通で定義しておいた方がよさそうです。
- CardViewの形を見ると、ShapeAppearanceも共通で定義しておいた方がよさそうですね。
- 一方、色は明らかに違うのでそれぞれAppThemeを継承してテーマを作ります。
- colorPrimary、colorPrimaryVariant、colorSecondaryをそれぞれデザインに合わせて定義します。
- colorBackgroundやtextColorも同じように各テーマに定義しておけそうですね。
- 真ん中のBrowse画面のBottomNavigationは、bottomNavigationStyleで定義しておくとよいかもしれません。
- 右のLearn画面のStatusBarは透明なので、APIバージョンごとにWindow configurationの属性を定義しておく必要があります。
- こんな感じでテーマに必要な属性を定義します。
- テーマはどうしても属性が多くなってしまうので、カテゴリごとコメントで区切っておくと整理しやすくオススメです。
- 今日は全てを説明する時間はないので、Colors、Widget styles、Shape appearancesの3つに絞って説明します。
- テーマの属性はたくさんあって一覧で確認しにくいので、AppCompatやMaterial Componentsのattrs.xmlからcolorsの設定だけ抽出してmarkdownにまとめるスクリプトを作っています。
- https://github.com/konifar/android-theme-attrs-to-markdown-table
- こんな感じで、何の属性があってどこに定義されているかを一覧で確認できます。
- 属性をタップすると、リファレンスで説明を確認できます。
- カテゴリごとにまとめてあるので、どんな属性があるかをざっと確認したい時は参考にしてみてください。
- それでは、colorsから見ていきましょう。
- AppCompatとMaterial Componentsの違いを中心にお話します。
- AppCompatで定義されていた色の属性が、Material Componentsで少し変わります。
- 例えば、StatusBarのcolorPrimaryDarkがcolorPrimaryVariantに変わってますね。
- Material Componentsでは、colorPrimaryやcolorSecondaryの上に表示される色を
colorOnから始まる属性で指定できるようになりました。
- colorOnSurfaceに設定した色は、こんな感じで反映されます。
- EditTextのborderや、TabLayoutのデフォルトのタブ色などに反映されていますね。
- colorOnPrimaryは、primaryカラーのボタンのテキスト色に反映されます。
- colorOnSecondaryはFloatingActionButtonのアイコンの色に反映されます。
- 他のテキストの色については、AppCompatとMaterialComponentで大きな違いはありません。
- 他の色の属性について知りたいときは、このスライドのリンクを参照してください。
- 全属性
- Android Platform
- AppCompat
- Material Components
- 基本的には、Colorsだけでもかなりカスタマイズできます。
- けれども、コンポーネントごとにスタイルを指定することでより柔軟に見た目を変更することができます。
- 例えばTabのスタイルを例に見ていきましょう。
- 何も指定しないと、特に色はつきません。
- tabStyleという属性にTabLayoutのスタイルを指定します。
- TabLayoutは
Widget.Design.TabLayoutを継承していて、elevationやtextColorなどを設定しています。
- では、どういうWidget styleがあって何の属性を設定できるかをどのように調べればよいでしょうか。自分が普段やっている調べ方を説明します。
- 基本的には、AndroidStudioのSuggestionが優秀なのでそれを使って調べています。 たったの3ステップです。
- まず、Toolbarなど変更したいコンポーネントの名前を打ってみましょう。
- toolbarStyle、buttonStyleといった感じで
xxxStyleという名前で出てくるはずです。
- 属性が見つかったら、デフォルトのstyleを探します。
Widget.Toolbarのように打つと、それっぽい名前が出てくるはずです。- 例えばAppCompatテーマの場合には
Widget.AppCompat.Toolbarですね。
- 最後に、デフォルトのスタイルを見つければどんな属性が設定できるか確認できます。
- 属性の名前を見れば、だいたいどのようなカスタマイズができるのかわかるはずです。
- 自分はGitHubのリポジトリから検索して探すことが多いです。
- colorsと同じように、このスライドのリンクにまとまっているので他の属性を調べる時に参照してください。
- 全属性
- Android Platform
- AppCompat
- Material Components
- 最後に、ShapeAppearanceの説明をします。
- Material Componentsで追加された、CardViewやEditTextなどのコンポーネントの形を指定できる属性です。
- ShapeAppearanceはWidget styleの中で個別で指定することもできますが、テーマ全体で指定できるのはこの3つの属性です。
- Small、Medium、Largeの3つのコンポーネントの大きさに応じて適用されます。
- 例えば、CardViewに適用されるのはshapeAppearanceMediumComponentです。
- 属性はcornerFamilyとcornerSizeの2つだけです。
- alpha8の時点では2つだけですが、今後増えていくと思います。
- cornerFamilyはcutとroundedの2つを指定できます。
- この2つをそれぞれ指定すると、表のように形を変化させることができます。
- ShapeAppearanceはchipStyleやbuttonStyleの中でも設定することができます。
- FloatingActionButtonをcutにする時には、floatingActionButtonStyleを指定します。
- 注意点としては、FloatingActionButtonのstyleにはshapeAppearanceではなくshapeAppearanceOverlayを指定する必要があります。
- カテゴリをざっと見たところで、最後にテーマで定義するかスタイルで定義するかという多くの人が悩みがちなところを少しだけ話します。
- 元も子もないことを言うと、デザインによります。
- テーマを使えば、ほとんどのコンポーネントはカスタマイズ可能です。
- もしアプリ全体で共通のデザインならば、テーマで定義した方がアプリ全体でデザインを統一できてよいでしょう。
- 逆に、あるコンポーネントだけ特別なフォントやShapeならば、スタイルに定義してレイアウトの中で指定した方がよいです。
- 例として、Material DesignのケーススタディのFortnightlyというサービスを見てみましょう。
- FornightlyのガイドラインにはTypographyのセクションがあり、テキストのサイズや色に関してはアプリ全体で適用できるのでtextAppearanceをテーマに定義しておくのがよいでしょう。
- 一方、この検索画面のEditTextは、検索のためだけのものならばスタイルとして定義した方がよいでしょう。
- chipはアプリ全体で同じなので、テーマとして定義するべきです。
- つまり、色やコンポーネントのスタイルをどの程度共通化するべきかで、テーマにするべきかスタイルにするべきかは変わるということです。
- チームにデザイナーがいるのであればデザイナーと相談して一緒に考えていくのがよいでしょう。
- 最後に今日のセッションについてまとめます。
- テーマにはたくさんの属性がありますが、たった7つのカテゴリに分類することができます。
- 指定したい属性の見つけ方を知っておくことが重要です。
- テーマを効果的に使うために､Material designのドキュメントを読み、Material themingツールを使うとよいです。
- Material Components Libraryで導入されたshapeAppearanceをはじめ、デザインを実現するためのテーマと属性が用意されています。
- Androidのテーマをうまく使って楽しく開発しましょう。
- ありがとうございました。