compose-samples README

The project's README from github.com/android/compose-samples. As one markdown file: README.md.

Jetpack Compose Samples

Jetpack Compose Samples

This repository contains a set of individual Android Studio projects to help you learn about Compose in Android. Each sample demonstrates different use cases, complexity levels and APIs.

For more information, please read the documentation.

💻 Requirements

To try out these sample apps, you need to use Android Studio. You can clone this repository or import the project from Android Studio following the steps here.

🧬 Samples

Project

JetNews

A sample blog post viewer that demonstrates the use of Compose with a typical Material app and real-world architecture.

• Medium complexity
• Varied UI
• Light & dark themes
• Resource loading
• UI Testing

> Browse

Jetnews sample demo

Jetchat

A sample chat app that focuses on UI state patterns and text input.

• Low complexity
• Material Design 3 theme and Material You dynamic color
• Resource loading
• Back button handling
• Integration with Architecture Components: Navigation, Fragments, LiveData, ViewModel
• Animation
• UI Testing

> Browse

Jetchat sample demo

Jetsnack

Jetsnack is a sample snack ordering app built with Compose.

• Medium complexity
• Custom design system
• Custom layouts
• Animation

> Browse

Jetsnack sample demo

Jetcaster

A sample podcast app that features a full-featured, Redux-style architecture and showcases dynamic themes.

• Advanced sample
• Dynamic theming using podcast artwork
• Image fetching
• WindowInsets support
• Coroutines
• Local storage with Room

> Browse

Jetcaster sample demo

Reply

A compose implementation of the Reply material study, an email client app that focuses on adaptive design for mobile, tablets and foldables. It also showcases brand new Material design 3 theming, dynamic colors and navigation components.

• Medium complexity
• Adaptive UI for phones, tablet and desktops
• Foldable support
• Material 3 theming & Components
• Dynamic colors and Light/Dark theme support

> Browse

Reply sample demo

JetLagged

A sample sleep tracker app, showcasing how to create custom layouts and graphics in Compose

• Custom Layouts
• Graphs with Paths

> Browse

JetLagged sample demo

🧬 Additional samples

Project

Now in Android

An app for keeping up to date with the latest news and developments in Android.

• Jetpack Compose first app.
• Implements the recommended Android Architecture Guidelines
• Integrates Jetpack Libraries holistically in the context of a real world app


> Browse

Now In Android Github Repository

Material Catalog

A catalog of Material Design components and features available in Jetpack Compose. See how to implement them and how they look and behave on real devices.

• Lives in AOSP—always up to date
• Uses the same samples as API reference docs
• Theme picker to change Material Theming values at runtime
• Links to guidelines, docs, source code, and issue tracker


> Browse on AOSP

Material Catalog sample demo

High level features

Looking for a sample that has the following features?

Custom Layouts

Theming

Animations

Text

Large Screens

TV

Wear

Formatting

To automatically format all samples: Run ./scripts/format.sh To check one sample for errors: Navigate to the sample folder and run ./gradlew spotlessCheck To format one sample: Navigate to the sample folder and run ./gradlew spotlessApply

Updates

To update dependencies to their new stable versions, run:

./scripts/updateDeps.sh

Any other version updates need to be made individually.

Obsolete Sample Projects

Over time some of our samples become a little stale and are removed to keep the repository easy to navigate. If you are curious you can still find them in the history, however if you are new you might be better served sticking to the most up to date resources.

Project Removed Commit
Crane 2024-08-02 ee8e272
Owl 2024-08-02 ee8e272
Jetsurvey 2024-08-02 ee8e272
Rally 2024-08-02 ee8e272

License

Copyright 2024 The Android Open Source Project

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    https://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

compose-samples (android/compose-samples)

Searching Database…

这是什么?这是 Google 官方提供的 Jetpack Compose 示例应用合集,Jetpack Compose 是新一代的 Android 界面开发工具包。每个示例都是一个独立的 Android Studio 项目,展示不同的使用场景、复杂度级别和 API。
这是一个应用,还是一堆各自独立的项目?是一堆各自独立的项目:每个示例都是单独的应用,需要分别打开和运行,从简单的博客文章阅读器到功能完整的播客客户端都有。
怎么把其中一个跑起来?先安装 Android Studio,然后要么克隆这个仓库,要么直接从 Android Studio 里导入项目,再在模拟器或真机上运行示例。
除了 Android Studio 还需要装别的东西吗?不需要——README 里写明的唯一要求就是 Android Studio。每个示例都是标准的 Gradle 项目,所以打开并构建时其他依赖都会自动下载好。
仓库里的内容都还是最新的吗?不是——为了保持仓库结构清晰,过时的示例会被移除:Crane、Owl、Jetsurvey 和 Rally 都已在 2024 年 8 月移除,现在只能到 git 历史记录里找到它们。
这些示例是适合新手,还是面向有经验的开发者?两者都有:Jetchat 标注为低复杂度,Jetsnack 和 Reply 是中等,而 Jetcaster 播客应用属于高级——采用 Redux 风格的架构,用到了协程和 Room 做本地存储。
这些只能在 Android 上运行,还是也能在桌面端跑?它们面向 Android——手机、平板和折叠屏设备:Reply 邮件客户端就是专门为在这些屏幕之间做自适应设计而开发的,Jetcaster 还提供 TV 和 Wear 版本。
里面包含哪些应用?六个主要示例:JetNews(博客文章阅读器)、Jetchat(聊天应用)、Jetsnack(带自定义设计系统的小吃点单应用)、Jetcaster(播客播放器)、Reply(自适应邮件客户端),以及一个用于展示自定义布局和图表的睡眠记录应用,另外还有一个新闻应用和一个 Material 组件目录。
它们演示了哪些 Compose 技术?自定义布局和图形(Jetsnack 的网格、睡眠记录应用的 Path 图表)、主题(Material 3、自定义设计系统、根据播客封面提取的动态取色)、动画、可下载字体,以及基于窗口尺寸类别的大屏适配。
有没有示例能在一个地方看到所有 Material 组件?有——一个 Material Design 组件目录,它托管在 AOSP 里,所以始终保持最新,并且和 API 参考文档使用相同的示例。它还带一个主题选择器,可以在运行时修改 Material Theming 的各项取值。
如果我改动某个示例,怎么保持代码格式规范?运行 ./scripts/format.sh 可以一次性格式化所有示例;也可以在某个示例文件夹内用 ./gradlew spotlessCheck 查找格式问题,再用 ./gradlew spotlessApply 修复。
Creator
android
Size
206.7 MB
Stars
23.5K
Age
7y
Commits · 90 Days