Jetpack Compose is a contemporary Android UI toolkit that enables builders to construct native Android apps utilizing a declarative strategy. With Compose, we are able to create person interface components as composable features, making it simpler to reuse code and customise UI components. Nevertheless, one of many challenges with utilizing Compose is re-layout, which may have an effect on software efficiency and person expertise.
On this article, we’ll give attention to decreasing reordering and enhancing Enhancing efficiency by exploring a use case for creating progress textual content that shows some textual content with a dynamic background vertically. horizontal. We are going to take a look at completely different options to this impact and evaluate their efficiency.
Assets:
Earlier than we dive into the answer, you will need to seek the advice of two important assets that present detailed details about Jetpack Compose efficiency:
- Observe finest practices: This text supplies finest practices for optimizing efficiency in Jetpack Compose.
- Jetpack Compose Debug Refactoring: This text explains the Compose levels and debug reordering to optimize software efficiency.
- Jetpack drafting ideas: This information from Stream supplies invaluable perception into finest practices for utilizing Jetpack Compose, together with write skippable and recombinable combination features to enhance efficiency .
We wish to show a progress textual content factor consisting of a static textual content string and a dynamic background displaying the progress of an operation. The background animates horizontally to the correct for two seconds, whereas the textual content stays static.
@Composable
non-public enjoyable animationProgress(): State {
var animationStarted by keep in mind { mutableStateOf(false) }
val progress = animateFloatAsState(
targetValue = if (animationStarted) 1f else 0f,
animationSpec = tween(durationMillis = 2000)
)
LaunchedEffect(animationStarted) {
animationStarted = true
}
return progress
}
The animationProgress the perform creates an animated state with an preliminary worth of Zero. We use animateFloatAsState to animate the worth from 0f to 1f in 2 second intervals.
Now let’s begin the essential implementation of this progress textual content factor utilizing Jetpack Compose:
@Composable
enjoyable ProgressTextWithShape(
title: String,
progressColor: Coloration,
progress: Float,
modifier: Modifier = Modifier
) {
Field(
modifier = modifier,
contentAlignment = Alignment.Heart
) {
Field(
modifier = Modifier
.peak(IntrinsicSize.Max)
.width(IntrinsicSize.Max)
) {
Spacer(
modifier = Modifier
.fillMaxHeight()
.fillMaxWidth()
.background(Coloration.White)
)
Spacer(
modifier = Modifier
.fillMaxHeight()
.fillMaxWidth(progress)
.background(progressColor)
)
Textual content(
textual content = "ProgressText $title!",
modifier = Modifier
.padding(16.dp)
)
}
}
}
Within the above code, we create a Field will be mixed with contentAlignment attribute is ready to Alignment.Heart such that the content material of Field can be centered. Inside Fieldwe make one other one Field composable will comprise our background and progress bar.
Firstly Spacer composable creates a white background for our progress bar. Second letter Spacer composable creates our progress bar. We set its width to fillMaxWidth(progress) respectively, the place progress is the float worth that determines the progress of the bar. We additionally apply the background modifier to set its shade to the specified progress shade. Lastly, we add our progress textual content as Textual content will be mixed with a padding modifier so as to add some spacing between textual content and progress bar.
This strategy is a bit difficult, because it requires us to set the proper intrinsic measurement for every pad, and it could possibly result in numerous rearrangements. In reality, this implementation reorders 235 occasions, which may have a adverse influence on efficiency.
@Composable
enjoyable ProgressText(
title: String,
progressColor: Coloration,
progress: Float,
modifier: Modifier = Modifier
) {
Field(
modifier = modifier,
contentAlignment = Alignment.Heart
) {
Textual content(
textual content = "ProgressText $title!",
modifier = Modifier
.background(Coloration.White)
.drawBehind {
drawRect(
shade = progressColor,
measurement = measurement.copy(
width = measurement.width * progress
)
)
}
.padding(16.dp)
)
}
}
This resolution makes use of drawBehind modifier to attract a coloured rectangle behind the textual content. From drawBehind utilized when the compositing is within the drawing stage and has entry to its width and peak, it is easier than the earlier resolution.
Nevertheless, it nonetheless recomposes 238 occasions as a result of progress worth is modified 238 occasions because of animation. The result’s, ProgressText can be re-layouted, and simply because the inline aggregates are non-skippable and restartable, the textual content may also be re-layouted. These refactorings are pointless and will be improved upon.
Subsequent, let’s check out the third resolution that improves efficiency by decreasing re-sums.
@Composable
enjoyable ProgressText(
title: String,
progressColor: Coloration,
progress: State,
modifier: Modifier = Modifier
) {
Field(
modifier = modifier,
contentAlignment = Alignment.Heart
) {
Textual content(
textual content = "ProgressText $title!",
modifier = Modifier
.background(Coloration.White)
.drawBehind {
drawRect(
shade = progressColor,
measurement = measurement.copy(
width = measurement.width * progress.worth
)
)
}
.padding(16.dp)
)
}
}
This resolution additionally makes use of Field And Textual content composables to show the progress textual content, however this time the progress worth is handed in as State Factor. The progress worth used to attract a rectangle behind the textual content, representing the progress bar. Compose can skip the composition and format levels fully when the progress worth adjustments.
This resolution leverages the ability of Jetpack Compose’s state administration system to make sure that progress values are effectively up to date with out triggering pointless refactoring. By utilizing one State object, the ProgressText the perform will solely be reordered when the state object itself adjustments. On this case, the state object doesn’t change, however the worth is internally retrieved drawBehind block can be up to date when progress worth adjustments. This strategy minimizes refactoring and improves the general efficiency of the person interface.
It’s value noting that should you move a State for the primary resolution as an alternative of Float it would nonetheless be reordered. It’s because Spacer will be synthesized inside ProgressTextWithShape composable will must be recompiled each time the state adjustments.
BrieflyJetpack Compose is a strong person interface toolkit that permits builders to create stunning person interfaces that work declaratively. Nevertheless, recombination is usually a problem affecting software efficiency and person expertise. On this article, we explored the use case for making a progressive textual content factor with an animated background and checked out completely different options to scale back reordering and enhance efficiency. By utilizing State and recombinable features that may be ignored and restarted, we are able to tremendously scale back the variety of recombinations and enhance the efficiency of the composability of we. You could maintain these finest practices in thoughts when utilizing Jetpack Compose to construct high-quality, environment friendly, and user-friendly Android apps.