I've spent the last few weeks learning well-nigh compose and decided to write a mail service to share my notes. This post is not meant to teach y'all everything virtually Compose but rather it'll be more than like a roadmap that you lot tin apply to learn Compose or to come across what you lot still don't know about Compose.

This article will be constantly updated equally I learn new things.

State hoisting

Country hoisting is a pattern of moving state upwards to brand a component stateless.

When applied to composables, this often ways introducing two parameters to the composable.

  • value: T – the current value to display
  • onValueChange: (T) -> Unit – an upshot that requests the value to change, where T is the proposed new value

CompositionLocal

Tool for passing data downwards through the Limerick implicitly.

compositionLocalOf

Changing the value provided during recomposition invalidates only the content that reads its current value.

staticCompositionLocalOf

Reads of a staticCompositionLocalOf are not tracked by Compose. Changing the value causes the entirety of the content lambda where the CompositionLocal is provided to be recomposed.

If the value provided to the CompositionLocal is highly unlikely to modify or volition never change, use staticCompositionLocalOf to get performance benefits.

Keeping rail of changes

call up

A value computed by remember will be stored in the composition tree, and simply exist recomputed if the keys to remember modify.

When adding retention to a composable, always ask yourself "will some caller reasonably want to command this?"

  • If the answer is yep, make a parameter instead.
  • If the reply is no, keep it as a local variable.

Remember stores values in the Limerick, and will forget them if the composable that called remember is removed. This ways you shouldn't rely upon call back to store of import things within of composables that add and remove children such as LazyColumn.

rememberSaveable

It behaves similarly to call back, only the stored value volition survive the activeness or process recreation using the saved example land mechanism

rememberUpdatedState

In some situations you lot might want to capture a value in your effect that, if it changes, you lot do non want the upshot to restart. Create a reference to this value which tin exist captured and updated.

rememberLauncherForActivityResult

rememberCoroutineScope

In society to launch a coroutine outside of a composable, just scoped and so that information technology will exist automatically canceled one time it leaves the limerick

LaunchedEffect is used for scoping jobs initiated past the composition. rememberCoroutineScope is for scoping jobs initiated by a user interaction.

LaunchedEffect

Call append functions safely from inside a composable.

The coroutine will be cancelled if LaunchedEffect leaves the composition.

If LaunchedEffect is recomposed with different keys, the existing coroutine will exist cancelled and the new suspend function volition exist launched in a new coroutine.

snapshotFlow

Convert Compose State<T> objects into a Flow.

DisposableEffect

DisposableEffect is meant for side effects that need to be cleaned up after the keys change or the composable leaves the Limerick

derivedStateOf

derivedStateOf is used when you want a Etch State that'southward derived from another State.

State Holder

State holders always need to be remembered in order to keep them in the Composition and not create a new one every time. Information technology's a good exercise to create a method in the same file that does this to remove boilerplate and avert whatever mistakes that might occur.

Layouts

LazyColumn and LazyRow

Don't recycle their children like RecyclerView. It emits new Composables as you scroll through it and is withal performant every bit emitting Composables is relatively cheap compared to instantiating Android Views.

ConstraintLayout

Layout

Instead of decision-making how a single composable gets measured and laid out on the screen, you lot might accept the same necessity for a grouping of composables. For that, you can use the Layout composable to manually control how to measure out and position the layout'due south children.

Intrinsic measurements

Row(modifier = modifier.meridian(IntrinsicSize.Min))

Navigation

ViewModel

Animation

You can create an blitheness value past simply wrapping the irresolute value with the respective variant of animate*AsState composables.

  • Bladder, Color, Dp, Size, Bounds, Offset, Rect, Int, IntOffset, and IntSize

Yous can combine multiple transition objects with a + operator.

AnimatedVisibility

  • Content within AnimatedVisibility (directly or indirect children) can use the animateEnterExit modifier to specify different animation behavior for each of them.

AnimatedContent

  • SizeTransform defines how the size should animate between the initial and the target contents.

animateContentSize

  • Animates a size change

Crossfade

  • Animates between ii layouts with a crossfade blitheness.

Animatable

  • Animatable is a value holder that can breathing the value as it is changed via animateTo.
  • snapTo sets the current value to the target value immediately.
  • animateDecay starts an blitheness that slows downwards from the given velocity.

InfiniteTransition

  • Holds one or more child animations like Transition, merely the animations start running as presently every bit they enter the limerick and do non finish unless they are removed.
  • Use the rememberInfiniteTransition function.

Transition

Transition manages one or more animations equally its children and runs them simultaneously between multiple states.

AnimationSpec

Theming

When defining colors, we name them "literally", based on the color value, rather than "semantically" e.grand. Red500 not principal. This enables us to define multiple themes e.grand. some other color might exist considered primary in dark theme or on a differently styled screen.

isSystemInDarkTheme() / MaterialTheme.colors.isLight

colour: Color = MaterialTheme.colors.surface, contentColor: Color = contentColorFor(color)

When setting the color of any elements, prefer using a Surface to do this as it sets an appropriate content color CompositionLocal value, be wary of direct Modifier.background calls which do not prepare an appropriate content color.

TextFieldDefaults

textFieldColors

outlinedTextFieldColors

ProvideTextStyle

And then how do components set a theme typography style? Under the hood they employ the ProvideTextStyle composable (which itself uses a CompositionLocal) to set a "current" TextStyle. The Text composable defaults to querying this "current" style if y'all exercise not provide a concrete textStyle parameter.

Resource

Fonts

buildAnnotatedString

Generic Modifiers

Gesture Modifiers

Miscelaneous

LocalSoftwareKeyboardController

LocalOnBackPressedDispatcherOwner and BackHandler

LocalDensity

FocusRequester

Cheers for reading. If you have whatever suggestions experience free to contact me.

Resource

https://developer.android.com/jetpack/etch/architecture

https://developer.android.com/jetpack/compose/resources

https://programmer.android.com/jetpack/compose/animation

https://developer.android.com/jetpack/compose/gestures

https://programmer.android.com/jetpack/etch/navigation

https://programmer.android.com/jetpack/etch/modifiers-list

https://developer.android.com/jetpack/compose/mental-model

https://developer.android.com/jetpack/etch/compositionlocal

https://developer.android.com/codelabs/jetpack-compose-basics

https://developer.android.com/codelabs/jetpack-compose-layouts

https://developer.android.com/codelabs/jetpack-compose-land

https://developer.android.com/codelabs/jetpack-compose-theming

https://developer.android.com/codelabs/jetpack-compose-animation

https://developer.android.com/codelabs/jetpack-compose-navigation

https://developer.android.com/codelabs/jetpack-compose-advanced-state-side-furnishings

https://developer.android.com/reference/kotlin/androidx/compose/runtime/saveable/bundle-summary