From 8e2255011c5213ae4eb1d571a9176a0a86dc5113 Mon Sep 17 00:00:00 2001 From: 1+1=2 Date: Wed, 20 Mar 2024 17:57:48 -0700 Subject: [PATCH] Readme Update - Updated README.md so that it contains all 22 lessons (W.I.P. ones are either crashing or clearly need more work. Those without might still need checking out as well) - Cleaned up the navigation bar (Just to be slightly more user-friendly) --- README.md | 44 +++++++++++-------- .../ui/components/CustomUi.kt | 7 +-- .../ui/components/NavigationDrawerMain.kt | 24 +++++++--- .../utils/navigation/NavConstants.kt | 4 +- 4 files changed, 49 insertions(+), 30 deletions(-) diff --git a/README.md b/README.md index 3e86f960..96fd1db4 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ Learn step by step UI development using Jetpack Compose [beginners to advance]. ## Table of Contents -- [x] Jetpack Compose Lessons (1-14) +- [x] Jetpack Compose Lessons (1-22) - [x] Application component - [x] Activities - [x] Services @@ -31,7 +31,7 @@ Learn step by step UI development using Jetpack Compose [beginners to advance]. - [ ] MPchart: Charting library - [ ] Camera V2 API - [x] RxJava -- [x] Demos (Planned in August 2023 release) +- [x] Demos (Planned in August 2024 release) - [x] Instagram Demo UI - [x] TikTok Demo UI - [ ] Youtube Demo UI @@ -42,22 +42,30 @@ Learn step by step UI development using Jetpack Compose [beginners to advance]. ## Lessons -| Lesson | Preview | -|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------ | -|

Lesson 1: Column, Row, Box, Modifiers


Create Row that adds elements in horizontal order, and Column that adds elements in vertical order.

• Column
• Row
• Box
• Modifier
| Lesson 1 Preview | -|

Lesson 2: Material Design- Shapes


This lesson shows various examples how to use material design components in compose UI
• **Chapter 1:** Shape, Surface
• **Chapter 2:** Text examples
**• Chapter 3:** Button examples
• **Chapter 4:** Image examples
**• Chapter 5:** Progress Bar examples
**• Chapter 6:** Floating action buttons
| Lesson 2 Preview | -|

Lesson 3: Types of List


This lesson shows various examples List, Expandable list, Animations with List compose UI
• **Chapter 1:** Simple List
• **Chapter 2:** Custom Vertical List
**• Chapter 3:** Simple Horizontal List
• **Chapter 4:** Vertical Grid List
**• Chapter 5:** Horizontal Grid List
**• Chapter 6:** Expandable List
**• Chapter 7:** Expandable Animated List
**• Chapter 8:** Shimmer Animated List
| Lesson 3 Preview | -|

Lesson 4: Types of Dialog


This lesson shows various examples of dialogs
• **Chapter 1:** Alert dialog
• **Chapter 2:** BottomSheet Dialog
**• Chapter 3:** App Rating dialog
• **Chapter 4:** Logout dialog
| Lesson 4 Preview | -|

Lesson 5: Maps


This lesson shows various examples of maps
• **Chapter 1:** Map Basics
- Simple Map
- Inflate Marker on Map
• **Chapter 2:** Map types
**• Chapter 3:** Current Location on map
• **Chapter 4:** Search on map
| Lesson 5 Preview | -|

Lesson 6: Theme Change


This lesson shows dark and light mode theme change | Lesson 6 Preview | -|

Lesson 7: Constraint Layout


This lesson shows various examples of Constraint Layout
• **Chapter 1:** Basics of Constraint Layout
• **Chapter 2:** GuideLine
**• Chapter 3:** Chain
• **Chapter 4:** Barrier
| Lesson 7 Preview | -|

Lesson 8: Animation


This lesson covers animations in Jetpack Compose
• **Chapter 1:** Tween Animation
• **Chapter 2:** Animated Visibility
**• Chapter 3:** Animated Content
• **Chapter 4:** Animation Specs
• **Chapter 5:** Shimmer Animation
| Lesson 8 Preview | -|

Lesson 10: Theming


This lesson explores theming in Jetpack Compose
• **Chapter 1:** Custom Colors
• **Chapter 2:** Custom Typography
**• Chapter 3:** Custom Shapes
• **Chapter 4:** Custom Themes
| Lesson 10 Preview | -|

Lesson 11: Compose with Xml compatiblity


This lesson covers compatiblity with xml in Jetpack Compose
• **Chapter 1:** Compose View into activity xml
| Lesson 11 Preview | -|

Lesson 12: Web Views


This lesson demonstrates how to create web views in Jetpack Compose
| Lesson 12 Preview | -|

Lesson 13: Localization


This lesson covers localization in Jetpack Compose
• **Chapter 1:** Adding Language Support
• **Chapter 2:** Formatting Dates and Numbers
**• Chapter 3:** RTL Support
• **Chapter 4:** String Plurals
| Lesson 11 Preview | -|

Lesson 14: Drop down menu


This lesson covers drop down menu in Jetpack Compose
| Lesson 11 Preview | -|

Lesson 15: Custom Radio button


This lesson covers Customization of radio button in Jetpack Compose
| Lesson 15 Preview | +| Lesson | Preview | +|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------| +|

Lesson 1: Column, Row, Box, Modifiers


This lesson shows various Compose layouts that position the components in a certain direction or alignment.

• Column
• Row
• Box
• Modifier
| Lesson 1 Preview | +|

Lesson 2: Material Design - Shapes


This lesson shows various examples of material design components in Compose
• **Chapter 1:** Shape, Surface
• **Chapter 2:** Text examples
**• Chapter 3:** Button examples
• **Chapter 4:** Image examples
**• Chapter 5:** Progress Bar examples
**• Chapter 6:** Floating action buttons
| Lesson 2 Preview | +|

Lesson 3: Types of List


This lesson shows common implementations of displaying lists, such as expandable lists and lists with animations
• **Chapter 1:** Simple List
• **Chapter 2:** Custom Vertical List
**• Chapter 3:** Simple Horizontal List
• **Chapter 4:** Vertical Grid List
**• Chapter 5:** Horizontal Grid List
**• Chapter 6:** Expandable List
**• Chapter 7:** Expandable Animated List
**• Chapter 8:** Shimmer Animated List
| Lesson 3 Preview | +|

Lesson 4: Types of Dialog


This lesson shows various examples of dialogs
• **Chapter 1:** Alert dialog
• **Chapter 2:** BottomSheet Dialog
**• Chapter 3:** App Rating dialog
• **Chapter 4:** Logout dialog
| Lesson 4 Preview | +|

Lesson 5: Maps


This lesson shows various ways to use Google Maps (Note: We aren't paying the service. Please use your own account and provide the API key in local.properties. See local.properties.defaults for the format)
• **Chapter 1:** Map Basics
- Simple Map
- Inflate Marker on Map
• **Chapter 2:** Map types
**• Chapter 3:** Current Location on map
• **Chapter 4:** Search on map
| Lesson 5 Preview | +|

Lesson 6: Theme Change


This lesson shows theme change from light mode to dark mode | Lesson 6 Preview | +|

Lesson 7: Constraint Layout


This lesson shows various examples of ConstraintLayout in Compose
• **Chapter 1:** Basics of Constraint Layout
• **Chapter 2:** GuideLine
**• Chapter 3:** Chain
• **Chapter 4:** Barrier
| Lesson 7 Preview | +|

Lesson 8: Animation


This lesson covers various animations in Compose
• **Chapter 1:** Tween Animation
• **Chapter 2:** Animated Visibility
**• Chapter 3:** Animated Content
• **Chapter 4:** Animation Specs
• **Chapter 5:** Shimmer Animation
| Lesson 8 Preview | +|

Lesson 9: UI Testing


This lesson shows how to do UI testing in Compose
| Lesson 9 Preview | +|

Lesson 10: (W.I.P.) Theming


This lesson explores custom theming in Compose
• **Chapter 1:** Custom Colors
• **Chapter 2:** Custom Typography
**• Chapter 3:** Custom Shapes
• **Chapter 4:** Custom Themes
| Lesson 10 Preview | +|

Lesson 11: XML Interoperability


This lesson shows how to show the conventional XML layout in Compose
• **Chapter 1:** Compose View into activity xml
| Lesson 11 Preview | +|

Lesson 12: Web Views


This lesson demonstrates how to create web views in Compose
| Lesson 12 Preview | +|

Lesson 13: (W.I.P.) Localization


This lesson covers localization in Jetpack Compose
• **Chapter 1:** Adding Language Support
• **Chapter 2:** Formatting Dates and Numbers
**• Chapter 3:** RTL Support
• **Chapter 4:** String Plurals
| Lesson 13 Preview | +|

Lesson 14: (W.I.P.) Drop down menu


This lesson covers drop down menu in Compose
| Lesson 14 Preview | +|

Lesson 15: Custom Radio button


This lesson covers customizations of radio button in Compose
| Lesson 15 Preview | +|

Lesson 16: State and Visibility


This lesson covers the concept of states in Compose
| Lesson 16 Preview | +|

Lesson 17: Flow Layouts


This lesson covers Flow Rows and Flow Columns in Compose
| Lesson 17 Preview | +|

Lesson 18: (W.I.P.) UI Testing


This lesson shows how to do UI testing in Compose
| Lesson 18 Preview | +|

Lesson 19: Caching with Okhttp Interceptors


This lesson shows how to cache Retrofit responses with Okhttp Interceptors
| Lesson 19 Preview | +|

Lesson 20: Biometric Authentication


(W.I.P.) This lesson shows how to do authenticate users with Biometrics
| Lesson 20 Preview | +|

Lesson 21: DataStore


(W.I.P.) This lesson shows how to use Android DataStore
| Lesson 21 Preview | +|

Lesson 22: Media3 ExoPlayer


(W.I.P.) This lesson shows how to use ExoPlayer from Media3
| Lesson 22 Preview | ## Contributors [![All Contributors](https://img.shields.io/badge/all_contributors-11-orange.svg?style=flat-square)](#contributors-) Contributions are welcome! If you have any ideas, suggestions, or improvements, please open an issue or submit a pull request. diff --git a/app/src/main/java/com/example/jetpack_compose_all_in_one/ui/components/CustomUi.kt b/app/src/main/java/com/example/jetpack_compose_all_in_one/ui/components/CustomUi.kt index bfba3f76..5f5bfa91 100644 --- a/app/src/main/java/com/example/jetpack_compose_all_in_one/ui/components/CustomUi.kt +++ b/app/src/main/java/com/example/jetpack_compose_all_in_one/ui/components/CustomUi.kt @@ -55,15 +55,16 @@ fun ExpandableContent( modifier = Modifier .fillMaxWidth() .clickable { expandState.value = !expandState.value }, - verticalAlignment = Alignment.CenterVertically + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.SpaceBetween ) { + container() if (needArrow) { Icon( painterResource( if (expandState.value) R.drawable.baseline_expand_less_24 else R.drawable.baseline_expand_more_24 - ), "", Modifier.padding(start=16.dp) ) + ), "") } - container() } if (expandState.value) { Row(Modifier.fillMaxWidth()){ diff --git a/app/src/main/java/com/example/jetpack_compose_all_in_one/ui/components/NavigationDrawerMain.kt b/app/src/main/java/com/example/jetpack_compose_all_in_one/ui/components/NavigationDrawerMain.kt index 41090add..1f9302ab 100644 --- a/app/src/main/java/com/example/jetpack_compose_all_in_one/ui/components/NavigationDrawerMain.kt +++ b/app/src/main/java/com/example/jetpack_compose_all_in_one/ui/components/NavigationDrawerMain.kt @@ -1,5 +1,8 @@ package com.example.jetpack_compose_all_in_one.ui.components +import androidx.compose.foundation.ExperimentalFoundationApi +import androidx.compose.foundation.basicMarquee +import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding @@ -19,6 +22,8 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.res.painterResource import androidx.compose.ui.unit.dp import androidx.navigation.NavController +import com.example.jetpack_compose_all_in_one.ui.theme.dp_16 +import com.example.jetpack_compose_all_in_one.ui.theme.dp_8 import com.example.jetpack_compose_all_in_one.ui.theme.sp_32 import com.example.jetpack_compose_all_in_one.ui.theme.spaceLarge import com.example.jetpack_compose_all_in_one.ui.views.theming.ThemeSettingsRow @@ -44,7 +49,7 @@ fun NavigationDrawerMain( ModalDrawerSheet { DrawerHeader() ScrollableColumn( - Modifier.weight(1f) + Modifier.weight(1f).padding(horizontal = dp_16) ) { NavDes.drawerList.forEach { DrawerCategoryAndItem(it) { des -> @@ -62,6 +67,7 @@ fun NavigationDrawerMain( ) { content() } } +@OptIn(ExperimentalFoundationApi::class) @Composable private fun DrawerCategoryAndItem( item: NavDes, @@ -71,7 +77,8 @@ private fun DrawerCategoryAndItem( ExpandableContent({ Text( item.data.displayName, - Modifier.padding(ButtonDefaults.TextButtonContentPadding), + Modifier.padding(ButtonDefaults.TextButtonContentPadding) + .basicMarquee(), MaterialTheme.colorScheme.onSurfaceVariant ) }) { @@ -81,11 +88,14 @@ private fun DrawerCategoryAndItem( } } else { item.data as NavigationDrawerData // This is for smart casting - NavigationDrawerItem( - selected = false, - label = { Text(item.data.displayText) }, - icon = item.data.iconResId?.run { { Icon(painterResource(this), "") } }, - onClick = { onItemClick(item) }) + Text( + item.data.displayText, + Modifier.padding(ButtonDefaults.TextButtonContentPadding) + .fillMaxWidth() + .basicMarquee() + .clickable { onItemClick(item) }, + MaterialTheme.colorScheme.onSurfaceVariant + ) } } diff --git a/app/src/main/java/com/example/jetpack_compose_all_in_one/utils/navigation/NavConstants.kt b/app/src/main/java/com/example/jetpack_compose_all_in_one/utils/navigation/NavConstants.kt index 6b549153..12bd7f7a 100644 --- a/app/src/main/java/com/example/jetpack_compose_all_in_one/utils/navigation/NavConstants.kt +++ b/app/src/main/java/com/example/jetpack_compose_all_in_one/utils/navigation/NavConstants.kt @@ -105,7 +105,7 @@ object NavConstants { const val LESSON_6_CHAPTER_1_ABOUT = "Lesson 6: Theme change" const val LESSON_7_CHAPTER_1 = "Lesson_7_Chapter_1" - const val LESSON_7_CHAPTER_ABOUT = "Lesson 7:Constraint Layout" + const val LESSON_7_CHAPTER_ABOUT = "Lesson 7: Constraint Layout" const val LESSON_8_ANIMATIONS = "Lesson_8_Animations" const val LESSON_8_ANIMATIONS_ABOUT = "Lesson 8: Animations" @@ -117,7 +117,7 @@ object NavConstants { const val LESSON_10_APP_BARS_ABOUT = "Lesson 10: App bars" const val LESSON_11_INTEROPERABILITY = "LESSON_11_INTEROPERABILITY " - const val LESSON_11_INTEROPERABILITY_ABOUT = "Lesson 11: Interoperability" + const val LESSON_11_INTEROPERABILITY_ABOUT = "Lesson 11: XML Interoperability" const val LESSON_12_WEBVIEW = "LESSON_12_WEB_VIEW " const val LESSON_12_WEBVIEW_ABOUT = "Lesson 12: Web View"