A complete Android UI development guideline with Jetpack Compose is described here.
Reference link:
https://developer.android.com/jetpack/compose/documentation
(SHREYA) Chakan Call Girls Just Call 7001035870 [ Cash on Delivery ] Pune Esc...
Modern app development with Jetpack Compose.pptx
1. Modern app development with
Jetpack Compose
Md Shamsul Arafin Mahtab
Software Engineer (Android), Therap Services
2. Why Adopt Compose
● Less Code
● Declarative API
● Faster Development
● Powerful
“For the same Button class it [the code] was 10x
of magnitude smaller.” (Twitter)
“Significant reduction for any screen built with a
RecyclerView.” (Monzo)
“Reading the code for complicated components
is easier.” (Square)
3. Why Adopt Compose
● Less Code
● Declarative API
● Faster Development
● Powerful
“Theming layer is vastly more intuitive and
legible.” (Twitter)
“UI components that were stateless, easy to use
and maintain, and intuitive to
implement/extend/customize.” (Twitter)
4. Why Adopt Compose
● Less Code
● Declarative API
● Faster Development
● Powerful
“We didn’t have to think about things like light
and dark mode.” (Cuvva)
“Previews in Android Studio have been a big
time saver.” (Square)
5. Why Adopt Compose
● Less Code
● Declarative API
● Faster Development
● Powerful
“Animations are so easy to add.” (Monzo)
“Accessibility apis have been improved.”
(Square)
12. ● All Composable functions must have
@Composable annotation; this
annotation informs the Compose
compiler that this function is intended to
convert data into UI.
● The function doesn't return anything.
● This function is fast, idempotent, and
free of side-effects.
A compose function
13. The declarative widgets
1. Widgets are relatively stateless
2. They do not expose any setter or getter functions
3. Widget are not exposed as objects
4. Composables are responsible for transforming the current application state into a UI
every time the observable data updates
14. A compose app example
Scaffold
Currencies
Timeline
Column
CurrencyPicker
Spacer
Spacer
Spacer
Box
CurrencyPicker
Icon
TextField
Dropdown
TopAppBar
BottomBar
Navigation Converter
TextField
Dropdown
Base
Current
1
USD
17. Things to be aware of
1. Composable functions can execute in any order
2. Composable functions can run in parallel
3. Recomposition skips as much as possible
4. Recomposition is optimistic
5. Composable functions might run quite frequently
20. Use of remember and rememberSaveable
1. remember composables stores single objects in memory by composable functions,
retain state across recomposition.
2. rememberSaveable same as remember, except retain states across configuration
changes.
21. Other supported types of State
1. LiveData
2. Flow
3. RxJava2
These observable types are converted to State<T> before reading it to Compose.
22. is a pattern of moving state to a composable's
caller to make a composable stateless.
State Hoisting
➔ value: T: the current value to display
➔ onValueChange: (T) -> Unit: an event
that requests the value to change, where
T is the proposed new value
25. State Management
Depending on the complexity of the composable, these are the alternatives to consider:
● Composables for simple UI element state management.
● State holders for complex UI element state management. They own UI elements' state and UI
logic.
● Architecture Components ViewModels as a special type of state holder in charge of providing
access to the business logic and the screen or UI state.
26. Use of Key
Recomposition (new
item added to top)
Calling a composable multiple times with key will help
to identify each composition distinct.
27. Use of Stable
Annotating the type with @Stable to allow Compose to favor smart recompositions if Compose
is not able to infer the stability of a type.
28. Modifiers
to decorate or augment a composable.
● Change the composable's size, layout, behavior, and appearance
● Add information, like accessibility labels
● Process user input
● Add high-level interactions, like making an element clickable, scrollable, draggable, or zoomable
31. Effects and Side-effects in Compose
1. A side-effect is a change to the state
of the app that happens outside the
scope of a composable function.
2. An effect is a composable function
that doesn't emit UI and causes side
effects to run when a composition
completes.
Effect {
Side Effect
}
Called from a controlled environment
that is aware of the lifecycle of the
composable.
32. LaunchedEffect
To call suspend functions safely from inside a composable,
LaunchedEffect composable to use.
Example: Showing error message on a Snackbar if a UI state
contains an error.
rememberCoroutineScope
To launch a coroutine outside of a composable, but
scoped so that it will be automatically canceled
once it leaves the composition.
Example: Showing a Snackbar when the user taps.
DisposableEffect
Effects that need to cleaned up after keys change or
the composables leaves the composition.
@Composable
fun HomeScreen(key: Key) {
DisposableEffect(key) {
val observer = Observer { }
addObserver(observer)
onDispose {
removeObserver(observer)
}
}
}
rememberUpdatedState
Capture a value in the effect
that, while recomposition,
the effect will not restart.
Example: Splash Screen.
SideEffect
To share Compose state
with objects not managed
by compose, SideEffect
composable to use.
produceState
Convert non-Compose state
into Compose state.
Example: Loading network
image and convert it to
State object.
@Composable
fun loadNetworkImage(
url: String,
imageRepository: ImageRepository
): State<Result<Image>> {
return
produceState<Result<Image>> {
//TODO }
}
34. Phases of Android View System
Composition Layout Drawing
Measurement Placement
35. Compose Architecture Layering
Runtime UI Foundation Material
Compose is created from a number of modules which are assembled together to form a complete
stack
Each layer is built upon the lower levels, combining functionality to create higher level components.
36. Use of CompositionLocal
● CompositionLocal is a tool for passing
data down through the Composition
implicitly.
● It is what the Material theme uses under
the hood.
● MaterialTheme is an object that provides
three CompositionLocal instances--
colors, typography and shapes
Manipulating views manually increases the chance of errors
Picker event notifies the app logic. Then the logic provides data to the top-level composable functions. That functions uses the data to describe the UI by calling other composables.
In an imperative UI model, to change a widget, you call a setter on the widget to change its internal state. In Compose, you call the composable function again with new data. Doing so causes the function to be recomposed--the widgets emitted by the function are redrawn, if necessary, with new data. The Compose framework can intelligently recompose only the components that changed.
derivedStateOf: convert one or multiple state objects into another state
snapshotFlow: convert Compose's State into Flows