Skip to content

Latest commit

 

History

History
204 lines (141 loc) · 8.83 KB

README.md

File metadata and controls

204 lines (141 loc) · 8.83 KB
Raw

JetPackCompose Basic to Intermediate

Introduction

This repository is useful for learning basic to intermediate levels of Jetpack compose. Jetpack Compose (JC) is a modern UI development toolkit. It serves as a beginner-friendly project, providing an introduction to Jetpack Compose for newcomers and going up to the Intermediate level.

UI : You will learn how Compose basic UI element works. Like how to add image, text, list, how to scroll layout, about theming, animations and colors, etc.

State : You will learn how state management of UI element works in compose. learn about state handling when configuration change, during recomposition and how to use state variable for state-hoisting to re-use Stateless compose element.

Here you will learn

  • What is composable function? (BRANCH-1)
  • How you can build simple and basic ui elements(composable in JC)(views in xml)? (BRANCH-3)
  • How you can build simple screen with these composable? (BRANCH-3)
  • What is recomposition and How it works? (BRANCH-4)
  • What is State in JC? (BRANCH-4)
  • What is State hoisting. (BRANCH-4)
  • How to reuse composable to build complex ui? (BRANCH-3,4,5)
  • What is LazyRow, LazyColumn and how it works? (ie.Recyclerview in xml) (BRANCH-5)
  • How to make animation in JC? (BRANCH-6)
  • ViewPager, Card, TabLayout in JC (BRANCH-7, BOTTOM_VIEWPAGER, TAB_LAYOUT)
  • How to create Widget in Jetpack Compose? (BRANCH- ADD_WIDGET)
  • How to create bottom navigation bar in Jetpack compose? (BRANCH - bottom_nav)
  • How to create simple timer app with canvas? (BRANCH - timer)
  • Build complex mediation ui. (BRANCH - meditation_ui)
  • News app using these concepts and also use MVVM architecture, Rest API, Retrofit, Coil for Image loading, Navigation, Testing API in JC. (BRANCH-NEWS_APP)
  • Add Text style using shape and animation to text. (BRANCH - text-styling)
  • Navigate back with next screen to previous screen. (BRANCH - navigate-back-with-result)
  • How to implement Drag-N-Drop in Jetpack compose. (BRANCH- drag-and-drop)

Topics

  • What is Jetpack compose?:

    Jetpack Compose is a modern toolkit for building native Android UI. Jetpack Compose simplifies and accelerates UI development on Android with less code, powerful tools, and intuitive Kotlin APIs.

  • Composable functions:

    Jetpack Compose is built around composable functions. These functions let you define your app's UI programmatically by describing how it should look and providing data dependencies, rather than focusing on the process of the UI's construction (initializing an element, attaching it to a parent, etc.). To create a composable function, just add the @Composable annotation to the function name. More info 👉 https://developer.android.com/jetpack/compose/tutorial#lesson-1:-composable-functions

  • Layouts:

    UI elements are hierarchical, with elements contained in other elements. In Compose, you build a UI hierarchy by calling composable functions from other composable functions.

  • Lists and animations:

    Lists and animations are everywhere in apps. In this lesson, you will learn how Compose makes it easy to create lists and fun to add animations. More info 👉 https://developer.android.com/jetpack/compose/lists

  • Navigation:

    The Navigation component provides support for Jetpack Compose applications. You can navigate between composable while taking advantage of the Navigation component’s infrastructure and features.

    More info 👉 https://developer.android.com/jetpack/compose/navigation

Android components used:

  • Jetpack compose for UI development
  • Kotlin for programming
  • MVVM architecture
  • Coil library for dynamic Image loading
  • Retrofit for REST API data consuming
  • Jetpack compose Navigation
  • Lazy list, Card, Other composable functions
  • Unit Testing of API
  • Animations
  • Viewpager
  • Bottomsheet
  • Tab layout
  • State managements
  • Drag-Drop

Branches Info:

#1_composable_function_info : How composable function works is show in this branch code and how recomposition works in jetpack compose.

#3_add_rows_and_columns: Add Row and column to create complex layout in compose.

#4_state_of_composable: State of composable is good topic to learn in detail because of it you will find difficulty in recomposition.

#5_add_lazy_list_aka_recyclerview: Lazy row and lazy column is like horizontal and vertical recyclerview but easy way to implement scrolling behaviour in compose.

#6_add_animation_and_theme: Add animation when composable element state changes.

#7_add_card_composable: Add Card composable or custom composable to make UI better.

#bottom_viewpager: It is a viewpager in Jetpack compose.

#tab-layout: Tab layout in Jetpack compose.

#Constraint-layout: Use Constaint layout to make Indian flag.

#add_widget: Create Simple counter widget in JC.

#bottom_nav_bar: Created botttom navigation bar.

#meditation_ui: Created complex UI

#timer: Created timer app

#news-app: News app using Retrofit, MVVM architecture, Compose, Navigation, Lazy list etc.

#text-styling Add Text stlying and animations

#navigate-back-with-result Navigate back with next screen to previous screen

#drag-and-drop Drag and Drop Functionality more info: https://developer.android.com/jetpack/compose/touch-input/pointer-input/drag-swipe-fling

Screenshots & Videos:

Screenshot_2023-07-20-22-40-57-132_com lahsuak apps jetpackcomposebasic Screenshot_2023-07-20-22-40-52-894_com lahsuak apps jetpackcomposebasic Screenshot_2023-07-20-22-41-19-897_com lahsuak apps jetpackcomposebasic Screenshot 2023-07-25 155236 Screenshot 2023-08-01 185044

Lazy column with animations

Screen_recording_20230801_185548.mp4

NewsApp

782fb1d4-3d92-4a2c-a4d2-42902bd36e45.mp4

Timer

Screen_recording_20230801_185702.mp4

Bottom Navigation Bar

Screen_recording_20230801_185339.mp4

Tab layout

Screen_recording_20230801_185244.mp4

Viewpager

Screen_recording_20230801_184816.webm

Text Styling

Screen_recording_20230805_121439.mp4

Navigate back with result

navigate_back_with_result.mp4

Drag-n-Drop

Screen_recording_20230909_130409.mp4

Support Me

If you like my work you can support me via :

buymecoffee1 (2)

Contribution

You can contribute this project. Just Solve issue or update code and raise PR. I'll do code review and merge your changes into main branch. See Commit message guidelines https://initialcommit.com/blog/git-commit-messages-best-practices

Licence

MIT License

Copyright (c) 2024 Kaushal Vasava

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Author

Kaushal Vasava

If you like my work then Follow me on LinkedIn, Twitter for more information related to app development, Kotlin, etc and Add to Favorite on Github .