How to create swipe to refresh in Jetpack compose

Last updated Oct 09, 2021

In this Jetpack compose tutorial we will learn how to create swipe to refresh with Jetpack compose in Android application.

Let's get started

Step 1: Create android application in android studio

Step 2: Follow step for setup Jetpack Compose with Android Studio

To create swipe to refresh layout, we need to add some dependency in buld.gradle which will provide swipe to refresh layout just like SwipeRefreshLayout in traditional android.

implementation "com.google.accompanist:accompanist-swiperefresh:0.19.0"

Let's create a data class

data class Movie(val id: Int, val name: String, val genre: String, var year: Int)

Let's create a list that will be shown in the screen.

On refreshing, color of each item will change randomly

val movieList = listOf(
    Movie(id = 1, name = "GOLD", year = 2018, genre = "Sports"),
    Movie(id = 2, name = "URI", year = 2019, genre = "Patriotic"),
    Movie(id = 3, name = "DHOOM", year = 2004, genre = "Action"),
    Movie(id = 4, name = "LOC", year = 2003, genre = "Action,War"),
    Movie(id = 5, name = "BORDER", year = 1997, genre = "Action,War"),
    Movie(id = 6, name = "ZNMG", year = 2011, genre = "Adventure"),
    Movie(id = 7, name = "RUSTOM", year = 2016, genre = "Mystery"),
    Movie(id = 8, name = "MIRROR", year = 2008, genre = "Horror"),
    Movie(id = 9, name = "SHOLAY", year = 1975, genre = "Action,Drama,Comedy"),
    Movie(id = 10, name = "LAGAAN", year = 2001, genre = "Adventure,Sports"),
    Movie(id = 11, name = "TITANIC", year = 1997, genre = "Disaster")
)

To create this kind of layout we require two API one SwipeRefresh for layout and another rememberSwipeRefreshState which will remember the state.

var isRefreshing by remember { mutableStateOf(false) }
val swipeRefreshState = rememberSwipeRefreshState(isRefreshing)
JetPackTheme(
    darkTheme = true,
) {
    Scaffold(
        modifier = Modifier.fillMaxSize(),
        content = {
            SwipeRefresh(
                state = swipeRefreshState,
                onRefresh = {
                    isRefreshing = true
                },
            ) {
                LazyColumn(content = {
                    items(
                        items = movieList,
                        itemContent = {
                            MovieListItemView(it)
                        })
                })
            }

        },
        topBar = {
            TopAppBar(title = { Text("Swipe To Refresh") }
            )
        },
    )
    LaunchedEffect(isRefreshing) {
        if (isRefreshing) {
            delay(1000L)
            isRefreshing= false
        }
    }
}

Lets create ui for each movie item

@Composable
fun MovieListItemView(it: Movie) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 16.dp, vertical = 8.dp), content = {
            val color =
                Color(
                    Random.nextInt(256),
                    Random.nextInt(256),
                    Random.nextInt(256)
                )
            Box(
                content = {
                    Text(
                        text = it.name.get(0).uppercase(),
                        fontSize = 24.sp,
                        color = color
                    )
                }, modifier = Modifier
                    .size(80.dp)
                    .border(width = 1.2.dp, color = color, shape = CircleShape),
                contentAlignment = Alignment.Center
            )
            Spacer(modifier = Modifier.size(16.dp))
            Column(
                modifier = Modifier.weight(2F),
                content = {
                    Spacer(modifier = Modifier.size(8.dp))
                    Text(
                        text = it.name.uppercase(),
                        color = color,
                        fontSize = 16.sp,
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                    Text(
                        text = "${it.year}",
                        color = Color.White,
                        fontSize = 14.6.sp
                    )
                    Text(
                        text = it.genre,
                        color = Color.Gray,
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                })
        })
}

Full Code

package com.example.jetpack

import android.os.Bundle
import android.view.WindowManager
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.jetpack.ui.theme.JetPackTheme
import com.google.accompanist.swiperefresh.SwipeRefresh
import com.google.accompanist.swiperefresh.rememberSwipeRefreshState
import kotlinx.coroutines.delay
import kotlin.random.Random

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        window.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE)
        setContent {
            SwipeRefreshLayout()
        }
    }
}
data class Movie(val id: Int, val name: String, val genre: String, var year: Int)
@Composable
fun SwipeRefreshLayout() {
    val movieList = listOf(
        Movie(id = 1, name = "GOLD", year = 2018, genre = "Sports"),
        Movie(id = 2, name = "URI", year = 2019, genre = "Patriotic"),
        Movie(id = 3, name = "DHOOM", year = 2004, genre = "Action"),
        Movie(id = 4, name = "LOC", year = 2003, genre = "Action,War"),
        Movie(id = 5, name = "BORDER", year = 1997, genre = "Action,War"),
        Movie(id = 6, name = "ZNMG", year = 2011, genre = "Adventure"),
        Movie(id = 7, name = "RUSTOM", year = 2016, genre = "Mystery"),
        Movie(id = 8, name = "MIRROR", year = 2008, genre = "Horror"),
        Movie(id = 9, name = "SHOLAY", year = 1975, genre = "Action,Drama,Comedy"),
        Movie(id = 10, name = "LAGAAN", year = 2001, genre = "Adventure,Sports"),
        Movie(id = 11, name = "TITANIC", year = 1997, genre = "Disaster")
    )
    var isRefreshing by remember { mutableStateOf(false) }
    val swipeRefreshState = rememberSwipeRefreshState(isRefreshing)
    JetPackTheme(
        darkTheme = true,
    ) {
        Scaffold(
            modifier = Modifier.fillMaxSize(),
            content = {
                SwipeRefresh(
                    state = swipeRefreshState,
                    onRefresh = {
                        isRefreshing = true
                    },
                ) {
                    LazyColumn(content = {
                        items(
                            items = movieList,
                            itemContent = {
                                MovieListItemView(it)
                            })
                    })
                }

            },
            topBar = {
                TopAppBar(title = { Text("Swipe To Refresh") }
                )
            },
        )
        LaunchedEffect(isRefreshing) {
            if (isRefreshing) {
                delay(1000L)
                isRefreshing= false
            }
        }
    }
}

@Composable
fun MovieListItemView(it: Movie) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 16.dp, vertical = 8.dp), content = {
            val color =
                Color(
                    Random.nextInt(256),
                    Random.nextInt(256),
                    Random.nextInt(256)
                )
            Box(
                content = {
                    Text(
                        text = it.name.get(0).uppercase(),
                        fontSize = 24.sp,
                        color = color
                    )
                }, modifier = Modifier
                    .size(80.dp)
                    .border(width = 1.2.dp, color = color, shape = CircleShape),
                contentAlignment = Alignment.Center
            )
            Spacer(modifier = Modifier.size(16.dp))
            Column(
                modifier = Modifier.weight(2F),
                content = {
                    Spacer(modifier = Modifier.size(8.dp))
                    Text(
                        text = it.name.uppercase(),
                        color = color,
                        fontSize = 16.sp,
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                    Text(
                        text = "${it.year}",
                        color = Color.White,
                        fontSize = 14.6.sp
                    )
                    Text(
                        text = it.genre,
                        color = Color.Gray,
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                })
        })
}


@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    SwipeRefreshLayout()
}

Images

Conclusion: In this jetpack compose example tutorial we covered set data to listview and refresh the data in swipe by swipe refresh layout

Article Contributed By :

3061 Views