インタラクティブな Dice Roller アプリを作成する

1. 始める前に

この Codelab では、Button をクリックしてサイコロを振る、Dice Roller という Android アプリを作成します。サイコロを振った結果は画面の TextView に表示されます。

まず Android Studio の Layout Editor を使用してアプリのレイアウトを作成します。次に、Button をクリックしたときの動作を定義する Kotlin コードを記述します。

前提条件

Android Studio で「Hello, World!」を作成して実行できる。
アプリの TextViews を扱える。
Layout Editor で TextView の属性を変更できる。
アプリの翻訳や文字列の再利用のために、テキストを文字列リソースに抽出する方法を知っている。
Kotlin プログラミングの基本に習熟している。

学習内容

Android アプリに Button を追加する方法。
アプリ内で Button がタップされたときの動作を追加する方法。
アプリの Activity コードを開いて変更する方法。
Toast メッセージの表示方法。
アプリの実行中に TextView のコンテンツを更新する方法。

作成するアプリの概要

サイコロを振るための Button を備え、出目の結果により画面上のテキストを更新する Dice Roller Android アプリ。

必要なもの

Android Studio がインストールされているパソコン

この Codelab を完了すると、アプリの外観は次のようになります。

2. アプリを設定する

Empty Activity プロジェクトを作成する

Android Studio で既存のプロジェクトをすでに開いている場合は、[File] > [New] > [New Project...] に移動して、[Create New Project] 画面を開きます。
[Create New Project] で [Empty Activity] テンプレートを使用して、新しい Kotlin プロジェクトを作成します。
アプリの名前を「Dice Roller」とし、最小 API レベルに 19（KitKat）を選びます。

新しいアプリを実行すると、次のようになります。

3. アプリのレイアウトを作成する

Layout Editor を開く

[Project] ウィンドウで、activity_main.xml をダブルクリックして開きます（[app] > [res] > [layout] > [activity_main.xml]）。Layout Editor のアプリの中心に「Hello World」TextView だけが表示されます。

次に、Button をアプリに追加します。Button は、ユーザーがタップしてアクションを実行できる、Android のユーザーインターフェース（UI）要素です。

このタスクでは、「Hello World」TextView の下に Button を追加します。TextView と Button は、ViewGroup の一種である ConstraintLayout 内に配置されます。

ViewGroup 内に Views がある場合、Views は親 ViewGroup の子とみなされます。このアプリの場合は、TextView と Button が親 ConstraintLayout の子とみなされます。

このアプリの既存の ConstraintLayout の子として、Button を追加します。

レイアウトにボタンを追加する

Button を [Palette] から [Design] ビューにドラッグし、「Hello World」TextView の下に配置します。

[Component Tree] の [Palette] の下で、Button と TextView が ConstraintLayout の下に（ConstraintLayout の子として）表示されていることを確認します。
Button に制約が設定されていないというエラーが表示されます。Button が ConstraintLayout 内にあるため、水平方向と垂直方向の制約を設定して配置する必要があります。

ボタンの位置を決める

このステップでは、Button の上部から TextView の下部までの垂直方向の制約を追加します。これにより、Button が TextView の下に配置されます。

[Design] ビューで、Button の上端にある青い枠線付きの白い円を長押しします。ポインタをドラッグすると、ポインタの動きに合わせて矢印が表示されます。「Hello World」TextView の下端に達したら離します。これによりレイアウトの制約が確立され、Button は TextView の直下にスライドします。

Layout Editor の右側にある [Attributes] を確認します。
[Constraint Widget] で、TextView の下部に [Top → BottomOf textView (0dp)] という新しいレイアウトの制約が設定されていることを確認します。(0dp) は、マージンが 0 であることを表します。また、水平方向の制約が設定されていないというエラーも表示されています。

水平方向の制約を、Button の左側から親 ConstraintLayout の左側までとして追加します。
右側でもこれを繰り返し、Button の右端を ConstraintLayout の右端に接続します。結果は次のようになります。

Button を選択したままの場合、[Constraint Widget] は次のようになります。新たに [Start → StartOf parent (0dp)] と [End → EndOf parent (0dp)] の 2 つの制約が追加されています。つまり、Button は、その親である ConstraintLayout 内で、水平方向の中央に配置されます。

アプリを実行します。下のスクリーンショットのようになります。Button をクリックすることはできますが、まだ何も行われません。先に進みましょう。

ボタンのテキストを変更する

Layout Editor の UI をさらに少し変更しましょう。

Button のラベルは「Button」ではなく、ボタンが実行する動作を示すように「Roll」に変更します。

Layout Editor で Button が選択された状態で、[Attributes] に移動し、[text] を [Roll] に変更して Enter（Mac では Return）キーを押します。

[Component Tree] の Button の横に、警告を示すオレンジ色の三角形が表示されます。三角形にカーソルを合わせると、メッセージが表示されます。Android Studio がアプリのコード内でハードコードされた文字列（「Roll」）を検出し、代わりに文字列リソースを使用することを提案します。

ハードコードされた文字列を使用すると、アプリは他の言語に翻訳されにくくなるため、アプリの別の部分で文字列を再利用するのが難しくなります。ただし、Android Studio では自動的に修正されるようになっています。

[Component Tree] で、オレンジ色の三角形をクリックします。

警告メッセージの全文が表示されます。

メッセージの下部で、[Suggested Fix] の下にある [Fix] ボタンをクリックします（表示されていない場合は、下にスクロールしてください）。
[Extract Resource] ダイアログが開きます。ここでは文字列を抽出しますが、これは「Roll」というテキストを取り込み、strings.xml（[app] > [res] > [values] > [strings.xml]）に roll という文字列リソースを作成することを意味します。デフォルト値が正しいので、[OK] をクリックします。

[Attributes] で、Button の [text] 属性が @string/roll となりました。これは、先ほど作成したリソースを指しています。

[Design] ビューの Button には、引き続き Roll と表示されるはずです。

TextView のスタイルを設定する

「Hello World!」のテキストは小く表示され、メッセージはアプリに関係がありません。このステップでは、小さな「Hello, World!」メッセージを出目の値を示す数字に置き換え、見やすいようにフォントを大きくします。

Design Editor で TextView を選択すると、その属性が [Attributes] ウィンドウに表示されます。
TextView の [textSize] を 36sp に変更すると、サイズが大きく読みやすくなります。[textSize] が表示されていない場合は、下にスクロールします。

TextView の [text] 属性をクリアします。TextView には、ユーザーがサイコロを振るまで何も表示する必要はありません。

ただし、アプリのレイアウトとコードを編集する際に TextView でテキストを確認できると非常に便利です。この目的のために、レイアウトプレビューでのみ表示されるテキストを TextView に追加できます。このテキストはアプリの実行時には表示されません。

[Component Tree] で TextView を選択します。
[Common Attributes] の下にある [text] 属性を見つけます。その下に、もう 1 つの [text] 属性がツールアイコンとともに表示されます。[text] 属性は、アプリの実行中にユーザーに表示される属性です。ツールアイコン付きの [text] 属性は、デベロッパーのみを対象とする「ツールテキスト」の属性です。
TextView のツールテキストを「1」に設定します（サイコロを振って 1 の目が出たと仮定します）。この「1」は、Android Studio 内の Design Editor にのみ表示され、実際のデバイスやエミュレータでアプリを実行するときには表示されません。

このテキストはアプリデベロッパーのみに表示されるものであるため、文字列リソースを作成する必要はありません。

プレビューでアプリを確認します。「1」が表示されます。

アプリを実行します。エミュレータ上でアプリを実行すると、次のようになります。「1」は表示されません。これは正しい動作です。

これで、レイアウトの変更が完了しました。

アプリにボタンは付いていますが、このボタンをタップしても何も起こりません。これを変えるには、ボタンがタップされるとサイコロを振って画面を更新する Kotlin コードを作成する必要があります。

こうした変更を行うにあたっては、Android アプリの構成をもう少し詳しく理解しておくことが必要となります。

4. アクティビティの概要

アプリは Activity の提供するウィンドウで UI を描画します。通常、Activity は実行中のアプリの画面全体に表示されます。各アプリには 1 つ以上のアクティビティがあります。最上位または最初のアクティビティは MainActivity と呼ばれ、プロジェクトテンプレートで提供されます。たとえば、ユーザーがデバイス上のアプリのリストをスクロールして「Dice Roller」のアプリアイコンをタップすると、Android システムはアプリの MainActivity を起動します。

MainActivity コードで、Activity のレイアウトの詳細と、ユーザーがレイアウトを操作する方法を指定する必要があります。

誕生日カードアプリには、誕生日のメッセージと画像を表示する Activity が 1 つあります。
Dice Roller アプリには、作成した TextView と Button のレイアウトを表示する Activity が 1 つあります。

より複雑なアプリでは、複数の画面と Activity が存在する場合があります。各 Activity には特定の目的があります。

たとえば、フォトギャラリーアプリでは、1 つ目の Activity で写真のグリッドを表示し、2 つ目の Activity で個々の写真を表示し、3 つ目の Activity で個々の写真を編集する、といった使い方ができます。

MainActivity.kt ファイルを開く

ボタンタップに応答するコードを MainActivity に追加します。これを正しく行うには、アプリにすでに存在する MainActivity コードについて理解を深める必要があります。

MainActivity.kt ファイル（[app] > [java] > [com.example.diceroller] > [MainActivity.kt]）に移動して開きます。次のように表示されます。import... が表示された場合は、... をクリックしてインポートを展開します。

package com.example.diceroller

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

class MainActivity : AppCompatActivity() {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)
   }
}

上記のコードの個々の単語をすべて理解する必要はありませんが、概要は理解しておく必要があります。Android コードを使うほど、コードに慣れて理解が深まります。

Kotlin コードの MainActivity クラスを確認します。これはキーワード class と名前で識別できます。

class MainActivity : AppCompatActivity() {
    ...
}

MainActivity には main() 関数はありません。

以前に、すべての Kotlin プログラムに main() 関数が必要であることを学びました。Android アプリの動作は異なります。main() 関数を呼び出す代わりに、アプリの初回起動時に Android システムが MainActivity の onCreate() メソッドを呼び出します。

下記のような onCreate() メソッドのコードを見つけます。

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)
   }

override については、後の Codelab で説明します（この段階では気にしないでください）。onCreate() メソッドの残りの部分では、インポートのコードを使用し、setContentView() で開始レイアウトを設定することにより、MainActivity を設定しています。

import で始まる行に注目してください。

Android には、Android アプリを容易に記述できる多数のクラスのフレームワークが用意されていますが、どのクラスを指しているのかを Android に正確に伝える必要があります。コード内で使用するフレームワークのクラスを指定するには、import ステートメントを使用します。たとえば、Button クラスは android.widget.Button で定義されています。

自動インポートを有効にする

多くのクラスを使用する場合、忘れずに import ステートメントを追加するのが困難になる場合があります。幸いなことに、Android Studio では、他のクラスで提供されるクラスを使用するときに、適切なインポートを選択できるようになっています。このステップでは、Android Studio の設定により、可能な場合にはインポートが自動的に追加されて、使用していないインポートがコードから自動的に削除されるように指定します。

macOS の場合、[File] > [New Project Settings] > [Preferences for New Projects...] に移動して設定を開きます。[Other Settings] > [Auto Import] を展開します。[Java] セクションと [Kotlin] セクションで、[Add unambiguous imports on the fly] チェックボックスと [Optimize imports on the fly (for current project)] チェックボックスがオンになっていることを確認します。チェックボックスは、それぞれのセクションに 2 つあります。[OK] を押し、変更内容を保存して設定を閉じます。

Windows の場合、[File] > [Settings] > [Editor] > [General] > [Auto Import] に移動して設定を開きます。[Java] セクションと [Kotlin] セクションで、[Add unambiguous imports on the fly] チェックボックスと [Optimize imports on the fly (for current project)] チェックボックスがオンになっていることを確認します。チェックボックスは、それぞれのセクションに 2 つあります。[OK] を押し、変更内容を保存して設定を閉じます。

[Add unambiguous imports on the fly] チェックボックスをオンにすると、使用する import ステートメントが Android Studio で決定可能であれば、自動的に import ステートメントが追加されます。[Optimize imports on the fly (for current project)] チェックボックスをオンにすると、コードで使用されていないインポートがすべて削除されます。

5. ボタンをインタラクティブにする

MainActivity について少し詳しく学んだところで、今度は Button をクリックすると画面上でなんらかの動作が行われるようにアプリを修正します。

ボタンがクリックされたときにメッセージを表示する

このステップでは、ボタンがクリックされたときに、画面の下部に簡単なメッセージを表示するように設定します。

onCreate() メソッドの setContentView() 呼び出しの後に、次のコードを追加します。findViewById() メソッドは、レイアウト内の Button を検出します。R.id.button は、Button のリソース ID で、一意の識別子です。

val rollButton: Button = findViewById(R.id.button)

このコードは、Button オブジェクト自体ではなく、Button オブジェクトへの参照を rollButton という変数に保存します。

onCreate() メソッドは次のようになります。

override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)

   val rollButton: Button = findViewById(R.id.button)
}

Button の import ステートメントが自動的に追加されたことを確認します。現在、import ステートメントが 3 つとなっています。

import android.os.Bundle
import android.widget.Button
import androidx.appcompat.app.AppCompatActivity

次に、コードを Button に関連付けて、Button がタップされたときにコードを実行できるようにする必要があります。クリックリスナーとは、タップやクリックの発生時に行う処理が記述されたコードです。これは、ユーザーが（この場合は Button）をクリックするのを単に「リッスン」するためのコードと考えることができます。

rollButton オブジェクトを使用し、setOnClickListener() メソッドを呼び出してクリックリスナーを設定します。実際には、メソッド名の後のかっこではなく、メソッド名の後の中かっこを使用します。これは、Lambda を宣言するための特別な構文です。これについては今後、Codelab で詳しく説明します。

中かっこ内には、ボタンがタップされたときに行う動作についての命令を記述する必要があります。アプリにトーストを表示させ、次のステップに関する簡単なメッセージを表示できます。

rollButton.setOnClickListener {
}

Android Studio では、文字を入力すると複数の候補が表示されることがあります。ここでは、「setOnClickListener {...}」を選択します。

中かっこ内には、ボタンがタップされたときに行う動作についての命令を記述します。ここでは、アプリで Toast（ユーザーに表示される簡単なメッセージ）を表示します。

Toast.makeText() を呼び出して、"Dice Rolled!" というテキストを含む Toast を作成します。

val toast = Toast.makeText(this, "Dice Rolled!", Toast.LENGTH_SHORT)

次に、show() メソッドを呼び出して、そのテキストを表示するように Toast に指示します。

toast.show()

更新後の MainActivity クラスは次のようになります。package ステートメントと import ステートメントは、まだファイルの先頭にあります。

class MainActivity : AppCompatActivity() {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)

       val rollButton: Button = findViewById(R.id.button)
       rollButton.setOnClickListener {
           val toast = Toast.makeText(this, "Dice Rolled!", Toast.LENGTH_SHORT)
           toast.show()
       }
   }
}

クリックリスナーの 2 行は、変数を使わずに 1 行にまとめることもできます。これは他のコードで見られる一般的なパターンです。

Toast.makeText(this, "Dice Rolled!", Toast.LENGTH_SHORT).show()

アプリを実行し、[Roll] ボタンをクリックします。トーストメッセージが画面の下部にポップアップ表示され、しばらくすると消えます。

これで、ボタンをクリックするとメッセージがポップアップ表示されるようになりました。今回、初めて Android 用の Kotlin コードを記述したことになります。

ボタンがクリックされたときに TextView を更新する

一時的な Toast メッセージを表示する代わりに、[Roll] ボタンがクリックされたときに画面上の TextView を更新するコードを記述します。

activity_main.xml に戻ります（[app] > [res] > [layout] > [activity_main.xml]）。
[TextView] をクリックします。
[id] が [textView] となっています。

MainActivity.kt を開きます（[app] > [java] > [com.example.diceroller] > [MainActivity.kt]）。
Toast を作成して表示するコード行を削除します。

rollButton.setOnClickListener {

}

代わりに、resultTextView という新しい変数を作成して、TextView を格納します。
findViewById() を使用して、ID でレイアウト内の textView を見つけて、それに対する参照を格納します。

val resultTextView: TextView = findViewById(R.id.textView)

resultTextView のテキストを「6」に設定し、引用符で囲みます。

resultTextView.text = "6"

これは、[Attributes] の [text] を設定したときに行った操作に似ていますが、コード内で設定する場合は二重引用符で囲む必要があります。ここではテキストを明示的に設定しているため、TextView は常に 6 を表示します。次のタスクで、サイコロを振ってさまざまな値を表示するコードを追加します。

MainActivity クラスは次のようになります。

class MainActivity : AppCompatActivity() {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)

       val rollButton: Button = findViewById(R.id.button)
       rollButton.setOnClickListener {
           val resultTextView: TextView = findViewById(R.id.textView)
           resultTextView.text = "6"
       }
   }
}

アプリを実行してボタンをクリックすると、TextView が「6」に更新されるはずです。

6. サイコロを振るためのロジックを追加する

あとは、実際にサイコロを振る処理だけが必要です。前の Codelab で使用した Dice クラスを再利用すれば、サイコロを振るためのロジックを処理できます。

Dice クラスを追加する

MainActivity クラスの最後の中かっこの後に、roll() メソッドを含む Dice クラスを作成します。

class Dice(val numSides: Int) {

   fun roll(): Int {
       return (1..numSides).random()
   }
}

Android Studio では、numSides にグレーの波線で下線が引かれます（表示されるまでしばらく時間がかかる場合があります）。
numSides にカーソルを合わせると、「Property 'numSides' could be private」というポップアップが表示されます。

numSides を private としてマークすると、Dice クラス内でのみアクセスできるようになります。numSides を使用するコードは Dice クラス内にしかないため、この引数を Dice クラス用に private に設定してもかまいません。次のユニットで、private 変数と public 変数について詳しく学習します。

そのまま [Make 'numSides' 'private'] をクリックして、Android Studio から提案された修正を加えます。

rollDice() メソッドを作成する

Dice クラスをアプリに追加したので、使用できるように MainActivity を更新します。コードを適切に整理するために、サイコロを振ることに関するすべてのロジックを 1 つの関数にまとめます。

クリックリスナーでテキストを「6」に設定しているコードを、rollDice() の呼び出しに置き換えます。

rollButton.setOnClickListener {
   rollDice()
}

rollDice() がまだ定義されていないため、Android Studio でエラーとなり、rollDice() が赤色で表示されます。
rollDice() にカーソルを合わせると、該当の問題とその解決策がいくつか表示されます。

[More actions...] をクリックするとメニューが表示され、そこから他のアクションを行うことができます。

[Create function 'rollDice'] を選択します。Android Studio により、MainActivity 内の関数に空の定義が作成されます。

private fun rollDice() {
    TODO("Not yet implemented")
}

Dice の新しいオブジェクトインスタンスを作成する

このステップでは、rollDice() メソッドでサイコロを作成し、サイコロを振り、その結果を TextView に表示します。

rollDice() 内で、TODO() 呼び出しを削除します。
6 面のサイコロを作成するコードを追加します。

val dice = Dice(6)

roll() メソッドを呼び出してサイコロを振り、その結果を diceRoll という変数に保存します。

val diceRoll = dice.roll()

findViewById() を呼び出して TextView を見つけます。

val resultTextView: TextView = findViewById(R.id.textView)

変数 diceRoll は数値ですが、TextView はテキストを使用します。diceRoll で toString() メソッドを使用すると、文字列に変換できます。

diceRoll を文字列に変換し、その文字列を使用して resultTextView のテキストを更新します。

resultTextView.text = diceRoll.toString()

rollDice() メソッドは次のようになります。

private fun rollDice() {
    val dice = Dice(6)
    val diceRoll = dice.roll()
    val resultTextView: TextView = findViewById(R.id.textView)
    resultTextView.text = diceRoll.toString()
}

アプリを実行します。サイコロの出目の結果が 6 以外の値に変わることを確認します。出目は 1 から 6 までの乱数であるため、値が 6 になることもあります。

想定どおりの結果が出れば、メソッドは正しく動作しています。

7. 適切なコーディング慣習を採用する

アプリを動作させるためにコードのあちこちを調整した結果、コードの見た目が多少乱雑になるのはよくあることです。ただし、コードの編集を終える前に、簡単なクリーンアップタスクを実行することをおすすめします。そうすることでアプリが良好な状態になり、今後のメンテナンスもしやすくなります。

プロの Android デベロッパーは、コードを作成する際に習慣としてクリーンアップを実践しています。

Android スタイルガイド

チームで作業を行う際には、コード間で一貫性が保たれるように、全員が同様の方法でコードを記述することをおすすめします。そのために、Android には、Android コードの記述方法（命名規則、形式、他のおすすめの方法など）をまとめたスタイルガイドが用意されています。Android コードの記述にあたっては、Android デベロッパー向けの Kotlin スタイルガイドのガイドラインに従ってください。

次に、スタイルガイドに沿ってコードを作成する方法をいくつか紹介します。

コードをクリーンアップする

コードを圧縮する

コードの行数を減らすことで、コードを簡略化できます。例として、Button にクリックリスナーを設定するコードを以下に示します。

rollButton.setOnClickListener {
    rollDice()
}

クリックリスナーの命令は 1 行だけなので、rollDice() メソッド呼び出しと中かっこをすべて 1 行にまとめることができます。次のように、3 行から 1 行に圧縮できます。

rollButton.setOnClickListener { rollDice() }

コードを再フォーマットする

次に、コードの形式を Android の推奨コード形式に合わせて再フォーマットします。

MainActivity.kt クラスで、Windows のキーボードショートカット Control+A（Mac の場合は Command+A）を使用して、ファイル内のすべてのテキストを選択します。または、Android Studio のメニューの [Edit] > [Select All] で選択することもできます。
ファイル内のすべてのテキストを選択した状態で、Android Studio のメニューで [Code] > [Reformat Code] を選択するか、キーボードショートカット Ctrl+Alt+L（Mac の場合は Command+Option+L）を使用します。

これにより、空白文字やインデントなど、コードの形式が更新されます。変化がなくても問題ありません。その場合、コードはすでに正しい形式になっています。

コードにコメントを追加する

作成したコードの機能や意図を説明するために、コードにコメントを追加します。コードが複雑になるにつれて、コードをそのように記述した理由を書き留めておくことが重要になります。後でコードを見直して変更を加える場合、コードの機能は明確に覚えていても、コードをそのように記述した理由は思い出せない可能性があります。

一般的には、クラス（このアプリで使用するクラスは MainActivity と Dice のみ）とメソッドごとにコメントを追加します。コメントの先頭と末尾に /** と */ の記号を使用すると、それがコードではないことをシステムに示すことができます。システムがコードを実行する際、これらの行は無視されます。

クラスに関するコメントの例:

/**
* This activity allows the user to roll a dice and view the result
* on the screen.
*/
class MainActivity : AppCompatActivity() {

メソッドに関するコメントの例:

/**
* Roll the dice and update the screen with the result.
*/
private fun rollDice() {

メソッド内にも、コードが読みやすくなるのであればコメントを自由に追加できます。コメントの先頭には // 記号を使用します。行の // 記号の後はすべてコメントと見なされます。

メソッド内の 2 つのコメントの例:

private fun rollDice() {
   // Create new Dice object with 6 sides and roll it
   val dice = Dice(6)
   val diceRoll = dice.roll()

   // Update the screen with the dice roll
   val resultTextView: TextView = findViewById(R.id.textView)
   resultTextView.text = diceRoll.toString()
}

実際にコードにコメントを追加してみてください。
このようにコメントの追加や形式の変更を行った後には、アプリを再度実行し、想定どおりに動作するか確認することをおすすめします。

コメント方法のご参考までに、解答コードをご覧ください。

8. 解答コード

この Codelab の解答コードは、以下に示すプロジェクトとモジュールにあります。

この Codelab のコードを取得して Android Studio で開くには、以下の手順に沿って操作します。

コードを取得する

指定された URL をクリックします。プロジェクトの GitHub ページがブラウザで開きます。
ブランチ名と Codelab で指定したブランチ名が一致していることを確認します。たとえば、次のスクリーンショットでは、ブランチ名は main です。

プロジェクトの GitHub ページで、[Code] ボタンをクリックすると、ポップアップが表示されます。

ポップアップで、[Download ZIP] をクリックして、プロジェクトをパソコンに保存します。ダウンロードが完了するまで待ちます。
パソコンに保存したファイルを見つけます（[ダウンロード] フォルダなど）。
ZIP ファイルをダブルクリックして展開します。プロジェクトファイルが入った新しいフォルダが作成されます。

Android Studio でプロジェクトを開く

Android Studio を起動します。
[Welcome to Android Studio] ウィンドウで、[Open] をクリックします。

注: Android Studio がすでに開いている場合は、メニューから [File] > [Open] を選択します。

ファイルブラウザで、展開したプロジェクトフォルダがある場所（[ダウンロード] フォルダなど）に移動します。
そのプロジェクトフォルダをダブルクリックします。
Android Studio でプロジェクトが開かれるまで待ちます。
実行ボタンをクリックして、アプリをビルドし、実行します。期待どおりにビルドされることを確認します。

9. まとめ

Layout Editor を使用して Android アプリに Button を追加します。
MainActivity.kt クラスを変更して、アプリにインタラクティブな動作を追加します。
試しに Toast メッセージをポップアップして、正しく機能することを確認してください。
setOnClickListener() を使用して Button に on-click リスナーを設定し、Button がクリックされたときの動作を追加します。
アプリの実行中に、レイアウト内の TextView や Button などの UI 要素のメソッドを呼び出して、画面を更新できます。
コードにコメントを書くことで、他のデベロッパーがコードを読むときに作成者の意図を理解しやすくなります。
コードの再フォーマットとクリーンアップを行います。

10. 詳細

Kotlin での Android の基礎に関する用語
Button クラス
Toast クラス
TextView クラス
Android デベロッパー向けの Kotlin スタイルガイド

11. 自習用練習問題

次のことを行います。

アプリにもう 1 つサイコロを追加します。[Roll] ボタンを押すと 2 つのサイコロが振られ、結果が 2 つの異なる TextViews で画面に表示されるようにします。

確認:

完成したアプリがエラーなく実行でき、アプリに 2 つのサイコロが表示されるはずです。