explaingit

adhithya90/design-lens-compose

Analysis updated 2026-05-18

4KotlinAudience · developerComplexity · 4/5Setup · moderate

TLDR

An Android app showcasing three fully code-drawn design styles, built with Jetpack Compose and shaders instead of any image files.

Mindmap

mindmap
  root((design-lens-compose))
    What it does
      Gallery of design styles
      Zero image assets
      Fully code drawn UI
    Tech stack
      Kotlin
      Jetpack Compose
      AGSL shaders
      Android
    Design styles
      Dot Terracota
      Soft Machine
      Pixel Craft
    Techniques
      Shader materials
      Canvas hand drawn UI
      Rescaled density units
    Use cases
      Shader UI reference
      Pixel art technique
      Design inspiration browser

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Study how to build touchable, physically feeling UI materials like clay, silicone, or glass using AGSL shaders in Jetpack Compose.

USE CASE 2

Reference the hand built pixel art and dot matrix font techniques for a retro style Android app.

USE CASE 3

See a working example of resolution-independent layout using rescaled custom density units instead of standard responsive design.

USE CASE 4

Run the app locally to browse three complete design systems as a source of visual inspiration.

What is it built with?

KotlinJetpack ComposeAGSLAndroid

How does it compare?

adhithya90/design-lens-composeblindman81/snippetsfigurophobia/milk-filter-mobile
Stars444
LanguageKotlinKotlinKotlin
Setup difficultymoderatemoderateeasy
Complexity4/52/51/5
Audiencedevelopergeneralgeneral

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · moderate Time to first run · 30min

Requires Android Studio and a minSdk of 33 because it depends on the RuntimeShader graphics feature.

In plain English

Design Lens is an Android gallery app that shows off three different visual design styles, and every single image in it is drawn live by code rather than loaded from a picture file. The creator explains that the project started after being inspired by a terracotta colored moodboard, and it grew from there into rebuilding each look entirely out of running graphics code. You open the app, choose a style, and swipe through twelve screens built in that look. The first style, called Dot Terracota, is a warm industrial look with dot matrix lettering, brushed metal textures, glowing tubes, and clay-like shapes. It includes touchable elements like a subwoofer that visibly thumps when tapped and a knob you can spin that clicks as it turns. The second style, Soft Machine, is a lavender neumorphic look with rounded, squeezable looking shapes, including a cloud rendered with a real time lighting technique that squishes like a marshmallow when tapped, and a silicone-like surface that dents under a finger and springs back. The third style, Pixel Craft, is a playful pixel art look with a cat and a sailboat, built entirely without any of the shader effects used elsewhere, using hand typed character grids for every sprite and instant, spring-free button presses that snap rather than ease. Under the hood, the app is built with Jetpack Compose, Android's modern toolkit for building user interfaces, combined with a graphics shading language called AGSL for anything meant to feel like a physical material, such as metal, glass, or clay. Regular drawing code handles anything meant to feel like a user interface element, including a hand built dot matrix font and dozens of pixel art sprites stored directly as text in the source code. Every screen is laid out in the developer's own made up units and rescaled to fit whatever screen size the device has, so there is no separate responsive design logic. To run the project, you open it in Android Studio and press run, or build it from the command line with Gradle. It requires a fairly recent version of Android, since it depends on a graphics feature called RuntimeShader. The README does not mention a license.

Copy-paste prompts

Prompt 1
Help me open design-lens-compose in Android Studio and run it with gradlew assembleDebug.
Prompt 2
Explain how the AGSL shader for the raymarched cloud material in the Soft Machine style works.
Prompt 3
Show me how this project draws its pixel art sprites as character grids in the source code instead of using image assets.
Prompt 4
Walk me through how design-lens-compose rescales LocalDensity so its custom layout units fit any screen size.

Frequently asked questions

What is design-lens-compose?

An Android app showcasing three fully code-drawn design styles, built with Jetpack Compose and shaders instead of any image files.

What language is design-lens-compose written in?

Mainly Kotlin. The stack also includes Kotlin, Jetpack Compose, AGSL.

How hard is design-lens-compose to set up?

Setup difficulty is rated moderate, with roughly 30min to a first successful run.

Who is design-lens-compose for?

Mainly developer.

Open on GitHub → Explain another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.