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:

https://github.com/GIGAMOLE/ComposeLevitation/assets/7150913/803bd0db-fc6b-4cb2-a741-7d13b26a30e9

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]