Top 5 Extension Functions Every Jetpack Compose Developer Should Have
Top 5 Extension Functions Every Jetpack Compose Developer Should Have 관련
Introduction
Writing clean, efficient code is key to being a successful Android developer, and extension functions help us achieve this by extending the capabilities of existing classes without modifying them. Jetpack Compose developers can especially benefit from extension functions to make their UIs more responsive and efficient. For those moments when you’re still working with the view system, we’ll also look at a few must-have extensions to simplify your code there too.
In this article, we’ll explore the top five extension functions that every Jetpack Compose developer should have in their toolkit, plus a bonus five extension functions for working with the view system.
Top 5 Extension Functions for Jetpack Compose
1. Modifier.clickableWithRipple
The ripple effect is a key aspect of Material Design, signaling to users that an item is clickable. While Jetpack Compose’s Modifier.clickable offers a basic clickable effect, adding a ripple effect can improve UI feedback. This extension function simplifies adding a ripple effect to any clickable component.
fun Modifier.clickableWithRipple(onClick: () -> Unit): Modifier {
return this.clickable(
indication = rememberRipple(), // Ripple indication
interactionSource = remember { MutableInteractionSource() }, // Handles multiple interactions
onClick = onClick
)
}
Usage Example
Text(
text = "Click Me",
modifier = Modifier.clickableWithRipple {
println("Text clicked!")
}
)
2. LazyColumn.scrollToTop
In Jetpack Compose, the LazyColumn is commonly used for displaying lists. However, scrolling back to the top of a list isn’t straightforward. This extension function allows you to call scrollToTop() directly on a LazyListState.
suspend fun LazyListState.scrollToTop() {
animateScrollToItem(0)
}
Usage Example
val listState = rememberLazyListState()
LazyColumn(state = listState) {
items(100) { index ->
Text(text = "Item #$index")
}
}
// Trigger the scroll to top
LaunchedEffect(Unit) {
listState.scrollToTop()
}
3. Modifier.roundedBackgroundWithPadding
Add rounded corners and padding to any composable in a single line, simplifying repetitive code.
fun Modifier.roundedBackgroundWithPadding(
backgroundColor: Color,
cornerRadius: Dp,
padding: Dp
): Modifier {
return this
.background(backgroundColor, shape = RoundedCornerShape(cornerRadius))
.padding(padding)
}
Usage Example
Text(
text = "Rounded Background with Padding",
modifier = Modifier.roundedBackgroundWithPadding(
backgroundColor = Color.LightGray,
cornerRadius = 12.dp,
padding = 8.dp
)
)
4. Modifier.showIf
Toggle visibility using a Boolean condition with showIf. This extension keeps the modifier chain clean and avoids using if conditions directly within the composable.
fun Modifier.showIf(condition: Boolean): Modifier {
return if (condition) this else Modifier.size(0.dp)
}
Usage Example
Text(
text = "Conditionally Visible",
modifier = Modifier.showIf(isVisible)
)
If isVisible is false, the Text composable effectively becomes hidden.
5. Modifier.animateVisibility
To achieve a fade-in and fade-out effect based on a visibility condition, use this animateVisibility extension. It uses alpha to gradually display or hide the component.
fun Modifier.animateVisibility(isVisible: Boolean): Modifier {
return if (isVisible) {
this.alpha(1f)
} else {
this.alpha(0f)
}
}
Usage Example
Text(
text = "Animated Visibility",
modifier = Modifier.animateVisibility(isVisible)
)
Bonus: 5 Essential Extension Functions for the View System
1. View.visible() / View.gone()
Switching between VISIBLE and GONE is a common task. These extension functions make it easier to handle visibility changes directly on a View.
fun View.visible() {
this.visibility = View.VISIBLE
}
fun View.gone() {
this.visibility = View.GONE
}
Usage Example
myView.visible() // Make the view visible
myView.gone() // Hide the view by setting it to GONE
2. View.showIf(condition: Boolean)
Similar to the showIf modifier in Jetpack Compose, this extension toggles the visibility of a View based on a Boolean condition.
fun View.showIf(condition: Boolean) {
this.visibility = if (condition) View.VISIBLE else View.GONE
}
Usage Example
myView.showIf(isDataAvailable)
3. TextView.setTextColorRes(resId: Int)
Setting colors using resource IDs helps maintain consistency. This function allows setting a color resource directly on a TextView, improving readability.
fun TextView.setTextColorRes(@ColorRes resId: Int) {
this.setTextColor(ContextCompat.getColor(context, resId))
}
Usage Example
myTextView.setTextColorRes(R.color.primaryColor)
4. EditText.clearText()
Clearing an EditText is a frequent task, often done by setting an empty string. This clearText extension keeps code clean and expressive.
fun EditText.clearText() {
this.setText("")
}
Usage Example
myEditText.clearText() // Clears the text in the EditText
5. ImageView.loadImage(url: String)
Loading images is streamlined with libraries like Glide or Coil. This extension function integrates Glide, allowing you to load images directly with a URL.
fun ImageView.loadImage(url: String) {
Glide.with(this.context)
.load(url)
.into(this)
}
Usage Example
myImageView.loadImage("https://example.com/image.jpg")
Conclusion
Extension functions are a powerful tool in Android development, enabling you to write cleaner, more expressive code. By incorporating these functions, you can simplify your development process, making it easier to work with Jetpack Compose as well as the traditional view system.
Dobri Kostadinov
Android Consultant | Trainer
Email me | Follow me on LinkedIn (dobrikostadinov) | Follow me on Medium (dobri.kostadinov) | Buy me a coffee
This article is previously published on proandroiddev.com
