Compose Notes

(Ref. https://developer.android.com)

Documents

- Compose handles nested layouts efficiently, This is an improvement from Android Views, where you need to avoid nested layouts for performance reasons.
- It is a best practice to pass a modifier to every composable and set it to a default value.
- In Compose, The only way to update the UI is by changing the state of the app. Hence, you can control only state not ui, UI is Dependent on State
- UDF (Unidirectional Data Flow), It is a Design Pattern in which, state flows `down` and event flows `up`
- APK = Android Package (Application Package File) - Compose BOM = Compose Bill Of Material
- You can change screen withOut NavHost also, just change state of screen it will auto recompose, but this won't maintain backstack, for this you just have to add BackHandler(enabled = true){ onBackPressed() }
- Compose transforms Data into UI by 3 Phase Data --> Composition --> Layout --> Drawing --> UI

Recycler View Notes

- In Scrollable List, 1) Define Separate Layout in Separate compose function, 2) Call same layout function from lazyColumn {items() { composeFun(param) } }
- When Create Model Class For LazyRow || LazyColumn (i.e. RecyclerView) make sure you annotate string with @StringRes val string:Int and drawableImage with @DrawableRes val drawableImage: Int, For Example, data class Affirmation(@StringRes val string:Int,@DrawableRes val image: Int)

Color Picker : Material Color Picker
Color: #[ALPHA][RED][GREEN][BLUE] = #[FF][80][00][88] = #FF800088
Alpha from
#00(colorCode) = 0 % Opacity = Full Transparent ---to---> to #FF(colorCode) = 100% Opacity = No Transparent (Solid)

Adaptive Layout Screen Size (Breakpoint)

Breakpoint Range (dp)	Portrait	Landscape	Window Size class	Column	Minimum Margin
0 - 599	Handset	Phone	Compat	4	8
600 - 839	Foldable Small Tablet	Foldable Small Tablet	Medium	12	12
840+	Large Tablet	Large Tablet	Expanded	12	32

Window class (width)	Breakpoint (dp)	Common devices
Compact	Width < 600	Phone in portrait
Medium	600 ≤ width 840	Tablet in portrait Foldable in portrait (unfolded)
Expanded	840 ≤ width < 1200*	Phone in landscape Tablet in landscape Foldable in landscape (unfolded) Desktop

Jetpack Compose already has window size class WindowSizeClass
Make sure you have this dependency { implementation("androidx.compose.material3:material3-window-size-class:1.1.2") }

To call suspend function safely from compose you need to use LaunchedEffect { ... } composable

LaunchedEffect(vararg keys: Any?) {...} LaunchedEffect(key1:Any?) {...} LaunchedEffect(key1:Any?, key2: Any?) {...} LaunchedEffect(key1:Any?, key2: Any?, key3: Any?) {...} LaunchedEffect(key1:Any?, key2: Any?, key3: Any?) {...}