skip to content
LogoJ-log

Jetpack Compose color picker with hex values

jetpack-compose

A very common component needed for an app is a simple yet powerful color picker.

Android unfortunately doesn’t offer one out of the box and that’s why I made my own. It’s implemented with a simple AlertDialog and it allows both some pre-made options and the input from the user via hex values.

This obviously isn’t the most user friendly design, but it’s great for a user base of developers or designers.

The code

The picker receives:

  • an initial color to display
  • a list of colors (strings in the hex format) that renders and displays to the user
  • a function which will be called when a valid color gets choosen by the user

It requires some utility functions too: some simple ones that transform strings to color objects and a trickier one, the Color.contrastColor() which, based on a given color, determines if a text placed above it should be White or Black.

Demo

Color Picker demo

Source code

You can find the full code for the demo in this article on my GitHub repo (link to the exact file)

Peace ✌🏼