Android Jetpack Compose SwipeRefresh: Easily Implement Pull-to-Refresh for Lists!

Introduction

Continuing from the previous article:

Cover

Jetpack Compose: Easily Implement Dynamically Updating List Data with LazyColumn + ViewModel

Today we will continue to fully implement the pull-to-refresh feature based on Jetpack Compose LazyColumn.

Implementation Effect: Pull-to-Refresh List
Related Knowledge Used
  • JetpackCompose SwipeRefresh, LazyColumn
  • ViewModel

Combining the concepts introduced earlier,
and applying the SwipeRefresh component in Jetpack Compose,
you can easily achieve the target functionality.

Today we will learn how to use what we have learned before,
and integrate SwipeRefresh into the application.
This process is very intuitive,
and with just a few simple steps,
you can add pull-to-refresh functionality to your list.


Meaning of Each Variable

state is a boolean that observes whether a pull-to-refresh is happening.

onRefresh allows you to input the scope of the task to be done.

indicator allows you to set the details of the spinning symbol that appears during pull-to-refresh.
The code for this is as follows:

indicator = { state, trigger ->
            SwipeRefreshIndicator(
                state = state,
                refreshTriggerDistance = trigger,
                contentColor = Color.Black,
                arrowEnabled = true,
                fade = true,
                scale = true,
                backgroundColor = MaterialTheme.colors.primary,
            )
}

Other settings can be configured according to the names above,
such as size, background color, arrow appearance, arrow color, refresh distance, etc.

Another key point is
we use an isRefreshing variable and put it into the state variable required by SwipeRefresh.
The state of SwipeRefresh
will determine whether to show the spinning animation based on your status.
So when the status is true,
the spinning waiting animation will be present.
When it changes to false,
here I use LiveData and observe it as state,
and then observe the data retrieval after refreshing
to set it to end.

This pull-to-refresh
is simply completed.
You can also try it out quickly!

You might also enjoy