Material3 PullToRefresh for Jetpack Compose

Exploring the new and improved way to implement the PullToRefresh in your Compose UI

Material 3 represents a significant evolution in design, providing a comprehensive toolkit to craft modern, visually compelling user interfaces. However, the initial release lacked some essential components, including the pull-to-refresh feature. This absence presented a challenge for developers looking to migrate from Material to Material 3.

Fortunately, the latest Material 3 update introduces a robust PullToRefresh implementation, that guaranteed a seamless integration into your Compose UI.

In this article, we’ll delve into the evolution of the PullToRefresh, comparing the old and new approaches. We’ll explore the migration process and how adopting the new Material 3 component can streamline your codebase.

Material implementation

Let’s start by examining the Material implementation.

val pullRefreshState =
    rememberPullRefreshState(
      refreshing = loaderVisible, 
      onRefresh= { items.refresh() }
    )

Box(
    modifier = Modifier
        .fillMaxSize()
        .pullRefresh(pullRefreshState),
) {
//your list
//...
 PullRefreshIndicator(
        refreshing = loaderVisible,
        state = pullRefreshState,
        modifier = Modifier.align(Alignment.TopCenter),
        scale = true,
    )
}

The core components are the rememberPullRefreshState function and the pullRefresh modifier. The function rememberPullRefreshState creates a PullRefreshState object, which manages the pull-to-refresh behavior. This state is then applied to a composable using the pullRefresh modifier. Finally, a PullRefreshIndicator to visually represent the refresh process.

While this implementation provided a solid foundation for pull-to-refresh functionality, it had a minor drawback. To utilize the feature, developers were obligated to include a PullRefreshIndicator component even if they desired the default visual representation. This, for me, added an unnecessary step to the process.

Problematic migration to Material 3

Migrating to Material 3 presented a challenge due to the absence of a direct PullToRefresh counterpart. Faced with the options of creating a custom implementation from scratch or adapting the existing Material component, I opted for the second one. By copying key components, I was able to maintain similar functionality in my Material 3 application.

When you need to do an operation like this, I suggest to define the package names carefully to prevent potential conflicts and maintain code organization.

Clearly, this approach was a temporary workaround rather than an optimal solution. It allowed for the continued use of the pull-to-refresh feature without requiring the maintenance of both Material and Material 3 dependencies. However, it was not a sustainable long-term strategy.

New component

Thankfully, Material 3 has introduced a robust and well-implemented PullToRefreshBox component. To leverage this new feature, simply update your Material 3 dependency, I’m using the version 1.3.0-beta05.

[versions]
material3 = "1.3.0-beta05"
...
[libraries]
androidx-material3 = { group = "androidx.compose.material3", name = "material3", version.ref = "material3" }
...

...
 implementation(libs.androidx.material3)
...

With the libs.versions.toml updated and the necessary dependency included in the build.gradle.kts, we can now delve into the implementation details of the new PullToRefreshBox component.

 PullToRefreshBox(
        modifier = modifier
            .fillMaxSize(),
        isRefreshing = loaderVisible,
        onRefresh = { lazyBooksItems.refresh() }) {

//your list
//...
}

Implementing the pull-to-refresh is now straightforward. Simply replace the Box, with the existing pullRefresh modifier, with the PullToRefreshBox. Then migrate the refreshing and onRefresh parameters from the state to the PullToRefreshBox component.

Once these changes are made, the old implementation can be safely removed.

For those requiring a custom indicator, the PullToRefreshBox offers customization options.

Beyond that, the new implementation is remarkably simple! There’s no need for additional components to achieve the standard pull-to-refresh behavior, and the provided parameters allow for tailored visual adjustments as needed.

Conclusions

The introduction of the PullToRefresh component in Material 3 addresses a significant gap that existed in its initial release. Developers can now seamlessly integrate pull-to-refresh functionality into their Jetpack Compose UI without resorting to custom implementations or retaining dependencies from previous Material versions.

The journey from the initial Material implementation to the modern Material 3 approach highlights the evolution of the platform and the benefits of staying updated with the latest tools and libraries. Developers can now confidently incorporate pull-to-refresh functionality into their Compose applications without the complexities of previous versions.

In summary, the PullToRefresh component in Material 3 enhances the development process by providing a more intuitive, efficient, and customizable solution for implementing pull-to-refresh functionality in Compose UI. This update is a welcomed improvement, making the migration to Material 3 smoother and more practical for developers.

Feel free to share your comments, or if you prefer, you can reach out to me on LinkedIn.

Have a great day!