Convert Figma logo to code with AI

android logocompose-samples

Official Jetpack Compose samples.

19,785
4,695
19,785
18

Top Related Projects

Compose Multiplatform, a modern UI framework for Kotlin that makes building performant and beautiful user interfaces easy and enjoyable.

8,494

Epoxy is an Android library for building complex screens in a RecyclerView

A collection of extension libraries for Jetpack Compose

18,705

A powerful image downloading and caching library for Android

34,576

An image loading and caching library for Android focused on smooth scrolling

7,679

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:

  1. 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
        )
    }
}
  1. 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
    )
}
  1. 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:

  1. Clone the repository:
    git clone https://github.com/android/compose-samples.git
    
  2. Open the project in Android Studio Arctic Fox or later.
  3. Select a specific sample app from the project structure.
  4. 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.

8,494

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.

18,705

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.

34,576

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.

7,679

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 Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

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 --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.