ComposePlayground

A small Jetpack Compose playground experimenting with UI and animation techniques. It demonstrates a variety of interactive and visually rich UI components and effects.

Credit Card Selection Animation

Interactive credit card selection with smooth drag gestures and animations.

CP1.mp4

3D Product Viewer

Product list and detail screens featuring 3D models with camera animations and interactive controls.

CP2.mp4

AGSL Sample - Spirograph

Mathematical art creation using Android Graphics Shading Language (AGSL) with two rotating axes creating spirograph patterns.

CP3.mp4

Circular Carousel with LazyRow

A circular carousel effect using LazyRow enhanced with graphicsLayer and trigonometric calculations. Features infinite scroll and auto snap.

CP4.mp4

Shadow Chain Tutorial

Chain dropShadow() and innerShadow() modifiers in Jetpack Compose to create 3D-like, fake glassy, and blurred shadow effects.

CP5.mp4

Side Panel Custom Layout

An animated custom side panel layout with drag handle in Jetpack Compose.

CP6.mp4

Shared Element Toolbar Transition

Shared element transition between toolbar and content using Jetpack Compose.

CP7.mp4

Explodable Chips with Physics

Interactive selectable chips that explode with physics-based animations on swipe.

CP8.mp4

Segmented Wallpaper

ML Kit subject segmentation with AI-based background completion (Vertex AI / Gemini 2.0 Flash) to produce a depth animated wallpaper from a single image.

CP9.mp4

For running this sample create a Firebase project and generate a google-services.json file. Place the file in the app folder: app/google-services.json. Be sure to enable Vertex AI API. Ensure to also enable AppCheck on your Firebase project to prevent API abuse. For better results run this sample on a real device.

Credits

3D Models

The following 3D models are used under Creative Commons Attribution license:

• Xbox Wireless Controller (White) by Chistodrako._
  Source: Sketchfab
  License: Creative Commons Attribution

• Xbox Wireless Controller (Black) by Chistodrako._
  Source: Sketchfab
  License: Creative Commons Attribution