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.

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.

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: Learn how to display text using Compose?
• Text Styling: Learn how to add various styles on a Text in Compose?
• TextField(EditText): Example to show the usage of EditText in Compose.
• Simple Preview: Learn how to use the Preview feature of Android Studio for Jetpack Compose?
• Preview Parameter: Learn how to pass parameters in a Preview annotation in Jetpack Compose?
• Simple Column: Example to display UI elements vertically.
• Scrollable Column: Tutorial of Scrollable Column in Jetpack Compose.
• Lazy Column: Learn how to lazily add elements in a Column using LazyColumn?
• Simple Row: Compose tutorial on how to display UI elements horizontally?
• Scrollable Row: Example of Scrollable Row in Jetpack Compose.
• Lazy Row: Example of Lazy Row in Jetpack Compose.
• Box: Learn the usage of Box Layout in Compose with the help of an example.
• Stack: Tutorial on how to place one UI element over other and vice-versa?
• Constraint Layout: Learn how to use ConstraintLayout in Compose?
• Button: Learn how to use Buttons and how to add styles to a Button in Compose?
• Card: Example to learn the usage of CardView in Compose.
• Clickable: Tutorial to show how UI elements can be made clickable?
• Image: Example of ImageView in Compose.
• Alert Dialog: Learn how to show AlertDialog in Compose?
• Single Choice Dialog: Learn how to show Single Choice Dialog in Compose?
• Material AppBar: Compose Tutorial of BottomAppBar and TopAppBar.
• Material BottomNavigation: Example of BottomNavigation in Jetpack Compose.
• Material Checkbox: Tutorial of Checkbox in Jetpack Compose.
• Material ProgressBar: Learn how to use Circular and Linear ProgressBar in Compose?
• Material RadioButton: Learn how to use RadioButton in Jetpack Compose?
• Material Slider: Example of Linear and Discrete Slider in Compose.
• Material Snackbar: Learn to display some information using a Snackbar in Compose.
• Material Switch: Learn how to use Switch in Compose?
• Custom View: Example of creating your own Custom View in Jetpack Compose.
• Crossfade Animation: Example of showing Crossfade animation in Jetpack Compose.
• Shape Rotation Animation: 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
• State Management in Jetpack Compose

Explore Android Online Tutorials and Courses To Learn More by MindOrks

• Ride-Sharing Uber Lyft Android App - Learn to build a ride-sharing Android Taxi Clone App like Uber, Lyft - Open-Source Project By MindOrks
• Android Tutorial - All Free Android Tutorials by MindOrks
• Android 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 - 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 ❤️ by putting a ⭐ on this project ✌️

Check out MindOrks awesome open source projects here

License

   Copyright (C) 2020 MINDORKS NEXTGEN PRIVATE LIMITED

   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!

jetpack-compose-android-examples's Issues

Cannot change layout dimensions of Checkbox

The checkbox is really small for my thumb to click on it. How do I increase it's size?

Common Layouts

I am just wondering how we can use common UI or XMLs in jetpack compose. like we use in Android Activity or in Fragments.
Wanted to know about and tag as well.