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. [Configure your project] ダイアログで、アプリに任意の名前を付けます。言語として [Kotlin] を選択し、[Use AndroidX artifacts] チェックボックスをオンにします。[完了] をクリックします。
  4. アプリをビルドし、エミュレータまたは Android 搭載デバイスで実行します。
  5. 下の図と表で、ラベル付けされた部品を確認します。デバイスまたはエミュレータの画面で同等のものを見つけます。表に記載されている対応する Kotlin コードと XML ファイルを確認します。

Kotlin ソースコードと XML ファイルに精通していると、Basic Activity テンプレートを独自のニーズに合わせて拡張、カスタマイズするのに役立ちます。

Basic Activity テンプレートのアーキテクチャ

#

UI の説明

コード リファレンス

1

Android システムが提供し、制御するステータスバー。

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

2

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

activity_main.xml で、[Toolbar] を探します。

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 は content_main.xml ファイルに記述され、この ViewGroup に含まれます。

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: テンプレートで生成されたアプリをカスタマイズする

Basic Activity テンプレートで作成されたアプリの外観を変更します。たとえば、アプリバーの色をステータスバーに合わせて変更できます。（一部のデバイスでは、ステータスバーはアプリバーで使用されているプライマリ カラーと同じ色の濃い色合いになります）。

  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 はアプリのアクセント カラーを使用するため、FAB の色を変更する方法の 1 つはアクセント カラーを変更することです。アクセント カラーを変更するには、res > values > colors.xml ファイルを開き、次のように colorAccent 属性を変更します。（色の選択については、マテリアル デザインのカラーシステムをご覧ください）。
<color name="colorAccent">#1DE9B6</color>
  1. アプリを実行します。FAB で新しい色が使用され、スナックバーのテキストが変更されています。

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

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

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

GitHub の Google Samples リポジトリには、学習、コピー、プロジェクトへの組み込みが可能な Kotlin Android コードサンプルが用意されています。

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

  1. ブラウザで github.com/googlesamples に移動します。
  2. [言語] で、[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 アプリのランチャー アイコンは、下のスクリーンショットの 1 に示すように、デバイスの [アプリを検索] ウィンドウに表示されます。Android Studio で作成するすべてのアプリ プロジェクトでは、最初はデフォルトのランチャー アイコン（下の図の 2）が使用されます。

ランチャー アイコンを変更する

ランチャー アイコンを変更するプロセスを説明することで、Android Studio の画像アセット機能を紹介します。

Android Studio で Android Sunflower アプリのランチャー アイコンを変更する手順は次のとおりです。

  1. [Project > Android] ペインで、res フォルダを右クリック（または Control+クリック）します。[New] > [Image Asset] を選択します。[Configure Image Asset] ダイアログが表示されます。

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

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

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

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

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

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

ステップ 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. Google Play でアプリを公開する方法については、developer.android.com/distribute/ をご覧ください。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 経由で 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. インストールが完了したら、[完了] をクリックします。

インストールしたドキュメントを見つける手順は次のとおりです。

  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 のランディング ページをご覧ください。