https://kotlinlang.org logo
Join Slack
Powered by
How can i fix this draggable. This is the first ti...
# compose-android
p
How can i fix this draggable. This is the first time i am implementing something like this. The solution i came up with but this will not work for different screen size. can you guise help me on what to do. Code is in Thread. I am also sharing the project link if needed.
2024-09-14 01-54-03.mp4
Copy code
@Composable
fun RowScope.RootDrawerExpanded(
    navController: NavHostController,
    state: RootDrawerUiState,
    onSaveScreenToggle: (SaveScreen) -> Unit,
    onEvent: (RootDrawerUiEvent) -> Unit,
) {
    var toggle by remember {
        mutableStateOf(false)
    }

    var offsetX by remember { mutableFloatStateOf(0f) }
    var offsetY by remember { mutableFloatStateOf(0f) }

    val config = LocalConfiguration.current

    Surface(
        modifier = Modifier
            .wrapContentWidth()
            .fillMaxHeight(),
    ) {
        ExpandedDrawerContent(
            userName = state.username,
            profilePicUrl = state.profilePicUrl,
            isExpanded = toggle,
            isExpandSmall = false,
            saveScreen = state.saveScreen,
            onExpandToggle = {
                toggle = !toggle
            },
            navigate = {
                toggle = false

                when (it.screen) {
                    ScreenEnum.PROFILE -> navController.navigate(DrawerScreen.Profile.route) {
                        popUpTo(DrawerScreen.Profile.route) { inclusive = true }
                        launchSingleTop = true
                    }

                    ScreenEnum.HISTORY -> navController.navigate(DrawerScreen.History.route) {
                        popUpTo(DrawerScreen.History.route) { inclusive = true }
                        launchSingleTop = true
                    }

                    ScreenEnum.SETTINGS -> navController.navigate(DrawerScreen.Settings.route) {
                        popUpTo(DrawerScreen.Settings.route) { inclusive = true }
                        launchSingleTop = true
                    }

                    else -> onEvent(it)
                }
            },
            onSaveScreenToggle = onSaveScreenToggle,
        )
    }

    Box {
        NavHost(
            navController = navController,
            startDestination = state.startDestination,
            modifier = Modifier
                .then(
                    if (config.screenWidthDp > 980 &&
                        (state.addToPlaylistUiState.isOpen ||
                                state.viewUiState.isOpen ||
                                state.newAlbumUiState.isOpen ||
                                state.newArtisUiState.isOpen ||
                                state.createPlaylistUiState.isOpen ||
                                state.exploreArtistUiState.isOpen)
                    ) Modifier
                        .fillMaxWidth(.6f)
                        .fillMaxHeight()
                    else Modifier.fillMaxSize()
                )
        ) {
             // navigation
        }

        this@RootDrawerExpanded.AnimatedVisibility( // todo add enter and exit animation
            modifier = Modifier
                .fillMaxWidth(.3f)
                .fillMaxHeight(.3f)
                .align(Alignment.BottomEnd)
                .padding(MaterialTheme.dimens.medium1)
                .offset { IntOffset(offsetX.roundToInt(), offsetY.roundToInt()) }
                .pointerInput(Unit) {
                    detectDragGestures { change, dragAmount ->
                        change.consume()

                        val newX = (offsetX + dragAmount.x)
                            .toInt()
                            .coerceIn(-1630, 0)

                        val newY = (offsetY + dragAmount.y)
                            .toInt()
                            .coerceIn(-1100, 0)

                        offsetX = newX.toFloat()
                        offsetY  = newY.toFloat()
                    }
                },
            visible = state.player.isData &&
                    state.player.queue.isNotEmpty() && config.screenWidthDp > 980
        ) {
            if (state.player.queue.isNotEmpty()) SmallExpandedPlayer(
                header = state.header,
                song = state.player.queue[state.player.info.currentPlayingIndex].copy(
                    colors = state.player.queue[state.player.info.currentPlayingIndex].colors.ifEmpty {
                        listOf(
                            MaterialTheme.colorScheme.primary,
                            MaterialTheme.colorScheme.surfaceContainer
                        )
                    }
                ),
                hasNext = state.player.info.hasNext,
                hasPrev = state.player.info.hasPrev,
                onEvent = {

                }
            )
        }
    }
}
Open in Slack
PreviousNext
Powered by