Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mindorksopensource/jetpack-compose-android-examples

Learn Jetpack Compose for Android by Examples. Learn how to use Jetpack Compose for Android App Development. Android’s modern toolkit for building native UI.
https://github.com/mindorksopensource/jetpack-compose-android-examples

android-example compose compose-tutorial jetpack jetpack-android jetpack-compose kotlin-android

Last synced: about 5 hours ago
JSON representation

Learn Jetpack Compose for Android by Examples. Learn how to use Jetpack Compose for Android App Development. Android’s modern toolkit for building native UI.

Host: GitHub
URL: https://github.com/mindorksopensource/jetpack-compose-android-examples
Owner: MindorksOpenSource
License: apache-2.0
Created: 2020-11-01T12:00:24.000Z (about 4 years ago)
Default Branch: main
Last Pushed: 2023-05-08T20:59:04.000Z (over 1 year ago)
Last Synced: 2024-12-15T06:04:55.867Z (7 days ago)
Topics: android-example, compose, compose-tutorial, jetpack, jetpack-android, jetpack-compose, kotlin-android
Language: Kotlin
Homepage: https://mindorks.com
Size: 382 KB
Stars: 477
Watchers: 18
Forks: 85
Open Issues: 3
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# Jetpack-Compose-Android-Examples
## Learn Jetpack Compose for Android by Examples. Learn how to use Jetpack Compose for Android App Development. Android’s modern toolkit for building native UI.

[![MindOrks](https://img.shields.io/badge/mindorks-opensource-blue.svg)](https://mindorks.com/open-source-projects)
[![Connect with us](https://img.shields.io/badge/Connect%20with%20us-blue.svg)](https://mindorks.com/connect-with-us)
[![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)](https://github.com/MindorksOpenSource/Jetpack-Compose-Android-Examples/blob/main/LICENSE)

## About this project:
* If you want to get started with Jetpack Compose for Android Development and wants to master it, then this project is for you.
* Common use-cases of Jetpack Compose in Android has been implemented in this project.
* This is your one-stop solution for learning Jetpack Compose for Android Development.

## Steps to learn Jetpack Compose by examples from this project
* Just clone, build, run the project and start learning Jetpack Compose by examples.

## This Jetpack Compose Example Project will help you in learning the following for Android App Development:
* How to build UI using Jetpack Compose in Android?
* How to display a **Text** and apply various styles on a Text?
* How to display a **TextField**(EditText) and apply various styles on it?
* How to use the **Preview** and **PreviewParameter** feature offered by Android Studio?
* Learn how to use various layouts such as **Column**, **ScrollableColumn**, **LazyColumn**, **Row**, **ScrollableRow**, **LazyRow**, **Box**, **Stack**, and **ConstraintLayout** in Jetpack Compose?
* Learn the usage of **Clickable** in Jetpack Compose with the help of examples.
* How to use **Buttons**, **Card**, **Images**, **AlertDialog**, **Single Choice Dialog** in Jetpack Compose?
* Through Jetpack Compose tutorial, you will learn various Material Design UI elements such as **BottomAppBar**, **TopAppBar**, **BottomNavigation**, **Checkbox**, **CircularProgressIndicator**, **LinearProgressIndicator**, **RadioButton**, **Slider**, **Snackbar**, and **Switch**.
* Learn how to make **Custom Views** in Jetpack Compose?
* How to add animation such as **Crossfade** and **Shape Rotation** in Jetpack Compose?

## Jetpack Compose Examples for Android Development:
* [**Simple TextView:**](https://github.com/MindorksOpenSource/Jetpack-Compose-Android-Examples/blob/main/app/src/main/java/com/mindorks/example/jetpack/compose/text/SimpleTextActivity.kt) Learn how to display text using Compose?
* [**Text Styling:**](https://github.com/MindorksOpenSource/Jetpack-Compose-Android-Examples/blob/main/app/src/main/java/com/mindorks/example/jetpack/compose/text/TextStylingActivity.kt) Learn how to add various styles on a Text in Compose?
* [**TextField(EditText):**](https://github.com/MindorksOpenSource/Jetpack-Compose-Android-Examples/blob/main/app/src/main/java/com/mindorks/example/jetpack/compose/text/TextFieldActivity.kt) Example to show the usage of EditText in Compose.
* [**Simple Preview:**](https://github.com/MindorksOpenSource/Jetpack-Compose-Android-Examples/blob/main/app/src/main/java/com/mindorks/example/jetpack/compose/preview/SimplePreviewActivity.kt) Learn how to use the Preview feature of Android Studio for Jetpack Compose?
* [**Preview Parameter:**](https://github.com/MindorksOpenSource/Jetpack-Compose-Android-Examples/blob/main/app/src/main/java/com/mindorks/example/jetpack/compose/preview/PreviewParameterActivity.kt) Learn how to pass parameters in a Preview annotation in Jetpack Compose?
* [**Simple Column:**](https://github.com/MindorksOpenSource/Jetpack-Compose-Android-Examples/blob/main/app/src/main/java/com/mindorks/example/jetpack/compose/layout/ColumnActivity.kt) Example to display UI elements vertically.
* [**Scrollable Column:**](https://github.com/MindorksOpenSource/Jetpack-Compose-Android-Examples/blob/main/app/src/main/java/com/mindorks/example/jetpack/compose/layout/ScrollableColumnActivity.kt) Tutorial of Scrollable Column in Jetpack Compose.
* [**Lazy Column:**](https://github.com/MindorksOpenSource/Jetpack-Compose-Android-Examples/blob/main/app/src/main/java/com/mindorks/example/jetpack/compose/layout/LazyColumnActivity.kt) Learn how to lazily add elements in a Column using LazyColumn?
* [**Simple Row:**](https://github.com/MindorksOpenSource/Jetpack-Compose-Android-Examples/blob/main/app/src/main/java/com/mindorks/example/jetpack/compose/layout/RowActivity.kt) Compose tutorial on how to display UI elements horizontally?
* [**Scrollable Row:**](https://github.com/MindorksOpenSource/Jetpack-Compose-Android-Examples/blob/main/app/src/main/java/com/mindorks/example/jetpack/compose/layout/ScrollableRowActivity.kt) Example of Scrollable Row in Jetpack Compose.
* [**Lazy Row:**](https://github.com/MindorksOpenSource/Jetpack-Compose-Android-Examples/blob/main/app/src/main/java/com/mindorks/example/jetpack/compose/layout/LazyRowActivity.kt) Example of Lazy Row in Jetpack Compose.
* [**Box:**](https://github.com/MindorksOpenSource/Jetpack-Compose-Android-Examples/blob/main/app/src/main/java/com/mindorks/example/jetpack/compose/layout/BoxActivity.kt) Learn the usage of Box Layout in Compose with the help of an example.
* [**Stack:**](https://github.com/MindorksOpenSource/Jetpack-Compose-Android-Examples/blob/main/app/src/main/java/com/mindorks/example/jetpack/compose/layout/StackActivity.kt) Tutorial on how to place one UI element over other and vice-versa?
* [**Constraint Layout:**](https://github.com/MindorksOpenSource/Jetpack-Compose-Android-Examples/blob/main/app/src/main/java/com/mindorks/example/jetpack/compose/layout/ConstraintLayoutActivity.kt) Learn how to use ConstraintLayout in Compose?
* [**Button:**](https://github.com/MindorksOpenSource/Jetpack-Compose-Android-Examples/blob/main/app/src/main/java/com/mindorks/example/jetpack/compose/button/MaterialButtonActivity.kt) Learn how to use Buttons and how to add styles to a Button in Compose?
* [**Card:**](https://github.com/MindorksOpenSource/Jetpack-Compose-Android-Examples/blob/main/app/src/main/java/com/mindorks/example/jetpack/compose/card/CardExampleActivity.kt) Example to learn the usage of CardView in Compose.
* [**Clickable:**](https://github.com/MindorksOpenSource/Jetpack-Compose-Android-Examples/blob/main/app/src/main/java/com/mindorks/example/jetpack/compose/clickable/ClickableExampleActivity.kt) Tutorial to show how UI elements can be made clickable?
* [**Image:**](https://github.com/MindorksOpenSource/Jetpack-Compose-Android-Examples/blob/main/app/src/main/java/com/mindorks/example/jetpack/compose/image/ImageActivity.kt) Example of ImageView in Compose.
* [**Alert Dialog:**](https://github.com/MindorksOpenSource/Jetpack-Compose-Android-Examples/blob/main/app/src/main/java/com/mindorks/example/jetpack/compose/dialog/AlertDialogActivity.kt) Learn how to show AlertDialog in Compose?
* [**Single Choice Dialog:**](https://github.com/MindorksOpenSource/Jetpack-Compose-Android-Examples/blob/main/app/src/main/java/com/mindorks/example/jetpack/compose/dialog/SingleChoiceDialogActivity.kt) Learn how to show Single Choice Dialog in Compose?
* [**Material AppBar:**](https://github.com/MindorksOpenSource/Jetpack-Compose-Android-Examples/blob/main/app/src/main/java/com/mindorks/example/jetpack/compose/materialdesign/MaterialAppBarActivity.kt) Compose Tutorial of BottomAppBar and TopAppBar.
* [**Material BottomNavigation:**](https://github.com/MindorksOpenSource/Jetpack-Compose-Android-Examples/blob/main/app/src/main/java/com/mindorks/example/jetpack/compose/materialdesign/MaterialBottomNavigationActivity.kt) Example of BottomNavigation in Jetpack Compose.
* [**Material Checkbox:**](https://github.com/MindorksOpenSource/Jetpack-Compose-Android-Examples/blob/main/app/src/main/java/com/mindorks/example/jetpack/compose/materialdesign/MaterialCheckBoxActivity.kt) Tutorial of Checkbox in Jetpack Compose.
* [**Material ProgressBar:**](https://github.com/MindorksOpenSource/Jetpack-Compose-Android-Examples/blob/main/app/src/main/java/com/mindorks/example/jetpack/compose/materialdesign/MaterialProgressActivity.kt) Learn how to use Circular and Linear ProgressBar in Compose?
* [**Material RadioButton:**](https://github.com/MindorksOpenSource/Jetpack-Compose-Android-Examples/blob/main/app/src/main/java/com/mindorks/example/jetpack/compose/materialdesign/MaterialRadioButtonActivity.kt) Learn how to use RadioButton in Jetpack Compose?
* [**Material Slider:**](https://github.com/MindorksOpenSource/Jetpack-Compose-Android-Examples/blob/main/app/src/main/java/com/mindorks/example/jetpack/compose/materialdesign/MaterialSliderActivity.kt) Example of Linear and Discrete Slider in Compose.
* [**Material Snackbar:**](https://github.com/MindorksOpenSource/Jetpack-Compose-Android-Examples/blob/main/app/src/main/java/com/mindorks/example/jetpack/compose/materialdesign/MaterialSnackbarActivity.kt) Learn to display some information using a Snackbar in Compose.
* [**Material Switch:**](https://github.com/MindorksOpenSource/Jetpack-Compose-Android-Examples/blob/main/app/src/main/java/com/mindorks/example/jetpack/compose/materialdesign/MaterialSwitchActivity.kt) Learn how to use Switch in Compose?
* [**Custom View:**](https://github.com/MindorksOpenSource/Jetpack-Compose-Android-Examples/blob/main/app/src/main/java/com/mindorks/example/jetpack/compose/customview/CustomViewActivity.kt) Example of creating your own Custom View in Jetpack Compose.
* [**Crossfade Animation:**](https://github.com/MindorksOpenSource/Jetpack-Compose-Android-Examples/blob/main/app/src/main/java/com/mindorks/example/jetpack/compose/animation/CrossFadeAnimationActivity.kt) Example of showing Crossfade animation in Jetpack Compose.
* [**Shape Rotation Animation:**](https://github.com/MindorksOpenSource/Jetpack-Compose-Android-Examples/blob/main/app/src/main/java/com/mindorks/example/jetpack/compose/animation/ShapeRotationActivity.kt) Compose tutorial of Square Shape Rotation Animation.

## Project Directory Structure
```
.
└── com.mindorks.example.jetpack.compose/
├── animation/
│ ├── CrossFadeAnimationActivity.kt
│ └── ShapeRotationActivity.kt
├── button/
│ └── MaterialButtonActivity.kt
├── card/
│ └── CardExampleActivity.kt
├── clickable/
│ └── ClickableExampleActivity.kt
├── customview/
│ └── CustomViewActivity.kt
├── data/
│ └── Blog.kt
├── dialog/
│ ├── AlertDialogActivity.kt
│ └── SingleChoiceDialogActivity.kt
├── image/
│ └── ImageActivity.kt
├── layout/
│ ├── BoxActivity.kt
│ ├── ColumnActivity.kt
│ ├── ConstraintLayoutActivity.kt
│ ├── LazyColumnActivity.kt
│ ├── LazyRowActivity.kt
│ ├── RowActivity.kt
│ ├── ScrollableColumnActivity.kt
│ ├── ScrollableRowActivity.kt
│ └── StackActivity.kt
├── materialdesign/
│ ├── MaterialAppBarActivity.kt
│ ├── MaterialBottomNavigationActivity.kt
│ ├── MaterialCheckBoxActivity.kt
│ ├── MaterialProgressActivity.kt
│ ├── MaterialRadioButtonActivity.kt
│ ├── MaterialSliderActivity.kt
│ ├── MaterialSnackbarActivity.kt
│ └── MaterialSwitchActivity.kt
├── preview/
│ ├── DummyBlogProvider
│ ├── PreviewParameterActivity.kt
│ └── SimplePreviewActivity.kt
├── text/
│ ├── SimpleTextActivity.kt
│ ├── TextFieldActivity.kt
│ └── TextStylingActivity.kt
├── ui/
│ ├── Color.kt
│ ├── Shape.kt
│ ├── Theme.kt
│ └── Type.kt
└── MainActivity.kt
```

## References useful during learning the Jetpack Compose for Android from this project
* [Jetpack Compose Tutorial - Step by Step Guide](https://blog.mindorks.com/jetpack-compose-tutorial)
* [State Management in Jetpack Compose](https://blog.mindorks.com/state-management-in-jetpack-compose)

## Explore Android Online Tutorials and Courses To Learn More by MindOrks
* [Ride-Sharing Uber Lyft Android App](https://github.com/MindorksOpenSource/ridesharing-uber-lyft-app) - Learn to build a ride-sharing Android Taxi Clone App like Uber, Lyft - Open-Source Project By MindOrks
* [Android Tutorial](https://mindorks.com/android-tutorial) - All Free Android Tutorials by MindOrks
* [Android Online Course for Professionals](https://mindorks.com/android-app-development-online-course-for-professionals) - In this online course, you’ll learn the Dagger, Kotlin, RxJava, MVVM Architecture, Architecture Components, Jetpack, LiveData, ViewModel, Room Database, Database Design, Multithreading, Memory Management, Networking, Caching, How Glide works, Unit Testing, and the best practices for Android Development. By the end of this online course, you will have all the skills you need to become a professional Android Developer.
* [Android Online Course for Beginners](https://mindorks.com/android-app-development-online-course-for-beginners) - This course is for beginners for those who want to get started with Android Development. In this course, you will build two apps: TodoNotes and Ride-Sharing Uber Android App.

## If this project helps you in anyway, show your love :heart: by putting a :star: on this project :v:

[Check out MindOrks awesome open source projects here](https://mindorks.com/open-source-projects)

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

http://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.
```

### Contributing to Jetpack Compose Android Examples
Just make pull request. You are in!