Jetpack Compose を使用すると、デザイン システムを簡単に実装できます。また、テーマ設定やコンポーネントなどにより、一貫性のあるデザインをアプリに施すことができます。
以降のページでは、デザイン システムを設計および実装する方法について詳しく説明します。
- マテリアル デザイン 3: Compose のマテリアル デザイン 3 の実装によって Material You を実装する方法について説明します。
- マテリアル 2 からマテリアル 3 に移行する: Compose でアプリをマテリアル デザイン 2 からマテリアル デザイン 3 に移行する方法について説明します。
- カスタム デザイン システム: Compose でカスタム デザイン システムを実装する方法と、カスタム デザイン システムを処理するために既存のマテリアル デザイン コンポーザブルを調整する方法について説明します。
- テーマの構造:
MaterialThemeとカスタム デザイン システムによって使用される下位レベルの構造と API について説明します。 - XML テーマを Compose に移行する: ビューベースの XML テーマを Compose に移行する方法について説明します。
サンプル
次のサンプルは、Jetpack Compose のデザイン システムを示しています。
Jetsnack is a sample snack ordering app built with Jetpack Compose.
To try out this sample app, use the latest stable version of Android Studio. You can clone this repository or import the project from Android Studio following the steps here.
This Jetnews is a sample news reading app, built with Jetpack Compose. The goal of the sample is to showcase the current UI capabilities of Compose.
To try out this sample app, use the latest stable version of Android Studio. You can clone this repository Jetcaster is a sample podcast app, built with Jetpack Compose. The goal of the sample is to showcase building with Compose across multiple form factors (mobile, TV, and Wear) and full featured architecture.
To try out this sample app, use the latest Jetchat is a sample chat app built with Jetpack Compose.
To try out this sample app, use the latest stable version of Android Studio. You can clone this repository or import the project from Android Studio following the steps here.
This sample Learn how this app was designed and built in the design case study, architecture learning journey and modularization learning journey.
This is the repository for the Now in Android app. It is a work in progress 🚧.
Now in Android is a fully functionalJetsnack sample
Jetnews sample
Jetcaster sample 🎙️
Jetchat sample
Now in Android App
