チュートリアル: 最初の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 SDKフィールドで正しいJavaバージョンが選択されていることを確認します。

   

   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 フォルダーにドラッグします。このチュートリアルでは、インターネットからこんにちはドロイドイメージをダウンロードし、50x50 pxのサイズで保存しました。

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

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

   

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

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

   

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

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

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

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

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

   

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. フォントサイズを変更します。文字サイズプロパティを見つけて、その横にあるリソースの選択アイコン をクリックします。

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

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

   

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

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

   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ツールバーで、デバイスリストをクリックし、AVD マネージャーを選択します。

   

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

   

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

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

   

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

   

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

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

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

   

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

アプリケーションの実行

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

   

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

   

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