Top Related Projects
Compose Multiplatform, a modern UI framework for Kotlin that makes building performant and beautiful user interfaces easy and enjoyable.
Epoxy is an Android library for building complex screens in a RecyclerView
A collection of extension libraries for Jetpack Compose
A powerful image downloading and caching library for Android
An image loading and caching library for Android focused on smooth scrolling
A declarative framework for building efficient UIs on Android.
Quick Overview
The android/compose-samples repository is a collection of official sample apps showcasing Jetpack Compose, Android's modern toolkit for building native UI. These samples demonstrate best practices, provide examples of various UI components and patterns, and serve as learning resources for developers adopting Compose in their Android applications.
Pros
- Comprehensive collection of real-world examples using Jetpack Compose
- Regularly updated to reflect the latest Compose features and best practices
- Covers a wide range of UI patterns and use cases
- Provides a valuable learning resource for both beginners and experienced developers
Cons
- May be overwhelming for absolute beginners due to the complexity of some samples
- Requires a good understanding of Android development and Kotlin
- Some samples may not cover all edge cases or production-level optimizations
- Limited documentation within the samples themselves, relying on code comments for explanations
Code Examples
Here are a few short code examples from different samples in the repository:
- Creating a custom composable function (from JetNews sample):
@Composable
fun PostCardTop(
post: Post,
modifier: Modifier = Modifier
) {
val typography = MaterialTheme.typography
Column(
modifier = modifier
.fillMaxWidth()
.padding(16.dp)
) {
Text(
text = post.title,
style = typography.h6,
modifier = Modifier.padding(bottom = 8.dp)
)
Text(
text = post.metadata.author.name,
style = typography.body2
)
}
}
- Implementing a custom theme (from Jetchat sample):
@Composable
fun JetchatTheme(
isDarkTheme: Boolean = isSystemInDarkTheme(),
content: @Composable () -> Unit
) {
val colors = if (isDarkTheme) {
DarkColorPalette
} else {
LightColorPalette
}
MaterialTheme(
colors = colors,
typography = Typography,
shapes = Shapes,
content = content
)
}
- Using Compose with ViewModel (from Jetsurvey sample):
@Composable
fun Survey(
onSurveyComplete: () -> Unit,
onNavigation: () -> Unit,
viewModel: SurveyViewModel = viewModel()
) {
val uiState by viewModel.uiState.collectAsState()
when (uiState) {
is SurveyState.Questions -> SurveyQuestionScreen(
questions = (uiState as SurveyState.Questions).questions,
onAction = { action -> viewModel.handleSurveyAction(action) },
onNavigation = onNavigation
)
is SurveyState.Result -> SurveyResultScreen(
result = (uiState as SurveyState.Result),
onDonePressed = onSurveyComplete
)
}
}
Getting Started
To get started with the Jetpack Compose samples:
- Clone the repository:
git clone https://github.com/android/compose-samples.git
- Open the project in Android Studio Arctic Fox or later.
- Select a specific sample app from the project structure.
- Build and run the selected sample on an emulator or physical device.
For more detailed instructions, refer to the README.md file in each sample's directory.
Competitor Comparisons
Compose Multiplatform, a modern UI framework for Kotlin that makes building performant and beautiful user interfaces easy and enjoyable.
Pros of compose-multiplatform
- Supports multiple platforms (Android, iOS, desktop) with a single codebase
- Leverages Kotlin Multiplatform for shared business logic
- Provides a unified UI framework across platforms
Cons of compose-multiplatform
- Less mature ecosystem compared to Android-specific Compose
- May have performance overhead due to cross-platform abstraction
- Limited access to platform-specific features without additional work
Code Comparison
compose-samples (Android-specific):
@Composable
fun Greeting(name: String) {
Text(text = "Hello $name!")
}
compose-multiplatform:
@Composable
expect fun PlatformSpecificGreeting(name: String)
@Composable
fun Greeting(name: String) {
PlatformSpecificGreeting(name)
}
Summary
compose-multiplatform offers cross-platform development capabilities, allowing developers to target multiple platforms with a single codebase. However, it may have limitations in terms of platform-specific features and performance compared to the Android-specific compose-samples. The code structure in compose-multiplatform often requires platform-specific implementations, while compose-samples focuses solely on Android development.
Epoxy is an Android library for building complex screens in a RecyclerView
Pros of Epoxy
- Mature library with extensive documentation and community support
- Works well with existing XML-based layouts and Java/Kotlin codebases
- Offers powerful data binding and view holder caching mechanisms
Cons of Epoxy
- Steeper learning curve compared to Jetpack Compose
- Requires more boilerplate code for complex UI structures
- Less flexible for dynamic UI changes compared to declarative approaches
Code Comparison
Epoxy:
class HeaderModel(
@EpoxyAttribute var title: String
) : EpoxyModelWithHolder<HeaderHolder>() {
override fun bind(holder: HeaderHolder) {
holder.titleView.text = title
}
override fun getDefaultLayout(): Int = R.layout.header_item
}
Compose Samples:
@Composable
fun Header(title: String) {
Text(
text = title,
style = MaterialTheme.typography.h6
)
}
The Epoxy example demonstrates the more verbose approach of creating a custom model and binding data to views, while the Compose example showcases the concise, declarative nature of Jetpack Compose for creating UI components.
A collection of extension libraries for Jetpack Compose
Pros of Accompanist
- Focuses on providing additional libraries and utilities for Jetpack Compose
- Offers more specialized components like pagers, placeholder, and navigation-animation
- Regularly updated with new features and improvements
Cons of Accompanist
- Smaller scope compared to the comprehensive examples in compose-samples
- May require additional setup and dependencies for specific features
- Less beginner-friendly, as it assumes more familiarity with Compose
Code Comparison
Accompanist (Pager implementation):
val pagerState = rememberPagerState()
HorizontalPager(
count = 10,
state = pagerState,
) { page ->
Text(text = "Page: $page")
}
compose-samples (Basic list implementation):
LazyColumn {
items(10) { index ->
Text(text = "Item: $index")
}
}
Summary
Accompanist provides specialized libraries for Jetpack Compose, offering more advanced components and utilities. compose-samples, on the other hand, focuses on providing comprehensive examples and best practices for building apps with Compose. While Accompanist is great for developers looking for specific enhancements, compose-samples serves as a better starting point for those learning Compose or seeking reference implementations.
A powerful image downloading and caching library for Android
Pros of Picasso
- Lightweight and focused on image loading and caching
- Easier to integrate into existing projects without major architectural changes
- More mature and stable, with a longer history of production use
Cons of Picasso
- Limited to image handling, not a comprehensive UI toolkit
- Less modern approach compared to Jetpack Compose's declarative UI
- Fewer built-in animation and layout capabilities
Code Comparison
Picasso (image loading):
Picasso.get()
.load("https://example.com/image.jpg")
.into(imageView)
Compose Samples (image loading):
Image(
painter = rememberImagePainter("https://example.com/image.jpg"),
contentDescription = "Sample Image"
)
Summary
Picasso is a specialized library for efficient image loading and caching in Android applications. It's lightweight and easy to integrate into existing projects. Compose Samples, on the other hand, showcases Jetpack Compose, a modern toolkit for building native Android UIs. While Compose offers a more comprehensive approach to UI development with declarative syntax and built-in components, Picasso remains a solid choice for projects primarily focused on image handling or those not ready to adopt a new UI paradigm.
An image loading and caching library for Android focused on smooth scrolling
Pros of Glide
- Mature and widely adopted image loading library with extensive documentation
- Efficient memory and disk caching for improved performance
- Supports a wide range of image formats and sources
Cons of Glide
- Not specifically designed for Jetpack Compose
- Requires more boilerplate code compared to Compose's built-in image loading
- May have a steeper learning curve for developers new to Android
Code Comparison
Glide:
Glide.with(context)
.load(imageUrl)
.placeholder(R.drawable.placeholder)
.error(R.drawable.error)
.into(imageView)
Compose-samples:
AsyncImage(
model = imageUrl,
contentDescription = null,
placeholder = painterResource(R.drawable.placeholder),
error = painterResource(R.drawable.error)
)
Summary
Glide is a powerful image loading library for Android, offering robust features and optimizations. However, Compose-samples showcases modern Android development using Jetpack Compose, providing more concise and declarative UI code. While Glide excels in traditional Android development, Compose-samples demonstrates the simplicity and power of Compose for building user interfaces, including image loading capabilities.
A declarative framework for building efficient UIs on Android.
Pros of Litho
- Mature and battle-tested in large-scale production environments
- Efficient recycling and reuse of UI components
- Strong focus on performance optimization for complex UIs
Cons of Litho
- Steeper learning curve due to its unique approach
- Less intuitive API compared to Jetpack Compose
- Limited community resources and third-party libraries
Code Comparison
Litho:
@LayoutSpec
class MyComponentSpec {
@OnCreateLayout
static Component onCreateLayout(ComponentContext c) {
return Text.create(c)
.text("Hello, Litho!")
.textSizeDip(20)
.build();
}
}
Compose:
@Composable
fun MyComponent() {
Text(
text = "Hello, Compose!",
fontSize = 20.sp
)
}
Key Differences
- Litho uses a declarative API with Java annotations, while Compose uses Kotlin and a more functional approach
- Litho requires a separate build step for code generation, whereas Compose does not
- Compose offers a more intuitive and concise syntax for UI development
- Litho provides fine-grained control over performance optimizations, while Compose handles many optimizations automatically
Use Cases
- Litho: Large-scale apps with complex UIs and strict performance requirements
- Compose: Modern Android apps prioritizing developer productivity and ease of use
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
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 | |
---|---|
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 | |
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 | |
Jetsnack is a sample snack ordering app built with Compose. ⢠Medium complexity ⢠Custom design system ⢠Custom layouts ⢠Animation > Browse | |
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 | |
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 | |
A sample sleep tracker app, showcasing how to create custom layouts and graphics in Compose ⢠Custom Layouts ⢠Graphs with Paths > Browse |
𧬠Additional samples
Project | |
---|---|
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 | |
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 |
High level features
Looking for a sample that has the following features?
Custom Layouts
- Jetnews: Interests Screen
- Jetchat: AnimatedFabContent
- Jetsnack: Grid
- Jetsnack: CollapsingImageLayout
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 --init-script buildscripts/init.gradle.kts spotlessCheck
To format one sample: Navigate to the sample folder and run ./gradlew --init-script buildscripts/init.gradle.kts spotlessApply
Updates
To update dependencies to their new stable versions, run:
./scripts/updateDeps.sh
To make any other manual updates to dependencies (ie add a new dependency or set an alpha version), update the /scripts/libs.versions.toml
file with changes, and then run duplicate_version_config.sh
to propogate the changes to all other samples. You can also update the toml-updater-config.gradle
file with changes that need to propogate to each sample.
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.
Top Related Projects
Compose Multiplatform, a modern UI framework for Kotlin that makes building performant and beautiful user interfaces easy and enjoyable.
Epoxy is an Android library for building complex screens in a RecyclerView
A collection of extension libraries for Jetpack Compose
A powerful image downloading and caching library for Android
An image loading and caching library for Android focused on smooth scrolling
A declarative framework for building efficient UIs on Android.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot