Skip to content

Instantly share code, notes, and snippets.

@kaszabimre
Created September 25, 2023 11:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kaszabimre/df0c652a9554c6dbfe1d384df7a83f44 to your computer and use it in GitHub Desktop.
Save kaszabimre/df0c652a9554c6dbfe1d384df7a83f44 to your computer and use it in GitHub Desktop.
ParrallaxCarousel composable with padding, shadow and shape values
// 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