ParallaxView

A lightweight Jetpack Compose library that adds a depth effect to your UI by responding to device orientation (gyroscope/accelerometer). Create immersive experiences with layered content that moves as the user tilts their device.

Features

• Multi-Layer Support: Define Background, Middle, and Foreground composables.
• Sensor-Driven: Uses device sensors for natural, smooth movement.
• Customizable: Control movement intensity, offset limits, and orientation (Horizontal, Vertical, Full).
• Plug & Play: Easy to integrate into any Compose project.

Installation

Add the JitPack repository to your root build.gradle.kts:

dependencyResolutionManagement {
    repositories {
        ...
        maven { url = uri("https://jitpack.io") }
    }
}

Add the dependency to your module's build.gradle.kts:

dependencies {
    implementation("com.github.vluk4:ParallaxView:Tag")
}

Replace Tag with the latest release version.

Usage

import com.vluk4.parallax.ParallaxView
import com.vluk4.example.parallax.model.ParallaxOrientation

ParallaxView(
    modifier = Modifier.fillMaxSize(),
    backgroundContent = {
        // Your background content here
        Image(
            painter = painterResource(id = R.drawable.background_image),
            contentDescription = null,
            contentScale = ContentScale.Crop,
            modifier = Modifier.fillMaxSize()
        )
    },
    middleContent = {
        // Your middle layer content here
        Text(text = "Parallax Effect", fontSize = 24.sp, color = Color.White)
    },
    foregroundContent = {
        // Your foreground content here
        Icon(
            imageVector = Icons.Default.Star,
            contentDescription = null,
            modifier = Modifier.size(100.dp),
            tint = Color.Yellow
        )
    },
    movementIntensityMultiplier = 20,
    orientation = ParallaxOrientation.Full
)

Configuration

You can customize the behavior of the parallax effect using the following parameters:

| Parameter | Type | Default | Description | | :--- | :--- | :--- | :--- | | movementIntensityMultiplier | Int | 20 | Controls the sensitivity of the movement. Higher values result in more noticeable movement. | | verticalOffsetLimit | Float | 0.5f | Limits the maximum vertical displacement. | | horizontalOffsetLimit | Float | 0.5f | Limits the maximum horizontal displacement. | | orientation | ParallaxOrientation | Full | Sets the allowed movement direction (Full, Horizontal, Vertical). | | backgroundContainerSettings | ContainerSettings | Default | Configure scale and alignment for the background layer. | | middleContainerSettings | ContainerSettings | Default | Configure scale and alignment for the middle layer. | | foregroundContainerSettings | ContainerSettings | Default | Configure scale and alignment for the foreground layer. |

Requirements

• Android SDK 24+
• Jetpack Compose

License

MIT License