Created
September 25, 2023 11:47
-
-
Save kaszabimre/df0c652a9554c6dbfe1d384df7a83f44 to your computer and use it in GitHub Desktop.
ParrallaxCarousel composable with padding, shadow and shape values
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Padding values | |
private val cardPadding = 25.dp | |
private val imagePadding = 10.dp | |
// Shadow and shape values for the card | |
private val shadowElevation = 15.dp | |
private val borderRadius = 15.dp | |
private val shape = RoundedCornerShape(borderRadius) | |
// Offset for the parallax effect | |
private val xOffset = cardPadding.value * 2 | |
@OptIn(ExperimentalFoundationApi::class) | |
@Composable | |
fun ParallaxCarousel() { | |
// Get screen dimensions and density | |
val screenWidth = LocalConfiguration.current.screenWidthDp.dp | |
val screenHeight = LocalConfiguration.current.screenHeightDp.dp | |
val density = LocalDensity.current.density | |
// List of image resources | |
val images = listOf( | |
R.drawable.p1, | |
... | |
R.drawable.p7, | |
) | |
// Create a pager state | |
val pagerState = rememberPagerState { | |
images.size | |
} | |
// Calculate the height for the pager | |
val pagerHeight = screenHeight / 1.5f | |
// HorizontalPager composable: Swiping through images | |
HorizontalPager( | |
state = pagerState, | |
modifier = Modifier | |
.fillMaxWidth() | |
.height(pagerHeight), | |
) { page -> | |
// Calculate the parallax offset for the current page | |
val parallaxOffset = pagerState.getOffsetFractionForPage(page) * screenWidth.value | |
// Call ParallaxCarouselItem with image resource and parameters | |
ParallaxCarouselItem( | |
images[page], | |
parallaxOffset, | |
pagerHeight, | |
screenWidth, | |
density | |
) | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment