Android Kotlin の基礎 01.4: 問題の解決方法を学ぶ

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

はじめに

この Codelab では、Kotlin Android デベロッパーに役立つリソース（テンプレート、ドキュメント、動画、サンプルアプリなど）について学びます。

前提となる知識

  • Android Studio の基本的なワークフロー。
  • Android Studio で Layout Editor を使用する方法

学習内容

  • Kotlin と Android のデベロッパー向けの情報とリソースを見つける方法
  • アプリのランチャー アイコンを変更する方法。
  • Kotlin を使用して Android アプリをビルドするときにサポートを探す方法。

演習内容

  • すべてのレベルの Kotlin Android デベロッパーが利用できるリソースをご覧ください。
  • Kotlin Android サンプルアプリをダウンロードして、試してみる。
  • アプリのランチャー アイコンを変更する。

この Codelab では、Kotlin Android デベロッパーが使用できるテンプレート、サンプル、ドキュメント、その他のリソースについて学習します。

まず、Android Studio テンプレートからシンプルなアプリを作成し、アプリを変更します。次に、Android Sunflower サンプルアプリをダウンロードして詳細を確認します。サンプルアプリのランチャー アイコン（ヒマワリ）を、Android Studio 内で利用可能なクリップアート画像アセット（スマイリーフェイス）に置き換えます。

Android Studio には、アプリとアクティビティの一般的および推奨設計用のテンプレートが用意されています。組み込みのテンプレートは、時間を節約し、デザインのベスト プラクティスに従うのに役立ちます。

各テンプレートには、スケルトン アクティビティとユーザー インターフェースが組み込まれています。このコースではすでに Empty Activity テンプレートを使用しています。基本アクティビティ テンプレートには多くの機能が搭載されており、Android 搭載デバイスのアプリバーに表示されるオプション メニューなど、おすすめのアプリ機能が組み込まれています。

ステップ 1: Basic Activity アーキテクチャを確認する

  1. Android Studio でプロジェクトを作成します。
  2. [Choose your project] ダイアログで [Basic Activity] テンプレートを選択し、[Next] をクリックします。
  3. [プロジェクトの設定] ダイアログで、アプリに名前を付けます。言語に [Kotlin] を選択し、[Use AndroidXartifact] チェックボックスをオンにします。[Finish] をクリックします。
  4. アプリをビルドして、エミュレータまたは Android 搭載デバイスで実行します。
  5. 図と表でラベル付きの部分を確認します。対応するデバイスまたはエミュレータ画面で、対応する言語を探します。表内の対応する Kotlin コードと XML ファイルを調べます。

Kotlin ソースコードと XML ファイルに精通していることで、自分のニーズに合わせて Basic Activity テンプレートを拡張およびカスタマイズできるようになります。

基本アクティビティ テンプレートのアーキテクチャ

#

UI の説明

コード リファレンス

1

ステータスバー。Android システムが提供し、管理します。

テンプレートのコードには表示されませんが、アクティビティからステータスバーにアクセスできます。たとえば、MainActivity.kt にコードを追加して、必要に応じてステータスバーを非表示にすることができます。

2

アプリバー（アクション バーとも呼ばれます）は、視覚的な構造、標準化された視覚要素、ナビゲーションを提供します。

activity_main.xml で、ツールバーを探します。

AppBarLayout 要素内下位互換性を確保するために、テンプレートの AppBarLayout には、ActionBar と同じ機能を備えた Toolbar が埋め込まれています。

アプリバーの外観を変更するには、ツールバーの属性を変更します。アプリバーのチュートリアルについては、アプリバーの追加をご覧ください。

3

アプリ名は、最初はパッケージ名に基づいていますが、任意の名前に変更できます。

AndroidManifest.xml で次の情報を探します。

android:label="@string/app_name"

strings.xml に app_name 文字列を指定します。

4

オプション メニュー オーバーフロー ボタンには、アクティビティのメニュー項目が保持されます。オーバーフロー ボタンには、アプリの検索や設定などのグローバル メニュー オプションも表示されます。アプリのメニュー項目は、このメニューに移動します。

MainActivity.kt で、

onOptionsItemSelected() メソッドは、ユーザーがメニュー項目を選択したときの動作を実装します。

オプション メニューの項目を表示するには、res/menu/menu_main.xml を開きます

。このテンプレートでは [Settings] メニュー項目のみが指定されています。

5

CoordinatorLayout ViewGroup は、UI 要素が操作するためのメカニズムを提供するレイアウトです。アプリの UI は、この ViewGroup に含まれる content_main.xml ファイル内にあります。

activity_main.xml で include layout 命令を探します。このレイアウトではビューが指定されていません。その代わりに、レイアウトに content_main レイアウトが含まれており、ここでアプリのビューが指定されています。システムビューは、アプリ固有のビューとは別に保持されます。

6

テンプレートでは、TextView を使用して「Hello World」と表示します。この TextView をアプリの UI 要素に置き換えます。

「Hello World」のテキストビューは content_main.xml ファイルにあります。アプリの UI 要素はすべて、このファイルで定義する必要があります。

7

フローティング操作ボタン（FAB）

activity_main.xml で FloatingActionButton 要素を探します。FAB は、クリップアート アイコンを使用する UI 要素として定義されます。MainActivity.kt は、FAB の onClick() リスナーを設定するスタブを onCreate() に含めます。

ステップ 2: テンプレートが生成するアプリをカスタマイズする

基本アクティビティ テンプレートによって生成されたアプリの外観を変更する。たとえば、アプリバーの色をステータスバーに合わせて変更できます。（一部のデバイスでは、ステータスバーがアプリバーと同じプライマリ カラーで濃い色合いになっています）。

  1. アプリバーに表示されるアプリの名前を変更します。これを行うには、res > values > strings.xml ファイルの app_name 文字列リソースを以下のように変更します。
<string name="app_name">New Application</string>
  1. res > layout > activity_main.xml 内で android:background 属性を "?attr/colorPrimaryDark" に変更して、アプリバー（Toolbar）の色を変更する。この値は、アプリバーの色を、ステータスバーと同じ濃いプライマリ カラーに設定します。
android:background="?attr/colorPrimaryDark"
  1. アプリを実行すると、アプリの新しい名前がステータスバーに表示され、アプリバーの背景色はステータスバーの色とより暗くなります。FAB をクリックすると、スナックバーが下のスクリーンショットに 1 のように表示されます。
  2. スナックバーのテキストを変更する。これを行うには、MainActivity を開き、ボタンに onClick() リスナーを設定するスタブコードを onCreate() で探します。"Replace with your own action" を別のものに変更します。次に例を示します。
fab.setOnClickListener { view ->
   Snackbar.make(view, "This FAB needs an action!", Snackbar.LENGTH_LONG)
       .setAction("Action", null).show()
}
  1. FAB ではアプリのアクセント カラーが使用されるため、アクセント カラーを変更するのも 1 つの手段です。アクセント カラーを変更するには、res > values > color.xml ファイルを開き、以下のように colorAccent 属性を変更します。（色の選択については、マテリアル デザインのカラーシステムをご覧ください）。
<color name="colorAccent">#1DE9B6</color>
  1. アプリを実行します。FAB は新しい色を使用し、スナックバーのテキストは変更されました。

ステップ 3: テンプレートを使用してアクティビティを追加する方法を確認する

このコースの Codelab では、空のアクティビティと基本的なアクティビティ テンプレートを使用して新しいプロジェクトを開始しました。また、プロジェクトを作成した後にアクティビティを作成する際に、アクティビティ テンプレートを使用することもできます。

  1. アプリ プロジェクトを作成するか、既存のプロジェクトを選択します。
  2. [Project > Android] ペインで、[java] フォルダを右クリックします。
  3. [New > Activity] > Gallery を選択します。
  4. Activity テンプレートのいずれかを選択して、アプリにアクティビティを追加します。たとえば、ナビゲーション ドロワーを含む Activity を追加するには、[Navigation Drawer Activity] を選択します。
  5. Layout Editor にアクティビティを表示するには、アクティビティのレイアウト ファイル（activity_main2.xml など）をダブルクリックします。アクティビティのレイアウト プレビューとレイアウト コードを切り替えるには、[Design] タブと [Text] タブを使用します。

GitHub の Google サンプル リポジトリには、Kotlin Android コードサンプルが用意されており、学習してコピーしてプロジェクトに組み込むことができます。

ステップ 1: Kotlin Android コードサンプルをダウンロードして実行する

  1. ブラウザで github.com/googlesamples に移動します。
  2. [Language] で [Kotlin] を選択します。
  3. 最近変更された Kotlin Android サンプルアプリを選択し、アプリのプロジェクト コードをダウンロードします。この例では、Android Jetpack のコンポーネントを示す android-sunflower アプリの zip ファイルをダウンロードします。
  4. Android Studio で android-sunflower-master プロジェクトを開きます。
  5. Android Studio が推奨するアップデートを受け入れてから、エミュレータまたは Android 搭載デバイスでアプリを実行します。

ステップ 2: Kotlin Android コードサンプルを利用する

Android Studio で Android Sunflower サンプルアプリが開いたので、このアプリについて学習し、プロジェクト ファイルを確認しましょう。

  1. サンプルアプリのデモでは、GitHub にあるアプリの README ファイルをご覧ください。例については、Android Sunflower の README をご覧ください。
  2. Android Studio で、Kotlin アクティビティ ファイルのいずれか（例: GardenActivity.kt）を開きます。
  3. GardenActivity.kt で、デベロッパーがよく知らないクラス、型、プロシージャを見つけて、Android デベロッパー向けドキュメントで探します。たとえば、setContentView() メソッドの詳細については、developer.android.com で setContentView() を検索してください。

ステップ 3: ランチャー アイコンを変更する

このステップでは、Android Sunflower サンプルアプリのランチャー アイコンを変更します。クリップアートの画像を追加して、現在の Android Sunflower ランチャーのアイコンの代わりに使用します。

ランチャー アイコン

Android Studio で作成した各アプリは、アプリを表すデフォルトのランチャー アイコンから始まります。ランチャー アイコンは、アプリアイコンまたはプロダクト アイコンとも呼ばれます。

Google Play でアプリを公開すると、アプリのランチャー アイコンが Google Play ストアのアプリの掲載情報と検索結果に表示されます。

アプリが Android 搭載デバイスにインストールされると、アプリのランチャー アイコンがデバイスのホーム画面などに表示されます。たとえば、Android Sunflower アプリのランチャー アイコンは、デバイスの [Search Apps] ウィンドウに表示されます（下のスクリーンショットに 1 が表示されます）。下記のランチャー 2 に示すデフォルトのランチャー アイコンは、Android Studio で作成したすべてのアプリ プロジェクトで最初に使用されます。

ランチャー アイコンの変更

ランチャー アイコンを変更すると、Android Studio の画像アセット機能が表示されます。

Android Studio で Android Sunflower アプリのランチャー アイコンを変更する方法は以下のとおりです。

  1. [Project > Android] ペインで、res フォルダを右クリック（または Ctrl キーを押しながらクリック）します。[新しい画像アセット] を選択します。[Configure Image Asset] ダイアログが表示されます。

ランチャー アイコンの [Foreground Layer] タブをクリックします。

  1. [Icon Type] フィールドで、[Launcher Icons (Adaptive & Legacy)] を選択します（まだ選択されていない場合）。[Foreground Layer] タブをクリックします。
  2. [Asset Type] で [Clip Art] を選択します（下のスクリーンショットで 1 と表示されます）。

  3. [Clip Art] 欄のロボット アイコンをクリックします（上のスクリーンショットに 2 が表示されています）。[Select Icon] ダイアログが表示され、マテリアル デザインのアイコンセットが表示されます。
  4. [Select Icon] ダイアログを参照するか、名前でアイコンを検索します。気分を示すアイコン（ムード アイコンなど）を選択します。[OK] をクリックします。

  1. [Configure Image Asset] ダイアログで [Background Layer] タブをクリックします。[Asset Type] で [Color] を選択します。カラーチップをクリックし、アイコンの背景レイヤとして使用する色を選択します。
  2. [レガシー] タブをクリックして、デフォルト設定を確認します。レガシー アイコン、ラウンド アイコン、Google Play ストアアイコンを生成することを確認します。[Next] をクリックします。
  3. [Confirm Icon Path] ダイアログが表示され、アイコン ファイルの追加と上書きの場所が示されます。[Finish] をクリックします。
  4. AVD エミュレータまたは Android 搭載デバイスでアプリを実行します。

Android Studio は、さまざまな画面密度の mipmap ディレクトリにランチャー画像を自動的に追加します。Android Sunflower アプリでは、新しいクリップアート アイコンが起動アイコンとして使用されるようになりました。

  1. アプリを再度実行すると、[Search Apps] 画面に新しいランチャー アイコンが表示されていることを確認します。

ステップ 1: Android 公式ドキュメントを見る

特に便利な Android のドキュメント サイトを確認して、何が役立つかを把握しましょう。

  1. developer.android.com にアクセスします。Android の公式デベロッパー向けドキュメントは、Google によって最新の状態に保たれています。
  2. developer.android.com/design/ にアクセスします。このサイトでは、高品質の Android アプリのデザインに関するガイドラインをご確認いただけます。
  3. マテリアル デザインのサイト material.io に移動します。マテリアル デザインは、Android アプリだけでなくすべてのアプリがモバイル デバイスでどのように外観、機能するかを示す概念設計思想です。マテリアル デザインについて詳しくは、各ガイドをご覧ください。たとえば、色の使い方については、[デザイン] タブをクリックして [色] を選択してください。
  4. developer.android.com/docs/ では、API 情報、リファレンス ドキュメント、チュートリアル、ツールガイド、コードサンプルをご覧いただけます。
  5. developer.android.com/distribute/ にアクセスして、Google Play でのアプリの公開に関する情報をご確認ください。Google Play は、Android SDK を使用して開発されたアプリ向けの Google のデジタル配信システムです。Google Play Console を使用してユーザーを増やし、収益の獲得を始めます。

ステップ 2: Android チームと Google 検索のコンテンツを確認する

  1. Android デベロッパー YouTube チャンネルでは、さまざまなチュートリアルやヒントをご覧いただけます。
  2. Android 公式ブログをご覧ください。Android チームがニュースやヒントを投稿しています。
  3. Google 検索に質問を入力すると、Google 検索エンジンはさまざまなリソースから関連する検索結果を収集します。たとえば、Google 検索を使用して、「インドで一番人気の Android OS バージョンは何ですか？」と質問します。Google 検索では、エラー メッセージを入力することもできます。

ステップ 3: Stack Overflow で検索する

Stack Overflow は、お互いを助け合うプログラマーのコミュニティです。問題が発生した場合は、すでに回答が投稿されている可能性があります。

  1. Stack Overflow をご覧ください。
  2. 検索ボックスに「Wi-Fi over ADB をセットアップして使用する方法」のように質問を入力します。Stack Overflow では登録せずに検索できますが、新しい質問を投稿したり質問に答えたりするには、登録が必要です。
  3. 検索ボックスに「[android]」と入力します。かっこ（[]）は、Android に関するタグが付いている投稿を検索することを示します。
  4. タグと検索キーワードを組み合わせることで、検索結果をより具体的に指定できます。次の検索を試してみてください。
  • [android] and [layout]
  • [android] "hello world"

ステップ 4: SDK Manager を使用してオフライン ドキュメントをインストールする

Android Studio をインストールすると、Android SDK の必須コンポーネントが一緒にインストールされます。使用可能なその他のライブラリとドキュメントをインストールするには、SDK Manager を使用します。

SDK Manager の詳細と SDK ドキュメントのダウンロード手順は次のとおりです。

  1. Android Studio で、[Tools > SDK Manager] を選択します。SDK Manager が開きます。
  2. SDK Manager の左側の列で、[Android SDK]（下のスクリーンショットの 1）を選択します。
  3. [Android SDK Location] フィールドのパス（下のスクリーンショットの 2 つ）をメモします。後でインストールする際にこのパスを使用します。
  4. SDK Manager で、[SDK Platforms] タブをクリックします。ここから、Android システムのさらに多くのバージョンをインストールできます。
  5. [SDK Tools] タブをクリックします。ここから、デフォルトでインストールされていない SDK デベロッパー ツールをインストールできます。Android デベロッパー向けドキュメントのオフライン版をインストールすることもできます。
  6. [SDK Update Sites] タブをクリックします。Android Studio は、リストにあるサイトと選択したサイトを定期的にチェックします。
  7. [SDK Tools] タブに戻り、[Documentation for Android SDK] チェックボックスをオンにします（まだ選択していない場合）。[適用] をクリックします。

    ダウンロード ダイアログに必要なディスク容量が表示されます。[OK] をクリックします。
  8. インストールが完了したら、[Finish] をクリックします。

インストールしたドキュメントを見つけるには、次の手順を行います。

  1. パソコンで Android/sdk/ ディレクトリに移動します。（このディレクトリへのパスについては、上のスクリーンショットで 2 が表示されている [Android SDK Location] をご覧ください）。
  2. docs/ ディレクトリを開きます。
  3. index.html ファイルを見つけて、ブラウザで開きます。
  • Android デベロッパー向けの公式ドキュメントについては、developer.android.com をご覧ください。
  • マテリアル デザインは、モバイル デバイスでアプリの外観と機能を規定する概念設計の思想です。マテリアル デザインは Android アプリだけのものではありません。マテリアル デザイン ガイドラインは material.io にあります。
  • Android Studio には、アプリとアクティビティの一般的および推奨設計用のテンプレートが用意されています。これらのテンプレートは、一般的なユースケース向けの実用的なコードを提供します。
  • プロジェクトを作成するときに、最初のアクティビティのテンプレートを選択できます。
  • アプリの開発中に、組み込みのテンプレートからアクティビティやその他のアプリ コンポーネントを作成できます。
  • Google サンプルには、研究してコピーし、プロジェクトに組み込むことができるコードサンプルが含まれています。

Udacity コース:

Android Studio のドキュメント:

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

コードサンプル

動画:

その他のリソース:

次のレッスンを開始する: 2.1: Layout Editor を使った線形レイアウト

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