Top 5 Extension Functions Every Jetpack Compose Developer Should Have

Bonus: 5 Must-Have Extensions for the View System as well

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 | Follow me on Medium | Buy me a coffee