PullRefreshIndicator

Component in Material Compose

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

Last updated: 2024-10-22 13:47

Installation

dependencies {
   implementation("androidx.compose.material:material:1.8.0-alpha04")
}

Overloads

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

Parameters

name	description
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 Example

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))
    }
}