Santhosh Kumar
Santhosh Kumar

Reputation: 531

Why pull-to-refresh indicator again come from top rather than stick on offset

What is the reason the pull-to-refresh indicator appears at the top of the screen when navigating back, instead of sticking to the previous offset position while still refreshing it is coming again from top, is primarily due to how the PullRefreshIndicator and the pullRefresh modifier are implemented in Jetpack Compose.

Note: Carefully watch indicator in the last that is slightly coming from top to it's offset.

enter image description here

@AndroidEntryPoint
class TestActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApp()
        }
    }
}

@Composable
fun MyApp() {
    // Define the routes and their respective icons
    val topLevelRoutes = listOf(
        TopLevelRoute("Profile", "profile", Icons.Filled.AccountCircle),
        TopLevelRoute("Friends", "friends", Icons.Filled.People)
    )

    // Create a NavController
    val navController = rememberNavController()

    Scaffold(
        bottomBar = {
            BottomNavigation {
                val navBackStackEntry by navController.currentBackStackEntryAsState()
                val currentDestination = navBackStackEntry?.destination
                topLevelRoutes.forEach { topLevelRoute ->
                    BottomNavigationItem(
                        icon = { Icon(topLevelRoute.icon, contentDescription = topLevelRoute.name) },
                        label = { Text(topLevelRoute.name) },
                        selected = currentDestination?.route == topLevelRoute.route,
                        onClick = {
                            navController.navigate(topLevelRoute.route) {
                                popUpTo(navController.graph.findStartDestination().id) {
                                    saveState = true
                                }
                                launchSingleTop = true
                                restoreState = true
                            }
                        }
                    )
                }
            }
        }
    ) { innerPadding ->
        NavHost(navController, startDestination = "profile", Modifier.padding(innerPadding)) {
            composable("profile") { ProfileScreen() }
            composable("friends") { FriendsScreen() }
        }
    }
}

data class TopLevelRoute(val name: String, val route: String, val icon: ImageVector)

@OptIn(ExperimentalMaterialApi::class, ExperimentalMaterial3Api::class)
@Composable
fun ProfileScreen() {
    var isRefreshing by rememberSaveable {  mutableStateOf(false) }

    // Create a pull refresh state
    val pullRefreshState = rememberPullRefreshState(isRefreshing, onRefresh = {
        // Trigger a refresh
        isRefreshing = true
    },refreshThreshold=180.dp, refreshingOffset = 180.dp)

    // Launch an effect when refreshing starts
    if (isRefreshing) {
        LaunchedEffect(Unit) {
            delay(10000) // Simulate a network call
            isRefreshing = false // Reset refreshing state
        }
    }

    // Content for the Profile screen
    Surface {
        Box(
            modifier = Modifier
                .fillMaxSize()
                .pullRefresh(pullRefreshState)) {
            Column(
                modifier = Modifier.fillMaxSize().verticalScroll(rememberScrollState()),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally,

                ) {
                // Your main content here
                Text("Profile Screen", style = MaterialTheme.typography.h4)
            }

            PullRefreshIndicator(
                refreshing = isRefreshing,
                state = pullRefreshState,
                modifier = Modifier.align(Alignment.TopCenter)
            )
        }
    }
}

@Composable
fun FriendsScreen() {
    // Content for the Friends screen
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Text("Friends Screen")
    }
}

Upvotes: 0

Views: 35

Answers (0)

Related Questions