Skip to content

ComposeLevitation: Empower your Android Compose UI with mesmerizing levitation effects

License

Notifications You must be signed in to change notification settings

GIGAMOLE/ComposeLevitation

Repository files navigation

| 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
gigamole53@gmail.com