カテゴリー
Kotlin言語

ゼロから始めるAndroidアプリ(Kotlin編)Unit2 – 1 第6回:アプリのテーマ色を変更する

Android Developers > スタートガイド > Kotlin と Android をゼロから学ぶ > Unit2 – レイアウトUnit2-1 第6回 の内容をまとめたものです(翻訳ではありません)


Unit2 – 1 第6回

第6回の内容は以下の通りです

  • Google が提供している Material というデザインシステムを使ってみます
  • Material は見た目だけでなく、動作や操作性なども含めた総合的な枠組みです
  • ここではその中の色の設定について見ておきます
  • Material デザインを使うには、できるだけ Android Studio 4.1 以降を使うようにします(Android Studio 4.0以前と設定方法が違う)

具体的には次のようなレッスンです

  • Materialデザインに基づいた効果的な配色を選択する方法
  • アプリのテーマ(theme)の一部として色を設定する方法
  • RGB や ARGB について
  • Viewに適用するスタイル(style)とテーマ(theme)の違い
  • ナイトモード(夜間モード,ダークモード,ダークテーマ)の設定
  • 色のコントラストの重要性を理解する

テーマ(theme)とは

Android アプリには Material デザインの利用がおすすめです

  • アプリにMaterialデザインを適用するには Material テーマ(theme)を選択します
  • 基本となるテーマを選択したうえで、必要な部分だけ手直しすることができます
  • 色は RGB あるいは アルファチャンネル(透過度)を含めて ARGB で表されます
    • RGBであれば #FF0080 のように、ARGB であれば #B0FF0080 のように記述します
    • アルファチャンネルは #00 で完全に透明(transparent)、 #FF で完全に不透明(opaque)です
  • 色の設定に使えるツールがあります。また colors.xml に使う色を名称で登録して利用できます
  • UI部品(View)に設定する属性のセットをスタイル(style)って言います。font の色、サイズ、背景色などについての設定です
  • テーマ(theme)はスタイル(style)をまとめたものです。テーマはアプリやアクティビティ、Viewの階層など全体に適用するものです
  • テーマを適用すると、そこに含まれるすべてにそれが適用されます。UI部品(View)はもちろん、ステータスバーやらウィンドウの背景色やら、関係あるものすべてに適用されます

プロジェクトを開いて XML ファイルを表示しておく

XML ファイルを開いておきますね

  • 適当なアプリを作成(Empty Activity で Minimum API 19(KitKat)くらいでよい)
  • activity_main.xml を開く(app > res > layout > activity_main.xml
  • Palletからドロップして適当に TextView と Button を作っておく
  • 「Code」あるいは「Split」をクリックして XML を表示する
  • strings.xml も開いておく(app > res > values > strings.xml

Android Studio のバージョンを確認する

Materialデザインを使うときは、基本的に Android Studio 4.1 以降を使ってくださいね

  • バージョン 4.0 までの Android Studio を使いたい人はモジュールの bundle.gradle に設定が必要です
    • dependencies ブロックに implementation ‘com.google.android.material:material:1.2.0’ を記述して Sync Now しておきます)
  • Android Studio 4.0 までは、スタイルとテーマは同じリソースファイルに記述してあります。これらのバージョンで Material デザインを利用するには themes.xml と styles.xml を使うように自分で変更しないといけません
    • まず themes.xml を作成します
    • AndroidManifest.xml を書き換えます
    • styles.xml を書き換えます
  • 上記のように Android Studio 4.0 以前でMaterialデザインを使うのはちょっと面倒です。特に理由がなければ Android Studio 4.1 以降へバージョンアップすることをおすすめします

テーマ(theme)のカテゴリとは

テーマには12のカテゴリがあるんですね

  • テーマ(theme)では、デザインを適用する場面を12のカテゴリに分けて考えます
  • 基本になるテーマを決めて、そのテーマの12のカテゴリに基本的な属性を設定します。色を含めたUI画面のデザインはこの設定を元に自動的に決定されます
番号カテゴリの名前(Nameテーマで使う属性名(Theme Attribute
1PrimarycolorPrimary
2Primary VariantcolorPrimaryVariant
3SecondarycolorSecondary
4Secondary VariantcolorSecondaryVariant
5BackgroundcolorBackground
6SurfacecolorSurface
7ErrorcolorError
8On PrimarycolorOnPrimary
9On SecondarycolorOnSecondary
10On BackgroundcolorOnBackground
11On SurfacecolorOnSurface
12On ErrorcolorOnError
  • On が付いている色は、上にのっかるテキストやアイコンの色です
  • テーマで使う属性名(Theme Attribute)は camelCase で記述されています

テーマの設定ファイル(themes.xml)を見てみる

themes.xml には何が書いてあるのかな?

themes.xml を開きます (app > res > values > themes.xml)

<style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
  • アプリのテーマ名は「Theme.アプリ名」(ここでは Theme.TipTime)の部分です
  • parent で示されているのが親テーマです。クラスと同じように親テーマから属性が引き継がれます
    • DayNight は Materialコンポーネントライブラリにあるテーマ、DarkActionBar はアクションバーのデザインです
  • こうすることで、アプリのテーマで定義していない色は自動的に親テーマで定義されている色が使われるようになります

もうちょっと詳しく見てみますね

<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">@color/purple_500</item>
<item name="colorPrimaryVariant">@color/purple_700</item>
<item name="colorOnPrimary">@color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/teal_200</item>
<item name="colorSecondaryVariant">@color/teal_700</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
</resources>
  • item を使ってテーマのカテゴリ毎の色が指定されています。指定には先の表にあった名前(colorPrimaryなど)を使います。指定のないものは親テーマから引き継がれます。親テーマから変更しないものを記述する必要はありません
  • Android Studio では item の各行の左側に小さく色のサンプルが表示されます。これをクリックして色を変更することもできます
  • 色指定は @color/purple_500 のようになっています。purple_500 は colors.xml の中で定義されている色の名前です。RGBで直接指定するより管理しやすくなります

colors.xml の中はこんな感じです

colors.xml を開いてみます (app > res > values > colors.xml)

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
</resources>

アプリの色を変更してみる

アプリのUI画面の色を実際に変えてみますね

  • アプリの色はテーマという考え方で管理されています
  • テーマにある12のカテゴリーのうち、次の4つを変更してみます
    • Primary・・・パターン1
    • Primary Variant・・・パターン1の別バージョン
    • Secondary・・・パターン2
    • Secondary Variant・・・パターン2の別バージョン
  • 色は colors.xml に設定して色名で指定します
  • これらに設定する色はそれぞれのカテゴリーの色の基準値になります。各UI部品に割り当てられる色はこの基準色をもとに自動的に設定されます
  • UI画面のテキスト色も指定し直したい場合は次のカテゴリーを変更します
    • On Primary・・・パターン1のテキスト色
    • On Secondary・・・パターン2のテキスト色

色を変更してみます

実際に変更するときの手順です

COLOR TOOL っていうWebツールを使うといいの

  1. Google が提供しているWebツール COLOR TOOL にブラウザからアクセスします
    • COLOR TOOL はアプリのテーマ色を選ぶためのツールです。色サンプルを当てはめながらRGB値を決定することができます
    • Primary と Secondary がありますが、これは2通りの色パターンを見比べながら同時に決定できるようになっているということで、作成した色を最終的にテーマのカテゴリーのどれに割り当てるかは自由です(変更できます)
    • Primary を選んでから適当な色を1つクリックします。すると選択した色だけでなく、それを基準にした明るめの色、暗めの色のRGB値が自動的に計算されて提案されます。On Primary の色も自動で提案されます
    • On Primary(On Secondary)については、必要に応じて Text on P(Text on S)を使って設定することもできます
    • ACCESSIBILITY タブを使うと、作成した色が見やすいかどうかの診断レポートが表示されます
    • EXPORT をクリックすると、colors.xml に利用できる形の XML を出力することができます
  2. COLOR TOOL から得られる RGB値 を colors.xml に設定します
    • Project から colors.xml (app > res > values > colors.xml) を開いて、分かりやすい色名(色名にlight,dark,あるいは明るさの度合いに応じた数値を付けておくと分かりやすい)でRGB値を登録します
    • 色の名前は snake_case でつけます
  3. themes.xml (app > res > values > themes > themes.xml) に色を設定します
    • colorPrimary , colorPrimaryVariant , colorSecondary , colorSecondaryVariant の4つを colors.xml に登録した色名を使って設定します
    • 必要に応じて colorOnPrimary , colorOnSecondary も設定します
    • colorPrimary に対して、colorPrimaryVariant はやや暗めのものに設定することが多いようです

COLOR TOOL と同じようなツールで Material palette generator というのもあるそうです

ダークテーマ(ダークモード)を設定する

ダークテーマ(ダークモード)は Android10 から標準装備された表示モードです

Android Studio は バージョン4.1 以上を使ってくださいね

  • ダークテーマ(ダークモード,夜間モード,ナイトモード)はAndroid10から標準装備された表示テーマです。ユーザがこのモードを指定したときのデザインを設定します
  • Project から themes.xml (night) を開きます (app > res > values > themes > themes.xml (night))
    • バージョン4.0以前の Android Studio にはこのファイルがありません。自分で別途作成する必要があります

ダークテーマの設定方法

ダークテーマの設定方法は標準の themes.xml と同じです。ただし設定する色については以下の点に注意します

  • 標準のテーマよりもやや明るめの色を設定する
  • Primary に標準よりやや明るめの色を設定します。Primary Variant には標準テーマの Primary くらいの色が無難です。Secondary も同様に設定します
  • COLOR TOOL で色指定すると「やや明るめ、指定色、やや暗め」の3色が提案されます。標準の Primary に指定色、標準の Primary Variant にやや暗め、ダークテーマの Primary にやや明るめ、ダークテーマの Primary Variant に指定色、あたりがおすすめです

Android Studio の Design Editor でダークモード表示する

Design Editor をダークモードで表示してみます

  1. Design Editor でレイアウトを表示します
  2. 画面の左上の方にあるスマホが回転しているようなアイコン(Orientation for Preview)をクリックします
  3. Night Mode > Night と選択するとナイトモード(ダークテーマ)で表示されます

エミュレータまたは実機でダークテーマ表示する

アプリを実行してダークテーマにしてみます

  • ダークテーマを試すには、API 28 (Android 9) または API 29 (Android 10) 以上のエミュレータ(または実機)を用意します
  • Android9では Battery セクション > Battery Saver と進んでこれをOnにすればダークテーマになります
  • Android10では Display セクション > Dark theme と進んでこれをOnにすればダークテーマになります
  • いつも通りアプリを実行してダークテーマでの見え方を確認できます

まとめ

  • Google 提供のWebツール COLOR TOOL を使ってアプリのテーマ色を選ぶことができます
  • COLOR TOOL と同じようなツールに Material palette generator もあります
  • 色は colors.xml に色名で登録してから利用するのがおすすめ
  • ダークテーマ(ダークモード,夜間モード)を使うと暗いところで見やすくなります。またバッテリーを長持ちさせることができます

参考