PaletteBar – A color picker for Android

Try it out

As a developer, I’m often skimming tech blogs in search of a solution, so if you’re here to find a color picker for your Android app, here’s the Github link: https://github.com/MeetMe/PaletteBar

paletteBarScreenshot

PaletteBar is a minimal color picker, implemented as a custom Android View, done entirely in code in one class file. The border shows the selected color – in this case, light green. Here’s a grainy gif of it in action:

paletteBarDemo

From a development perspective, it’s super easy to add to a project. Just copy the single PaletteBar.java file, no extra resources or xml needed. It’ll automatically scale that color spectrum to any height and width, and the border size can be changed or removed entirely.

From the UI side, this layout allows any color to be chosen by moving horizontally, and any hue by moving vertically. Grays and browns have been tacked on to the left. The notable downside is that it’s nigh impossible to choose the exact same color repeatedly.

Here’s PaletteBar in our MeetMe app on Android, used to edit Chat photos:

selfiePaletteBar

Color pickers are tricky

The trouble with mobile devices is that screens are small and fingers get in the way, and the trouble with mobile developers is that we haven’t had many years to establish conventions for UI elements.

In helping build MeetMe’s drawing feature, and in my personal quest to find useable apps for my toddlers, I’ve tried a ton of apps with palettes, and most of them fail terribly. If a drawing app is just for entertainment, then you don’t need to specify RGB values or cram in a “recent favorite colors” section for your palette. We recently downloaded a [beloved copyrighted character] coloring book app that was particularly awful. It took me and my young kids a couple days to realize that the palette only appeared to be limited to six colors because it could scroll horizontally.

Ultimately, there are just two UI problems for a color picker to solve:

  1. Show the user all the available colors
  2. Allow the user to choose a color

Some apps use a ROYGBIV spectrum, which is great for making rainbows, but you can’t draw people and robots without browns and grays. Check out how many palettes make that faux pas in this Google images search for “color picker”: https://www.google.com/search?q=color+picker&tbm=isch  For apps that only need a dozen or so colors, like a simple text editor with font colors, the easy solution is to have a button for each color. It’s when the palette grows that the challenge arises for both displaying and accessing colors. Wikipedia has a small article under “Color tool” that shows some complex, but common, solutions for art applications: https://en.wikipedia.org/wiki/Color_tool  Even in a sophisticated app, these desktop solutions would be unwieldy.

ColorPalette is an attempt to provide pretty much all the colors in limited real estate, with quick interaction, at the cost of being able to specify a color beyond eyeballing. For an entertaining scenario like MeetMe’s Chat, it’s a great fit . I also integrated ColorPalette in an extremely simple drawing app for my kids, and can confirm that even a 2-year-old can use it. And it’s rife with opportunities for feature creep or even legitimate enhancements, so have at it.

simpleDrawUse2

Leave a Reply

Your email address will not be published. Required fields are marked *