チュートリアル: 最初の Android アプリケーションを作成する

プロジェクトの作成

1. IntelliJ IDEA を起動します。ウェルカム画面で、新しいプロジェクトをクリックします。すでにプロジェクトを開いている場合は、メインメニューからファイル | 新規 | プロジェクトを選択します。

2. 新しいプロジェクトウィザードで、左側の Android を選択します。

   Android SDK を構成していない場合、IntelliJ IDEA はこれを検出し、ダウンロードするように求めます。

   

3. インストールするコンポーネントを選択します。以前に Android SDK ツールをインストールしたことがない場合は、必要なすべてのコンポーネントが事前に選択されています。

   必要に応じて、Android SDK の場所を変更し、次へをクリックします。

   

4. インストール設定を確認し、完了をクリックしてダウンロードを開始します。

   

5. すべてのコンポーネントをダウンロードしてインストールしたら、完了をクリックします。

   

6. プロジェクトテンプレートとして空のアクティビティを選択します。

   

7. 最後のステップで、プロジェクト名として HelloDroid を入力し、言語として Java を選択します。

   

プロジェクト JDK を構成する

最初のプロジェクトを作成したため、正しい JDK を使用していることを確認しましょう。

1. ファイル | プロジェクト構造に移動し、プラットフォーム設定 | SDK に移動します。Android SDK を選択し、正しい Java バージョンが Java SDK フィールドで選択されていることを確認します。

   

   IntelliJ IDEA での Android 開発には Java SE 11 または Java SE 8 を使用することをお勧めします。正しい JDK がインストールされていない場合は、プロジェクト構造ダイアログで、ツールバーの新規 SDK の追加ボタン をクリックし、「JDK のダウンロード」を選択します。

   

2. 設定ダイアログ (Ctrl+Alt+S) で、ビルド、実行、デプロイ | ビルドツール | Gradle に移動し、正しい Java バージョン (8.x または 11.x) を選択します。

   

UI デザイナーを開く

1. Android プロジェクトビューで app/res/layout に移動し、activity_main.xml ファイルをダブルクリックして開きます。IntelliJ IDEA はレイアウトファイルのレンダリングに必要なコンポーネントをダウンロードするため、ファイルを開くには数秒かかる場合があります。

   デフォルトでは、IntelliJ IDEA はレイアウトファイルのグラフィカルビューを提供しますが、UI デザイナーペインの右上隅にあるアイコンを使用して、ソースコードビューに切り替えたり、テキストとグラフィカル表現を並べて表示したりすることもできます。:

   

   このペインには、レイアウト定義およびコンポーネントツリーと同期している長方形のキャンバスが表示されるため、キャンバスへの変更はすべてそれに応じて反映されます。

   通常、レイアウトファイルには、ルート要素としてレイアウトマネージャーがあります（たとえば、LinearLayout、FrameLayout、ConstraintLayout など）。この例では、activity_main.xml のルート要素は ConstraintLayout であり、アプリケーションインターフェースの要素の配置を担当します。このチュートリアルでは、これを変更することはしませんが、ConstraintLayout でレスポンシブ UI を構築するからのインターフェースの設計について詳しく学ぶことができます。

2. 煩わしさをなくし、レイアウトがどのように表現されているかだけを確認するには、左上隅にあるデザイン領域の選択アイコンをクリックして、デザインを選択します。

   

3. 次に、既存のテキスト要素を削除します。これを行うには、テキストラベルを右クリックし、コンテキストメニューから削除を選択します。

これで、UI レイアウトは次のようになり、アプリケーションのレイアウトの設計を開始する準備ができました。

UI レイアウトにイメージを追加する

次に、ドロイドイメージをレイアウトに追加します。

1. Android プロジェクトビューで、app/res フォルダーを展開し、使用するイメージを drawable フォルダーにドラッグします。このチュートリアルでは、インターネットから Hello Droid イメージをダウンロードし、50x50 ピクセルのサイズで保存しました。

2. デザイナーペインで開いた activity_main.xml ファイルに戻り、パレットから ImageView 要素を選択し、イメージを表示する位置までキャンバスにドラッグします。

3. 開いたリソースの選択ダイアログで、追加したリソースファイルを選択し、OK をクリックします。

   

4. 次に、後で参照できるように、imageView 要素のデフォルト ID を変更する必要があります。

   コンポーネントツリーおよび右側の属性ペインでそれを選択し、ID フィールドに新しい識別子を入力します: droidImage Enter を押します。開いたダイアログで、イメージ要素 ID へのすべての参照を更新することを確認します。

   

UI レイアウトにテキストを追加する

次に、レイアウトにテキストを追加します。

1. パレットペインで、TextView 要素を選択し、イメージのキャンバスにドラッグします。

   ウィジェットはいくつかのデフォルトテキスト TextView を表示します。これを変更して文字列にリンクするには、新しいテキストリソースを作成する必要があります。

2. 左側のコンポーネントツリーで textView 要素を選択します。右側の属性ペインで、テキスト属性の横にあるリソースの選択アイコンをクリックします。

   

3. 開いたダイアログで、左上隅にあるモジュールにリソースを追加するアイコン をクリックし、文字列値を選択します。

4. 新規文字列値ダイアログで、リソース名（welcome_text）とリソース値（Hello! I'm a droid.）を入力します。

   

5. OK をクリックして値を保存し、リソースの選択ダイアログで OK をクリックします。

6. 次に、imageView で行ったのと同じ方法で textView 要素 ID を変更します。

   左側のコンポーネントツリーで textView を選択し、属性ペインで ID を新しい値 clickCounter に設定します。

テキストにスタイルを追加する

次に、テキストにスタイルを追加して、テキストをより魅力的に見せましょう。

1. テキストを少しパディングします。パディング属性を見つけ、すべての値を 10dp に設定します。

   

2. フォントの色を変更します。textColor 属性を見つけて、その横にあるリソースの選択アイコンをクリックします。

   開いたダイアログで、左上隅にあるモジュールにリソースを追加するアイコン をクリックし、色の値を選択します。

   リソース名（text_color）と値（#9C27B0）を入力します。

   

3. フォントサイズを変更します。TextSize プロパティを見つけて、その横にあるリソースの選択アイコンをクリックします。

   開いたダイアログで、左上隅にあるモジュールにリソースを追加するアイコン をクリックし、寸法値を選択します。

   リソース名（text_size）と値（24sp）を入力します。

   

1. Android プロジェクトビューで、app\java\com.example.hellodroid にある MainActivity ファイルを見つけ、ダブルクリックして開きます。

2. MainActivity はあまり意味のあるクラス名ではないため、名前を変更しましょう。

   Android プロジェクトビューでこのファイルを右クリックし、コンテキストメニューからリファクタリング | 名前の変更を選択するか、Shift+F6 を押します。開いたダイアログで、クラス名 HelloDroidActivity を変更し、リファクタリングをクリックします。

   

   このクラスへの参照はすべて自動的に更新され、アプリケーションのソースコードは次のようになります。

   

3. HelloDroid.java のコードを次のように置き換えます。

   package com.example.hellodroid; import android.os.Bundle; import android.view.View; import android.widget.ImageView; import android.widget.TextView; import androidx.appcompat.app.AppCompatActivity; public class HelloDroidActivity extends AppCompatActivity { private TextView message; private int counter = 0; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); message = findViewById(R.id.clickCounter); ImageView droid = findViewById(R.id.droidImage); //Define and attach click listener droid.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { tapDroid(); } }); } private void tapDroid() { counter++; String countAsText; /* * In real applications you should not write switch like the one below. * Use resource of type "Quantity strings (plurals)" instead. * See https://developer.android.com/guide/topics/resources/string-resource#Plurals */ switch (counter) { case 1: countAsText = "once"; break; case 2: countAsText = "twice"; break; default: countAsText = String.format("%d times", counter); } message.setText(String.format("You touched the droid %s", countAsText)); } }

   ソースコードで使用した識別子は、レイアウト定義ファイルで設定した識別子に対応していることに注意してください。そうでない場合、コードは機能しません。

Android 仮想デバイスを構成する

まず、アプリケーションを実行できるようにするには、仮想デバイスを構成する必要があります。

1. メイン IntelliJ IDEA ツールバーで、デバイスリストをクリックし、デバイスマネージャーを選択します。

2. ウィザードの最初のステップで、仮想デバイスの作成をクリックします。

   

3. 次のステップでは、仮想デバイスがエミュレートするハードウェアを選択する必要があります。

   左側で Phone を選択し、ターゲットデバイスとして Pixel 2 を選択します。

   

4. 仮想デバイスで模倣するシステムイメージを選択します。つまり、OS バージョン、Android API レベル、アプリケーションバイナリインターフェース（ABI）、およびターゲット SDK バージョンです。

   

5. 仮想デバイスで模倣するシステムイメージの横にあるダウンロードリンクをクリックします。このチュートリアルでは、R システムイメージをダウンロードすることを選択しました。

   開いた使用条件ダイアログで、使用許諾契約を読んで同意し、次へをクリックして、ダウンロードが完了するまで待ちます。システムイメージがダウンロードされたら、それを選択し、ウィザードのシステムイメージステップで次へをクリックします。

6. 最後のステップで、仮想デバイス名を変更し、画面の起動サイズと向きを選択できます。縦向きのレイアウトを選択し、完了をクリックします。

   

7. 新しく構成されたデバイスが Android 仮想デバイスマネージャーに表示されます。

アプリケーションの実行

1. メインの IntelliJ IDEA ツールバーで、自動的に作成された実行構成と構成したばかりの仮想デバイスが選択されていることを確認し、 をクリックします。

   

   Android エミュレータは、ビルドが正常に完了した後に起動し、アプリケーションが起動します。

   

2. ドロイドのイメージをクリックして、アプリケーションがタップイベントを処理し、カウントして、対応するメッセージを返す方法を確認します。