学ぶこと
- Kotlin および Android の開発者向け情報とリソースの入手先
- アプリのランチャーアイコンを変更する方法
- Kotlin をしようして Android アプリ構築をしている時にヘルプを探す方法
やること
- 全てのレベルの Kotlin Android 開発者が利用できるリソースのいくつかを調べます
- Kotlin Android サンプルアプリをダウンロードして探します
- アプリのランチャーアイコンを変更します
アプリの概要
今回のコードラボでは、Kotlin Android開発者が利用できるテンプレート、サンプル、ドキュメント、その他のリソースについて学びます。
まず、Android Studio テンプレートからシンプルなアプリを作成し、アプリを変更します。次に、Android Sunflower サンプルアプリを調べて、ダウンロードします。サンプルアプリのランチャーアイコンを、Android Studio 内で利用できるクリップアートの画像アセットに置き換えます。
プロジェクトテンプレートを使用する
Android Studio には、一般的に推奨されるアプリとアクティビティのデザイン用のテンプレートが用意されています。用意されているテンプレートは時間を節約し、設計のベストプラクティスに従うのに役立ちます。
各テンプレートには、Skeleton Activity と User Interface が組み込まれています。前回のコースで空の Activity Template は既に使用しました。Basic Activity Template には、より多くの機能があり、Android搭載デバイスのアプリバーに表示されるオプションメニューなど、推奨される機能が組み込まれています。
Basic Activity architecture を調べる
Android Studio でプロジェクトを作成します
Select a Project Template ダイアログで、
Basic Activityを選択して Next をクリックしますConfigure your project ダイアログで、アプリに適当な名前をつけます。言語に Kotlin を選択し、Use AndroidX artifacts チェックボックスをオンにします(僕のバージョンの Android Studio ではこのチェックボックスはなかったので、デフォルトでオンになっているのでしょうか🤔)。Finish をクリックします。
下の図と表でラベルの付いた部分を確認します。エミュレータ画面で同等の UI を見つけます。表に記載されている通り対応する Kotlin コードと XML ファイルを調べます。
| UI の説明 | コードリファレンス | |
|---|---|---|
| 1 | Android システムが提供および制御するステータスバー | テンプレートコードには表示されませんが、Activity からステータスバーにアクセスできます。たとえば、MainActivity.kt にコードを追加して、必要に応じてステータスバーを非表示にすることができます。 |
| 2 | アプリバーはアクションバーとも呼ばれ、視覚的な構造、標準化された視覚要素、およびナビゲーションを提供します | activity_main.xml ファイルの AppBarLayout 内で ToolBar 要素を探します。下位互換性のために、テンプレートの AppBarLayout には、ActionBar と同じ機能を持つ Toolbar が埋め込まれています。アプリバーの外観を変更するには、ツールバーの属性を変更します。アプリバーのチュートリアルについては、アプリバーを追加するをご覧ください。 |
| 3 | アプリ名は、最初パッケージ名から派生しますが、好きなように変更できます | AndroidManifest.xml で android:label="@string/app_name" を探します。リソースファイルの strings.xml 内の app_name で名前を変更できます。 |
| 4 | オプションメニューのオーバーフローボタンは、Activity のメニュー項目を保持します。オーバーフローボタンは、アプリの検索や設定などグローバルメニューオプションも保持します。アプリのメニュー項目はこのメニューに入ります | MainActivity.kt 内の onOptionsItemSelected() メソッドは、ユーザがメニュー項目を選択した時に何が起こるかを定義します。オプションメニュー項目を表示するには、res/menu/menu_main.xml を開きます。このテンプレートでは、Settings メニュー項目のみが指定されています。 |
| 5 | CoordinatorLayout ViewGroup は、UI 要素が相互作用するためのメカニズムを提供するレイアウトです。アプリの UI は、この ViewGropu に含まれている content_main.xml ファイル内にあります。 |
activity_main.xml で、include レイアウトの指示を探します。このレイアウトでは View は指定されていません。代わりに、レイアウトには content_main レイアウトが含まれ、アプリの View が指定されます。システム View は、アプリ固有の View とは別に保持されます。 |
| 6 | テンプレートは TextView を使用して「Hellow World」を表示します。この TextView をアプリの UI 要素に置き換えます |
「Hellow World」TextView は content_main.xml ファイルにあります。アプリの全ての UI 要素をこのファイルで定義する必要があります。 |
| 7 | フローティングアクションボタン(FAB) | activity_main.xml ファイルで FloatingActionButton 要素を探します。FAB は、クリップアートアイコンを使用する UI 要素として定義されます。 |
テンプレートが生成するアプリをカスタマイズする
Basic Activity Template によって作成されたアプリの外観を変更します。例えば、ステータスバーと一致するようにアプリバーの色を変更できます。(一部のデバイスでは、ステータスばーは、アプリバーで使用する色の濃い色になります。)
- アプリバーに表示されるアプリの名前を変更します。これを行うには、res>values>strings.xml ファイルの
app_name文字列リソースを次のように変更します。
<string name="app_name">New Application</string>
res > layout > activity_main.xml内にあるandroid:background属性を"?attr/colorPrimaryDark"に変更して、アプリバー(ToolBar)の色を変更します。この値は、アプリバーの色を、ステータスバーと一致する暗い原色に設定します。
android:background="?attr/colorPrimaryDark"
- アプリを実行します。アプリの新しい名前がステータスバーに表示され、アプリバーの背景色が暗くなり、ステータスバーの色と一致します。FAB をクリックすると、スナックバーが表示され、下記のスクリーンショットでは１として表示されています。
- スナックバーのテキストを変更します。これを行うには、
MainActivityを開き、ボタンのonClick()リスナーを設定するスタブコードを探します。"Replace with your own action"を別の文言に変更してみます。
fab.setOnClickListener { view ->
Snackbar.make(view, "This FAB needs an action!", Snackbar.LENGTH_LONG)
.setAction("Action", null).show()
}
- FAB はアプリのアクセントカラーを使用するため、FAB のカラーを変更する１つの方法は、アクセントカラーを変更することです。アクセントカラーを変更するには、次に示すように、
res>values>colors.xmlファイルを開き、colorAccent属性を変更します。(色の選択については、Material Design color system を参照してください。)
<color name="colorAccent">#1DE9B6</color>
- アプリを実行します。FAB は新しい色を使用し、スナックバーのテキストが変更されました。
リソースにアクセスするための XML 構文の詳細については、アプリリソースへのアクセスをご覧ください。
テンプレートを使用して Activity を追加する方法を調べる
これまで、このコースのコードラボでは、Empty Activity と Basic Activity を使用して新しいプロジェクトを開始しました。プロジェクトの作成後に Activity を作成する時に、Activity Template を使用することもできます。
アプリプロジェクトを作成するか既存のプロジェクトを選択します。
Project>Androidペインで、java フォルダーを右クリックします。New>Activity>Galleryを選択します。Activity Template を１つ選択して、アプリに Activity を追加します。
レイアウトエディターに Activity を表示するには、Activity のレイアウトファイル(例:
activity_main2.xml)をダブルクリックします。
サンプルコードから学ぶ
Github の GoogleSample リポジトりには、勉強・コピー・プロジェクトへの組み込みが可能な Kotlin Android コードサンプルが用意されています。
Kotlin Android コードサンプルをダウンロードして実行する
ブラウザで、https://github.com/android に移動します
言語でKotlinを選択します
最近変更された Kotlin Android サンプルアプリを選択し、アプリのプロジェクトコードをダウンロードします。今回の例では、android-sunflower アプリの zip ファイルをダウンロードします。これは、Android Jetpack のコンポーネントの一部を示しています。
Android Studio で、android-sunflower-master プロジェクトを開きます。
Android Studio が推奨する更新を受け入れ、エミューレーターまたは Android 搭載デバイスでアプリを実行します。
※ Github の Google Samples リポジトリに含まれるサンプルは、開発の出発を促進する意図があります。これらのサンプルに独自のアイデアを設計して組み込むことをお勧めします。
Kotlin Android コードサンプルを探索する
Android Studio で Android Sunflower サンプルアプリを開いたので、アプリについて学び、そのプロジェクトファイルを調べます。
サンプルアプリのでも詳細については、Github にあるアプリの README ファイルにアクセスしてください。
Android Studio で、アプリなどの Kotlin Activity ファイルを１つ開きます。
GardenActivity.ktで、馴染みのないクラス、タイプ、またはプロシージャを見つけ、Android 開発者向けドキュメントで調べます。たとえば、setContentView()メソッドの詳細を確認するには、developer.android.com で検索してsetContetnView()) を見つけます。
ランチャーアイコンを変更する
このステップでは、Android Sunflower サンプルアプリのランチャーアイコンを変更します。クリップアートイメージを追加し、それを使用して現在の Android Sunflower ランチャーアイコンを置き換えます。
ランチャーアイコン
Android Studio で作成する各アプリは、アプリを表すデフォルトのランチャーアイコンで始まります。ランチャーアイコンは、アプリアイコンまたは製品アイコンと呼ばれることもあります。
アプリを GooglePlay で公開すると、アプリのランチャーアイコンがアプリのリストと GooglePlay ストアの検索結果に表示されます。
アプリが Android 搭載デバイスにインストールされると。アプリのランチャーアイコンがデバイスのホーム画面などのデバイスのどこかに表示されます。たとえば、Android Sunflower アプリのランチャーアイコンがデバイスの Search App ウィンドに表示されます(下のスクリーンショットでは１と表示されています)。下の２の示すデフォルトのランチャーアイコンは、Android Studio で作成する全てのアプリプロジェクトで最初に使用されます。
ランチャーアイコンを変更する
Android Studio で、Android Sunflower アプリのランチャーアイコンを変更する方法は次の通りです。
Project>Androidペインで、resフォルダーを右クリックします。New>Image Assetを選択します。Configure Image Asset ダイアログが表示されます。
Icon Type フィールドで、まだ選択されていない場合はLauncher Icons(Adaptive & Legacy) を選択します。Foregroud Layer タブをクリックします。
Asset Type として、下のスクリーンショットで1として示されているクリップアートを選択します。
上のスクリーンショットで2として示されている Clip Art フィールドのロボットアイコンをクリックします。Select Icon ダイアログが表示され、マテリアルデザインのアイコンセットが示されます。
Select Icon ダイアログを参照するか、アイコンを名前で検索します。ムードアイコンなどのアイコンを選択して、OK をクリックします。
Configure Image Asset ダイアログで、Background Layer タブをクリックします。Asset Type として Color を選択します。カラーチップをクリックし、アイコンの背景レイヤーとして使用する色を選択します。
Legacy タブをクリックして、デフォルト設定を確認します。レガシー、ラウンド、および GooglePlay ストアのアイコンを生成することを確認します。Next をクリックします。
Confirm Icon Path ダイアログが表示され、アイコンファイルが追加および上書きされる場所が示されます。Finish をクリックします。
エミュレーターでアプリを実行します。
Android Sunflower アプリは、新しいクリップアートアイコンを起動アイコンとして使用するようになりました。
※ 効果的なランチャーアイコンのデザインについては、マテリアルデザイン製品のアイコンガイドをご覧ください。
- アプリをもう一度実行して、アプリの検索画面に新しいランチャーアイコンが表示されていることを確認します。
ドキュメントやその他のリソースを調べる
Android 公式ドキュメントを調べる
最も役立つ Android ドキュメントサイトのいくつかを調べ、利用可能なものに慣れます。
developer.android.com にアクセスします。この公式の Android開発者向けドキュメントは、Google によって最新に保たれています。
developer.android.com/design/ にアクセスします。このサイトは、高品質の Android アプリの外観と機能を設計するためのガイドラインを提供します。
Material Design に関するサイトである material.io にアクセスします。マテリアルデザインは、Android アプリだけでなく、全てのアプリがモバイルデバイスでどのように表示され、機能するかを概説する概念的な設計哲学です。Material Design についてはリンクにアクセスしてください。たとえば、色の使い方を学ぶには Design タブをクリックし、Color を選択します。
developer.android.com/docs/ にアクセスして、API 情報、リファレンスドキュメント、チュートリアル、ツールガイド、コードサンプルを見つけてください。
GooglePlay でのアプリの公開に関する情報を見つけるには、developer.android.com/distribute/ にアクセスしてください。GooglePlay は、Android SDK で開発されたアプリ向けの Google のデジタル配信システムです。GooglePlayConsole を使用してユーザベースを拡大し、収益 を上げましょう。
Android チームと Google 検索のコンテンツを探す
チュートリアルやヒントの優れた情報源である Android Developer YouTube chanel をご覧ください。
Android チームがニュースやヒントを投稿している 公式のAndroidBlog にアクセスしてください。
スタックオーバーフロー検索する
Stack Overflow は、互いに助け合うプログラマーのコミュニティです。問題が発生した場合、誰かがすでに回答を投稿している可能性が高くなります。
※ Stack Overflow で検索するさまざまな方法の詳細については、Stack Overflow ヘルプセンター をご覧ください。
まとめ
Android 開発者向けの公式ドキュメントは developer.android.com にあります。
Material Design は、アプリがモバイルデバイスでどのように表示され機能するかを概説する概念設計哲学です。マテリアルデザインは、Android アプリだけのものではありません。マテリアルデザインのガイドラインは material.io にあります。
Android Studio には、一般的に推奨されるアプリとアクティビティのデザイン用のテンプレートが用意されています。これらのテンプレートは、一般的な枠組みを作成するための作業時間を短縮してくれます。
プロジェクトを作成する時に、Activity のテンプレートを選択できます。
アプリの開発中に、組み込みテンプレートから Activity やその他のアプリコンポーネントを作成できます。
Google Sample には、勉強・コピー・プロジェクトへの組み込みが可能なコードサンプルが含まれています。
