# Jetpack-Compose-Playground

**Repository Path**: leechenhwa/Jetpack-Compose-Playground

## Basic Information

- **Project Name**: Jetpack-Compose-Playground
- **Description**: Jetpack-Compose-Playground
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-06-14
- **Last Updated**: 2025-06-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Jetpack Compose Playground

Offering **more than 355 screens** with examples of **Jetpack Compose**.

<img src="documentation/screenshots/jetpack_compose_playground.gif" width="300"/>

## Introduction

**Jetpack Compose Playground** is a showcase application and repository showing what Jetpack Compose
has to offer and how it improves everyday Android UI development. It offers more 355 screens with
examples. Based on [official link](https://developer.android.com/jetpack/compose) and
the [docs](https://developer.android.com/jetpack/compose/documentation), the application has screens
with examples for most components and cases. This application is supposed to be used by developers
in order to see hands on the examples for jetpack compose. Each screen has a button link directing
the user to the Github file containing the code. Some code examples are
from [androidx compose samples](https://github.com/androidx/androidx/tree/androidx-main/compose)
and [accompanist](https://github.com/google/accompanist).

Please provide any feedback via github issues or via email on : **steleotr@gmail.com**

The application will be updated as soon as possible when a new release of compose is available.

Download from:

<a href="https://play.google.com/store/apps/details?id=com.steleot.jetpackcompose.playground">
<img src="documentation/screenshots/google-play-badge.png" width="200">
</a>

### Featured in :star:

[![Jetc.dev](https://img.shields.io/badge/jetc.dev-%2373-red.svg)](https://jetc.dev/issues/073.html)

### Spread Some :heart:

[![GitHub stars](https://img.shields.io/github/stars/Vivecstel/Jetpack-Compose-Playground.svg?style=social&label=Star)](https://github.com/Vivecstel/Jetpack-Compose-Playground) [![GitHub forks](https://img.shields.io/github/forks/Vivecstel/Jetpack-Compose-Playground.svg?style=social&label=Fork)](https://github.com/Vivecstel/Jetpack-Compose-Playground/fork) [![GitHub watchers](https://img.shields.io/github/watchers/Vivecstel/Jetpack-Compose-Playground.svg?style=social&label=Watch)](https://github.com/Vivecstel/Jetpack-Compose-Playground)

[![Open Source Love](https://badges.frapsoft.com/os/v1/open-source.svg?v=102)](https://opensource.org/licenses/Apache-2.0) [![License](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](LICENSE)

## Available Screens

- [Activity](documentation/activity.md) (3 screens)
- [Animation](documentation/animation.md) (17 screens)
- [Constraint Layout](documentation/constraintLayout.md) (14 screens)
- [Custom Examples](documentation/customExamples.md) (19 screens)
- [External Libraries](documentation/externalLibraries.md) (35 screens)
- [Foundation](documentation/foundation.md) (60 screens)
- [Material](documentation/material.md) (51 screens)
- [Material 3 - Material you](documentation/material3.md) (62 screens)
- [Material Icons](documentation/materialIcons.md) (5 screens)
- [Material Icons Extended](documentation/materialIconsExtended.md) (5 screens)
- [Navigation](app/src/main/java/com/steleot/jetpackcompose/playground/compose/navigation/NavigationScreen.kt) (1 screen)
- [Paging](app/src/main/java/com/steleot/jetpackcompose/playground/compose/paging/PagingScreen.kt) (1 screen)
- [Runtime](documentation/runtime.md) (18 screens)
- [Ui](documentation/ui.md) (61 screens)
- [ViewModel](documentation/viewModel.md) (3 screens)

## Instructions

In order to run the project:

* Use latest Android Studio.

<img src="documentation/screenshots/android_studio.png" width="450" />

* Change appId constant in AndroidConfiguration.kt to your applicationId.

<img src="documentation/screenshots/android_configuration.png" width="450" />

* Create a firebase android project with the applicationId you provided and download and add
  google-services.json to the project under app/src folder.

<img src="documentation/screenshots/google_services.png" width="450" />

* Add a google maps key in local properties file (valid one in order to see google maps example).

<img src="documentation/screenshots/local_properties.png" width="450" />

## Screenshots

- [Mobile Screenshots](documentation/mobileScreenshots.md)
- [Tablet 7-inch Screenshots](documentation/tablet7inchScreenshots.md)
- [Tablet 10-inch Screenshots](documentation/tablet10inchScreenshots.md)