New Compose Multiplatform components arrived on Composables UICheck it out →

← Component in Material Compose

PullRefreshIndicator

Common

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

Last updated:

Installation

dependencies {
   implementation("androidx.compose.material:material:1.7.0-beta04")
}

Overloads

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

Parameters

namedescription
refreshingA boolean representing whether a refresh is occurring.
stateThe [PullRefreshState] which controls where and how the indicator will be drawn.
modifierModifiers for the indicator.
backgroundColorThe color of the indicator's background.
contentColorThe color of the indicator's arc and arrow.
scaleA boolean controlling whether the indicator's size scales with pull progress or not.

Code Example

PullRefreshSample

@OptIn(ExperimentalMaterialApi::class
@Composable
@Sampled
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))
    }
}