PullRefreshIndicator

Composable Component

The default indicator for Compose pull-to-refresh, based on Android's SwipeRefreshLayout.

Common

@Composable
@ExperimentalMaterialApi
fun PullRefreshIndicator(
    refreshing: Boolean,
    state: PullRefreshState,
    modifier: Modifier = Modifier,
    backgroundColor: Color = MaterialTheme.colors.surface,
    contentColor: Color = contentColorFor(backgroundColor),
    scale: Boolean = false,
)

Parameters


refreshing	A boolean representing whether a refresh is occurring.
state	The `PullRefreshState` which controls where and how the indicator will be drawn.
modifier	Modifiers for the indicator.
backgroundColor	The color of the indicator's background.
contentColor	The color of the indicator's arc and arrow.
scale	A boolean controlling whether the indicator's size scales with pull progress or not.

Code Examples

PullRefreshSample

@Composable
@OptIn(ExperimentalMaterialApi::class)
fun PullRefreshSample() {
    val refreshScope = rememberCoroutineScope()
    var refreshing by remember { mutableStateOf(false) }
    var itemCount by remember { mutableStateOf(15) }
    fun refresh() =
        refreshScope.launch {
            refreshing = true
            delay(1500)
            itemCount += 5
            refreshing = false
        }
    val state = rememberPullRefreshState(refreshing, ::refresh)
    Box(Modifier.pullRefresh(state)) {
        LazyColumn(Modifier.fillMaxSize()) {
            if (!refreshing) {
                items(itemCount) { ListItem { Text(text = "Item ${itemCount - it}") } }
            }
        }
        PullRefreshIndicator(refreshing, state, Modifier.align(Alignment.TopCenter))
    }
}

Create your own Component Library

Material Components are meant to be used as is and they do not allow customizations. To build your own Jetpack Compose component library use Compose Unstyled