| Setup Guide | Report new issue

ComposeLevitation

The ComposeLevitation is a powerful Android Compose library that empowers developers with the ability to easily create and customize levitation effects, adding an interactive and mesmerizing touch to their UI elements.

Features:

• Levitation Effect: Simulates a pressed surface with a shadow, creating a sense of depth and interactivity.
• Gesture Responsiveness: Reacts to press and drag gestures for intuitive user interaction.
• Customization: Fully customizable parameters such as camera distance, press angle, animation, upscale/downscale, shadow translation, offset, and color.
• Advanced Shadows: Enhances the levitation shadow effect with ComposeShadowsPlus.
• Sample App: Explore and experiment with sample app.
• Holographic Effect: Explore and experiment with holographic effect.

Sample App

Shape Levitation	Shape Press	Shape Shadow

Image Levitation	Image Press	Image Shadow

Download or clone this repository to discover the sample app.

Holographic Effect

First ever Android Holographic Effect:

holographic.mp4

Inspired by the Halo Lab - Holographic Guide in Figma and junhoyeo - Holographic Effect Generator.

Download or clone this repository to discover the holographic effect sample .

Setup

Add to the root build.gradle.kts:

allprojects {
    repositories {
        ...
        maven("https://jitpack.io")
    }
}

Add to the package build.gradle.kts:

dependencies {
    implementation("com.github.GIGAMOLE:ComposeLevitation:{latest-version}")
}

Latest version: .

Also, it's possible to download the latest artifact from the releases page.

Guide

ComposeLevitation comes with two main components: LevitationContainer and LevitationState.

For more technical and detailed documentation, read the library KDoc.

LevitationContainer

The LevitationContainer applies levitation effect to the provided content based on the provided LevitationState.

You can enable or disable the levitation effect with isEnabled attribute.

LevitationState

The LevitationState consists of two required components: LevitationConfig and PressConfig. And one optional component: ShadowConfig.

To create a LevitationState, use the utility function: rememberLevitationState(...) or make it on your own.

LevitationConfig

The LevitationConfig setups the core levitation effect:

Param	Description
orientation	The levitation orientation: All, Horizontal, and Vertical.
degree	The levitation degree (angle).
pivot	The levitation origin pivot point.
cameraDistance	The levitation camera distance.
isBounded	Indicates whether levitation is bounded to its size or not.
shape	The shape of the levitation content and its shadow.
isClipped	Indicates whether gesture events are clipped (and the content) within their shape or not.

PressConfig

The PressConfig setups the levitation gesture (press, drag, and release) effect:

Param	Description
type	The levitation press type: Ranged(interpolated), Full, and None.
downscale	The levitation press downscale or upscale.
pressAnimationSpec	The levitation press animation specification.
isAwaitPressAnimation	Indicates whether to await full press animation on a release or not.
isPivotedWhenReleased	Indicates whether to pivot the press point when released or not.

ShadowConfig

An optional ShadowConfig setups the levitation shadow effect:

Param	Description
degreeMultiplier	The levitation shadow degree (angle) multiplier.
downscaleMultiplier	The levitation shadow downscale or upscale multiplier.
cameraDistanceMultiplier	The levitation shadow camera distance multiplier.
translationOffset	The levitation shadow translation offset.
isPivotedWhenPressed	Indicates whether the levitation shadow is pivoted when fully pressed at the pivot.
radius	The levitation shadow radius.
type	The levitation shadow type: SoftLayer, RSBlur, and Elevation.

The SoftLayer shadow type is required to be used with SoftLayerShadowContainer.

The ComposeLevitation library advises against using the Elevation shadow due to a rendering issue where the shadow appears cropped and only visible at the content border, creating an empty rectangle below the surface.

The levitation shadow effect is powered by the ComposeShadowsPlus. You can explore it for more.

License

MIT License. See the LICENSE file for more details.

Credits

Special thanks to the GoDaddy for the amazing color picker library.

Inspired by the uncompleted Android Google elevation feature and Steam Trading Cards hover behavior:

Steam Example 1	Steam Example 2

Author:

Basil Miller
[email protected]