このページは Cloud Translation API によって翻訳されました。

Kotlin Android の基礎 10.1: スタイルとテーマ

この Codelab は、Android Kotlin の基礎コースの一部です。このコースを最大限に活用するには、Codelab を順番に進めることをおすすめします。コースのすべての Codelab は、Android Kotlin の基礎の Codelab のランディングページに一覧表示されています。

設計の概要

この一連の Codelab では、Android 開発の最も重要な側面の一つであるアプリのデザインに焦点を当てます。アプリのデザインで明らかな要素は、ビュー、テキスト、ボタン、それらが画面上のどこにあるか、使用されている色やフォントなどです。次に何をすべきかについてのヒントをユーザーに提供することも、設計の重要な側面です。ユーザーは、何を見ているのか、何が重要なのか、何ができるのかを一目で把握できる必要があります。

以下の 2 つの画面を比較します。要素を移動して重要なものにフォーカスを当てることで、ユーザーが状況を把握しやすくなります。シンプルな画面では、情報を減らすことが優れたデザインにつながることがよくあります。重要な情報が多数表示される画面では、優れたデザインによって、密度の高い情報をひと目で理解できるようになります。Android アプリの開発では、このコンセプトは情報アーキテクチャ（IA）と呼ばれることがあります。

もう 1 つのレベルの設計は、ユーザーがタスクを完了できるようにする一貫性のあるユーザーフロー、つまりユースケースを構築することです。この形式のデザインは、ユーザーエクスペリエンスデザイン（UXD）と呼ばれ、専門とするデザイナーもいます。

デザイナーにアクセスできない場合は、次のヒントを参考にしてください。

ユースケースを定義します。ユーザーがアプリで何を達成すべきか、どのように達成すべきかを記述します。
デザインを実装します。最初のドラフトに固執せず、「十分」なものにしてください。実際のユーザーがどのように操作するかを確認してから変更することになるからです。
フィードバックを得る。アプリのテストに協力してくれる人（家族、友人、Google デベロッパーグループで知り合った人など）を見つけます。アプリを使用してユースケースを実行してもらい、その様子を観察して詳細なメモを取ります。
絞り込みこれらの情報を基にアプリを改善し、もう一度テストします。

優れたアプリエクスペリエンスを設計する際に考慮すべきその他の質問を以下に示します。前の Codelab では、これらの問題に対処するための手法を学びました。

ユーザーがデバイスを回転させると、アプリの状態が失われますか？
ユーザーがアプリを開くとどうなりますか？読み込みスピナーが表示されますか？それとも、オフラインキャッシュにデータが準備されていますか？
アプリは効率的な方法でコーディングされ、ユーザーのタップに常に反応するようになっていますか？
アプリは、ユーザーに奇妙なデータ、誤ったデータ、古いデータが表示されることのない方法でバックエンドシステムとやり取りしますか？

より多くのユーザーを対象としたアプリを開発する際は、できるだけ多くのユーザーがアプリを利用できるようにすることが重要です。次に例を示します。

多くのユーザーは、さまざまな方法でコンピュータシステムを操作します。色覚異常のユーザーも多く、あるユーザーにはコントラストが十分でも、別のユーザーにはそうでない場合があります。多くのユーザーは、老眼鏡が必要な方から全盲の方まで、視覚障がいを抱えています。
一部のユーザーはタッチスクリーンを使用できず、ボタンなどの他の入力デバイスを介して操作します。

優れたデザインは、ユーザーにアプリを使ってもらうための最も重要な方法です。

これらの Codelab は、Android のデザインについてすべてを教えるには短すぎますが、正しい方向に進むための出発点にはなります。その後は、自分で学習と開発を続けることができます。

前提となる知識

以下について把握しておく必要があります。

アクティビティとフラグメントを含むアプリを作成し、データを渡しながらフラグメント間を移動する方法
ビューとビューグループを使用して、RecyclerView を含むユーザーインターフェース（UI）をレイアウトする
推奨アーキテクチャで ViewModel などのアーキテクチャコンポーネントを使用して、構造化された効率的なアプリを作成する方法
データバインディング、コルーチン、クリックの処理方法
Room データベースを使用してインターネットに接続し、データをローカルにキャッシュ保存する方法
ビューのプロパティを設定する方法
リソースを XML リソースファイルに抽出して使用する方法

学習内容

Android のスタイリングシステムの基本
属性、スタイル、テーマを使用してアプリをカスタマイズする方法

演習内容

ビュー属性、スタイル、テーマを使用してスターターアプリのデザインを改善する

GDG 検索スターターアプリは、このコースでこれまで学んだことをすべて活用して構築されています。

アプリは ConstraintLayout を使用して 3 つの画面をレイアウトします。2 つの画面は、Android での色とテキストを調べるために使用するレイアウトファイルです。

3 つ目の画面は GDG ファインダーです。GDG（Google デベロッパーグループ）は、Android などの Google テクノロジーに焦点を当てたデベロッパーのコミュニティです。世界各地の GDG が、ミートアップ、カンファレンス、スタディジャムなどのイベントを開催しています。

このアプリを開発する際は、GDG の実際のリストを使用します。ファインダー画面では、デバイスの位置情報を使用して GDG を距離順に並べ替えます。

お住まいの地域に GDG がある場合は、ウェブサイトでイベントを確認して登録できます。GDG イベントは、他の Android デベロッパーと出会い、このコースでは取り上げなかった業界のベストプラクティスを学ぶ絶好の機会です。

以下のスクリーンショットは、この Codelab の最初から最後までアプリがどのように変化するかを示しています。

Android には、アプリ内のすべてのビューの外観を制御できる豊富なスタイリングシステムが用意されています。テーマ、スタイル、ビュー属性を使用して、スタイリングに影響を与えることができます。次の図は、各スタイリング方法の優先順位をまとめたものです。ピラミッド図は、システムがスタイリングメソッドを適用する順序をボトムアップで示しています。たとえば、テーマでテキストサイズを設定し、ビュー属性でテキストサイズを別の値に設定すると、ビュー属性によってテーマのスタイル設定がオーバーライドされます。

表示属性

ビュー属性を使用して、各ビューの属性を明示的に設定します。（スタイルとは異なり、ビュー属性は再利用できません）。
スタイルまたはテーマで設定できるすべてのプロパティを使用できます。

マージン、パディング、制約などのカスタムデザインや単発のデザインに使用します。

スタイル

スタイルを使用して、フォントサイズや色など、再利用可能なスタイリング情報のコレクションを作成します。
アプリ全体で使用される共通のデザインの小さなセットを宣言するのに適しています。

複数のビューにスタイルを適用し、デフォルトのスタイルをオーバーライドします。たとえば、スタイルを使用して、一貫したスタイルのヘッダーやボタンのセットを作成します。

デフォルトのスタイル

これは、Android システムが提供するデフォルトのスタイル設定です。

テーマ

テーマを使用して、アプリ全体の色を定義します。
テーマを使用して、アプリ全体のデフォルトのフォントを設定します。
テキストビューやラジオボタンなど、すべてのビューに適用されます。
アプリ全体に一貫して適用できるプロパティを構成するために使用します。

TextAppearance

fontFamily などのテキスト属性のみでスタイルを設定する場合。

Android がビューのスタイルを設定するときは、テーマ、スタイル、属性の組み合わせを適用します。この組み合わせはカスタマイズできます。属性は、スタイルやテーマで指定されたものを常にオーバーライドします。また、スタイルは常にテーマで指定されたものを上書きします。

次のスクリーンショットは、ライトモード（左）とダークモード（右）の GDG-finder アプリと、カスタムフォントとヘッダーサイズを示しています。これはいくつかの方法で実装できます。この Codelab では、そのうちのいくつかについて学びます。

このタスクでは、属性を使用してアプリレイアウトのテキストのヘッダーのスタイルを設定します。

GDG 検索スターターアプリをダウンロードして実行します。
ホーム画面には、同じ形式のテキストが多数表示されています。そのため、ページの内容や重要な情報を把握しづらくなっています。
home_fragment.xml レイアウトファイルを開きます。
レイアウトでは ConstraintLayout を使用して ScrollView 内の要素を配置していることに注目してください。
各ビューの制約とマージンのレイアウト属性は、各ビューと画面に合わせてカスタマイズされる傾向があるため、ビューで設定されていることに注意してください。
title テキストビューで、textSize 属性を追加してテキストのサイズを 24sp に変更します。

sp はスケール非依存ピクセルの略で、ピクセル密度とユーザーがデバイス設定で設定したフォントサイズの両方に基づいてスケーリングされます。Android は、テキストを描画するときに、画面上のテキストの大きさを判断します。テキストサイズには常に sp を使用します。

<TextView
       android:id="@+id/title"
...

android:textSize="24sp"

title テキストビューの textColor を、aRGB 値 #FF555555 に設定して、不透明なグレーに設定します。

<TextView
       android:id="@+id/title"
...

android:textColor="#FF555555"

Android Studio で [Preview] タブを開くには、[View] > [Tool Windows] > [Preview] を選択するか、Layout Editor の右端にある縦型の [Preview] ボタンをクリックします。プレビューで、タイトルが灰色で以前よりも大きくなっていることを確認します（下図を参照）。

字幕のスタイルを、ヘッダーと同じ色で、フォントサイズを小さくした 18sp にします。（デフォルトのアルファは FF（不透明）です。アルファ値を変更しない場合は、省略できます）。

<TextView
       android:id="@+id/subtitle"
...
android:textSize="18sp"
android:textColor="#555555"

この Codelab では、アプリをプロフェッショナルな外観にしながら、少し風変わりなスタイルにすることを目標としていますが、好きなようにスタイルを設定できます。subtitle テキストビューに次の属性を試してください。[プレビュー] タブを使用して、アプリの外観がどのように変化するかを確認します。次に、これらの属性を削除します。

<TextView
       android:id="@+id/subtitle"
       ...
       android:textAllCaps="true"
       android:textStyle="bold"
       android:background="#ff9999"

続行する前に、subtitle ビューから textAllCaps、textStyle、background の各属性を元に戻すことを忘れないでください。
アプリを実行すると、すでに見た目が改善されているはずです。

アプリでフォントを使用する場合、必要なフォントファイルを APK の一部として配布できます。この解決策は簡単ですが、アプリのダウンロードとインストールに時間がかかるため、通常はおすすめできません。

Android では、ダウンロード可能なフォント API を使用して、アプリが実行時にフォントをダウンロードできます。アプリがデバイス上の別のアプリと同じフォントを使用している場合、Android はフォントを 1 回だけダウンロードし、デバイスのストレージ容量を節約します。

このタスクでは、ダウンロード可能なフォントを使用して、テーマを使用するアプリ内のすべてのビューのフォントを設定します。

ステップ 1: ダウンロード可能なフォントを適用する

[Design] タブで home_fragment.xml を開きます。
[Component Tree] ペインで、title テキストビューを選択します。
[属性] ペインで、fontFamily 属性を見つけます。[All Attributes] セクションで探すか、検索します。
プルダウン矢印をクリックします。
[その他のフォント ] までスクロールして選択します。[Resources] ウィンドウが開きます。

[リソース] ウィンドウで、lobster または lo を検索します。
結果で [Lobster Two] を選択します。
右側のフォント名の下にある [ Create downloadable font] ラジオボタンをオンにします。[OK] をクリックします。
Android マニフェストファイルを開きます。
マニフェストの下の方にある、name 属性と resource 属性が "preloaded_fonts" に設定された新しい <meta-data> タグを見つけます。このタグは、ダウンロードしたフォントを使用したいことを Google Play 開発者サービスに伝えます。アプリが実行され、Lobster Two フォントをリクエストすると、フォントプロバイダは、フォントがデバイスでまだ利用できない場合、インターネットからフォントをダウンロードします。

<meta-data android:name="preloaded_fonts" android:resource="@array/preloaded_fonts"/>

res/values フォルダで、このアプリのダウンロード可能なすべてのフォントをリストする配列を定義する preloaded_fonts.xml ファイルを見つけます。
同様に、res/fonts/lobster_two.xml ファイルにはフォントに関する情報が含まれています。
home_fragment.xml を開き、コードとプレビューで、Lobster Two フォントが title TextView に適用され、タイトルにも適用されていることを確認します。

res/values/styles.xml を開き、プロジェクト用に作成されたデフォルトの AppTheme テーマを確認します。現在は次のような内容です。新しい Lobster Two フォントをすべてのテキストに適用するには、このテーマを更新する必要があります。
<style> タグの parent 属性に注目してください。すべてのスタイルタグで親を指定し、親のすべての属性を継承できます。このコードは、Android ライブラリで定義された Theme を指定します。ボタンの動作からツールバーの描画方法まで、すべてを指定する MaterialComponents テーマ。テーマには適切なデフォルトが設定されているため、必要な部分だけをカスタマイズできます。上のスクリーンショットでわかるように、このアプリはアクションバー（NoActionBar）のないこのテーマの Light バージョンを使用しています。

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
   <!-- Customize your theme here. -->
   <item name="colorPrimary">@color/colorPrimary</item>
   <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
   <item name="colorAccent">@color/colorAccent</item>
</style>

AppTheme スタイル内で、フォントファミリーを lobster_two に設定します。親テーマは両方を使用するため、android:fontFamily と fontFamily の両方を設定する必要があります。[デザイン] タブで home_fragment.xml をオンにすると、変更内容をプレビューできます。

<style name="AppTheme"  
...    
        <item name="android:fontFamily">@font/lobster_two</item>
        <item name="fontFamily">@font/lobster_two</item>

アプリを再度実行すると、新しいフォントがすべてのテキストに適用されます。ナビゲーションドロワーを開いて他の画面に移動すると、そこにもフォントが適用されていることがわかります。

ステップ 2: タイトルにテーマを適用する

home_fragment.xml で、lobster_two フォントの属性を持つ title テキストビューを見つけます。fontFamily 属性を削除してアプリを実行します。テーマで同じフォントファミリーが設定されているため、変更はありません。
別の fontFamily 属性を title テキストビューに戻します。
app:fontFamily="serif-monospace"app 空間にあることを確認してください。

<TextView
       android:id="@+id/title"
       ...
       app:fontFamily="serif-monospace"

アプリを実行すると、ビューにローカルな属性がテーマをオーバーライドしていることがわかります。

title テキストビューから fontFamily 属性を削除します。

テーマは、デフォルトのフォントやプライマリカラーなど、アプリに一般的なテーマ設定を適用するのに適しています。属性は、特定のビューのスタイル設定や、各画面に固有の傾向があるマージン、パディング、制約などのレイアウト情報を追加するのに適しています。

スタイル階層のピラミッドの中央には、スタイルがあります。スタイルは、選択したビューに適用できる属性の再利用可能な「グループ」です。このタスクでは、タイトルとサブタイトルにスタイルを使用します。

ステップ 1: スタイルを作成する

res/values/styles.xml を開きます。
<resources> タグ内で、次のように <style> タグを使用して新しいスタイルを定義します。

<style name="TextAppearance.Title" parent="TextAppearance.MaterialComponents.Headline6">
</style>

スタイルに名前を付けるときは、スタイル名をセマンティックなものとして考えることが重要です。スタイルが影響するプロパティではなく、スタイルの用途に基づいてスタイル名を選択します。たとえば、このスタイルを LargeFontInGrey ではなく Title と呼びます。このスタイルは、アプリ内の任意の場所にあるタイトルで使用されます。慣例として、TextAppearance スタイルは TextAppearance.Name と呼ばれるため、この場合、名前は TextAppearance.Title になります。

テーマに親を指定できるのと同様に、スタイルにも親を指定できます。ただし、今回はテーマを拡張するのではなく、スタイルがスタイル TextAppearance.MaterialComponents.Headline6 を拡張します。このスタイルは MaterialComponents テーマのデフォルトのテキストスタイルであるため、これを拡張することで、デフォルトのスタイルをゼロから作成するのではなく、変更できます。

新しいスタイル内で、2 つのアイテムを定義します。1 つのアイテムで、textSize を 24sp に設定します。もう一方のアイテムでは、textColor を以前使用したのと同じ濃いグレーに設定します。

 <item name="android:textSize">24sp</item>
 <item name="android:textColor">#555555</item>

字幕の別のスタイルを定義します。TextAppearance.Subtitle という名前を付けます。
TextAppearance.Title との違いはテキストサイズのみであるため、このスタイルを TextAppearance.Title の子にします。
Subtitle スタイル内で、テキストサイズを 18sp に設定します。完成したスタイルは次のとおりです。

<style name="TextAppearance.Subtitle" parent="TextAppearance.Title" >
   <item name="android:textSize">18sp</item>
</style>

ステップ 2: 作成したスタイルを適用する

home_fragment.xml に TextAppearance を追加します。title テキストビューに Title スタイルを適用します。textSize 属性と textColor 属性を削除します。

テーマは、設定した TextAppearance スタイル設定をオーバーライドします。（Codelab の冒頭にあるピラミッド図は、スタイリングが適用される順序を示しています）。textAppearance プロパティを使用して、スタイルを TextAppearance として適用します。これにより、Theme で設定されたフォントがここで設定したフォントをオーバーライドします。

<TextView
       android:id="@+id/title"
       android:textAppearance="@style/TextAppearance.Title"

また、subtitle テキストビューに TextAppearance.Subtitle スタイルを追加し、textSize 属性と textColor 属性を削除します。このスタイルを textAppearance として適用して、テーマで設定されたフォントがここで設定したフォントをオーバーライドするようにする必要があります。

<TextView
       android:id="@+id/subtitle"
       android:textAppearance="@style/TextAppearance.Subtitle"

アプリを実行すると、テキストのスタイルが統一されます。

Android Studio プロジェクト: GDGFinderStyles。

ビューのテーマ、スタイル、属性を使用して、ビューの外観を変更します。
テーマはアプリ全体のスタイルに影響し、色、フォント、フォントサイズに関する多くのプリセット値が用意されています。
属性は、属性が設定されているビューに適用されます。パディング、マージン、制約など、1 つのビューにのみ適用されるスタイルがある場合は、属性を使用します。
スタイルは、複数のビューで使用できる属性のグループです。たとえば、すべてのコンテンツヘッダー、ボタン、テキストビューにスタイルを適用できます。
テーマとスタイルは、親テーマまたはスタイルから継承されます。スタイルの階層を作成できます。
属性値（ビューで設定）はスタイルをオーバーライドします。スタイルはデフォルトのスタイルをオーバーライドします。スタイルはテーマをオーバーライドします。テーマは、textAppearance プロパティで設定されたスタイルをオーバーライドします。

<style> タグと <item> タグを使用して、styles.xml リソースファイルでスタイルを定義します。

<style name="TextAppearance.Subtitle" parent="TextAppearance.Title" >
   <item name="android:textSize">18sp</item>
</style>

ダウンロード可能なフォントを使用すると、APK のサイズを増やすことなく、ユーザーがフォントを利用できるようになります。ビューにダウンロード可能なフォントを追加するには:

[デザイン] タブでビューを選択し、fontFamily 属性のプルダウンメニューから [その他のフォント] を選択します。
[リソース] ダイアログでフォントを見つけて、[ダウンロード可能なフォントを作成] ラジオボタンを選択します。
Android マニフェストにプリロードされたフォントのメタデータタグが含まれていることを確認します。

アプリが初めてフォントをリクエストし、そのフォントがまだ利用可能でない場合、フォントプロバイダはインターネットからフォントをダウンロードします。

Android デベロッパードキュメント:

その他のリソース:

このセクションでは、インストラクター主導のコースの一環として、この Codelab に取り組んでいる生徒向けに考えられる宿題をいくつか示します。インストラクターは、以下のようなことを行えます。

必要に応じて宿題を与える
宿題の提出方法を生徒に伝える
宿題を採点する

インストラクターは、これらの提案を必要なだけ使用し、必要に応じて他の宿題も自由に与えることができます。

この Codelab に独力で取り組む場合は、これらの宿題を自由に使用して知識をテストしてください。

以下の質問に回答してください

問題 1

テーマの定義に使用するタグはどれですか。

▢ <style>

▢ <theme>

▢ <meta-tag>

▢ <styling>

質問 2

次のうち、スタイルの使用例として不適切なのはどれですか。

▢ ビューの制約を指定する。

▢ 見出しの背景色を指定する。

▢ ビューの間でフォントサイズを統一する。

▢ ビューのグループのテキストの色を指定する。

問題 3

テーマとスタイルの違いは何ですか。

▢ テーマはアプリ全体に適用されるが、スタイルは特定のビューに適用できる。

▢ テーマは他のテーマから継承できないが、スタイルは他のスタイルから継承できる。

▢ スタイルは他のスタイルから継承できないが、テーマは他のテーマから継承できる。

▢ テーマは Android システムから提供されるが、スタイルはデベロッパーが定義する。

問題 4

アプリの TextView に、フォントサイズを 12sp に設定する Theme、フォントサイズを 14sp に設定する定義済みスタイル、16sp の fontSize 属性がある場合、画面に表示されるフォントのサイズはどうなりますか？

▢ 12sp

▢ 14sp

▢ 16sp

▢ 18sp

次のレッスンに進む: 10.2: マテリアルデザイン、色調、色

このコースの他の Codelab へのリンクについては、Android Kotlin の基礎の Codelab のランディングページをご覧ください。