GitHub の Jetpack Compose「Jetchat sample」アプリのダウンロードとビルドを試す

GitHub で掲載されている Jetpack Compose サンプルアプリで、Jetpack Compose の機能を手軽に試すことができる。

Android Studio からサンプルアプリプロジェクトをインポートする手順

プロジェクトをすでに開いている場合は、メニューバーで [File] > [New] > [Import Sample] を選択。

[Browse Samples] ウィザードの最上部の近くにある検索バーに「compose」と入力。
検索結果から Jetpack Compose サンプルアプリのいずれかを選択（ここではJetchat sample）し、[Next] をクリック。

これは、簡単なUIのテストのサンプルになる。

UI状態の管理：Architecture Components（Navigation、Fragment、ViewModel）との連携
戻るボタンの処理：
テキスト入力とフォーカスの管理
多様なアニメーションとトランジション
構成変更（configuration changes）をまたぐ状態の保持
Material Design 3のテーマ設定とMaterial Youのダイナミックカラー
UIテスト

[Application name] と [Project location] を変更するか、デフォルト値のまま（ここではこれを選択）。
[Finish] をクリック。

GitHubからのダウンロードが始まる。

Trust and Open Project “Jetchatsample’？
Android Studio Quall 2 | 2026.1.2 Patch 1 provides features that may execute potentially
malicious code from this folder. lIf you don’t trust the source, preview the project in the
safe mode to only browse its code.
L Trust all projects in ‘AndroidstudioProjects’ folder
Don’t Open
Preview in Safe Mode
Trust Project

プロジェクト「Jetchatsample」を信頼して開きますか？
Android Studio Koala | 2024.1.2 Patch 1 には、このフォルダ内の潜在的に悪意のあるコードを実行する可能性のある機能が含まれています。ソースを信頼できない場合は、セーフモードでプロジェクトをプレビューし、コードの閲覧のみを行ってください。
「AndroidStudioProjects」フォルダ内のすべてのプロジェクトを信頼する
開かない
セーフモードでプレビュー
プロジェクトを信頼する

Trust Projectをクリックして開く。

Project Parallel Sync Update Recommended
Requirements to sync projects in parallel in Android Studio have changed.
To sync this project in parallel, select Enable parallel sync for this project, or
Always enable parallel sync for all projects. Learn more at Android Studio release notes.
Ignore for this project
Cancel
Enable parallel sync for this project

プロジェクトの並列同期に関する更新の推奨
Android Studio でプロジェクトを並列同期するための要件が変更されました。
このプロジェクトを並列同期するには、「このプロジェクトで並列同期を有効にする」または
「すべてのプロジェクトで常に並列同期を有効にする」を選択してください。詳細については、Android Studio のリリースノートをご覧ください。
このプロジェクトでは無視する
キャンセル
このプロジェクトで並列同期を有効にする

ここではEnable parallel sync for this project（このプロジェクトで並列同期を有効にする）をクリック。

指定したパスにサンプルアプリがダウンロードされ、プロジェクトが開く。
完全に読み込むのに時間がかかるので下の進捗バーが止まるのを待つこと。

各サンプルの MainActivity.kt を調べて、クロスフェードアニメーション、カスタムコンポーネント、タイポグラフィの使用、明るい色と暗い色の表示などの Jetpack Compose API を IDE 内プレビューで確認できる。

以下がビルドした画面になる。