<h1 align="center">Jetpack Compose Playground</h1>

Introduction 🙋‍♂️

This is a Jetpack Compose example project. I'm collecting a bunch of sample codes for Jetpack Compose. I also collect information/tutorials on the GitHub page https://foso.github.io/compose.

Show some :heart: and star the repo to support the project

<a href="https://twitter.com/intent/tweet?text=Hey, check out Jetpack-Compose-Playground https://github.com/Foso/Jetpack-Compose-Playground via @jklingenberg_ #Android "><img src="https://img.shields.io/twitter/url/https/github.com/angular-medellin/meetup.svg?style=social" alt="Tweet"></a>

Composable of the week!! 🎉

The SubComposeLayout

New to Compose?

Check Compose for Android Developers or Hello World Compose

📙 Jetpack Compose examples/tutorials and demos

Look in the repo or take a look at the GitHub page: https://foso.github.io/compose

Animation

• Crossfade

Layouts

• ConstraintLayout
• Scaffold
• Column
• Row
• Stack

Foundation

• Canvas
• Image
• LazyColumn
• LazyRow
• Shape
• Text

Material

• AlertDialog
• BadgeBox
• Buttons: Button, FloatingActionButton, OutlinedButton, TextButton
• Card
• Divider
• DropdownMenu
• ModalBottomSheetLayout
• ModalDrawerLayout
• NavigationRail
• Progress Indicators: CircularProgressIndicator, LinearProgressIndicator
• Scaffold
• Selection Controls: Checkbox, RadioButton, Switch
• Slider
• Snackbar
• Surface
• Text
• TextField
• TopAppBar

Cookbook

• Overview
• Handle changes to a TextField

Some of the code samples in this Repository:

| Overview | DialogExample | CircularProgress | | ------------------ | --------------------------- | ------------------ | |<img src="https://github.com/Foso/Jetpack-Compose-Playground/blob/master/docs/images/readme/DemoActivity.png" height="400" alt="Screenshot"/> | <img src="https://raw.githubusercontent.com/Foso/Jetpack-Compose-Playground/master/docs/images/DialogExample.png" height="400" alt="Screenshot"/> | <img src="https://github.com/Foso/Jetpack-Compose-Playground/blob/master/docs/images/readme/circprog.png" height="400" alt="Screenshot"/> |

</p>

Project Structure

• <kbd>/app</kbd> - Android project directory

Resources

Talks

| Name | Description | | ----------------------------------------- | ------------------------------------ | | Thinking in Compose | Jetpack Compose is the new next generation UI toolkit. It uses a declarative component based paradigm for building UIs easily and quickly. It’s written entirely in Kotlin and embraces the style and ergonomics of the Kotlin language. | | Compose by example | Jetpack Compose is a new declarative UI toolkit built for the demands of creating modern user interfaces. Get started with Compose and learn about the new APIs and Material components that make up the toolkit by examining concrete UIs we’ve created with it. We’ll walk through examples of theming, animation, layout and more, demonstrating how to customize and combine components to build real UIs. We’ll show how the new toolkit simplifies your development experience and enables new possibilities. | | Compose for existing apps | Jetpack Compose is now in alpha and you might want to start adding it to your existing apps. In this talk, you'll learn how to do that! We'll cover topics such as: adding Compose to your existing Views and embedding Views in Compose, using your existing View theme and current app architecture in Compose, testing all of that code, and much more. | | Jetpack Compose | Jetpack Compose is Android’s new modern UI toolkit. Learn how Compose simplifies & accelerates your UI development, allowing you to create richer, more robust and responsive UIs. We outline our roadmap, what is ready for use right now, share our direction in areas that are still evolving, and show how the tight integration with tooling makes the development experience even better. Get up to speed with Compose and how it can help you to build better apps! | | droidcon Online 2020: Become A Composer By Brian Gardner | | | KotlinConf 2019: The Compose Runtime, Demystified by Leland Richardson | Jetpack Compose is an ambitious multi-team effort to reimagine Android's UI Toolkit more than 10 years after the Android Platform launched with the original UI Toolkit. Compose follows a declarative programming model, and the runtime is coupled with a Kotlin compiler plugin to enable a novel new approach to declarative programming. In this talk, Leland will go over the mechanics of how the Compose runtime and compiler plugin work together, demystifying how it can be used to enable efficient and performant user interfaces. In addition, this talk will describe how Compose can operate completely independent of the Android Platform and Compose UI, allowing it to be used as a general language feature for Incremental Computing and the management of tree-like data structures. | | KotlinConf 2019: Compose Yourself: Designing a Kotlin First UI Toolkit by Anna-Chiara & Clara | #Jetpack Compose is an unbundled UI Toolkit for #Android, designed to simplify UI development. It combines a reactive programming model with the concisene