As I mentioned the other day, I’m going to work on making some options for Tic Tac Toe. The past couple days I’ve been working on changing the color of the X and O.

Changing the color to predetermined values was easy. I had that done within a couple hours. Allowing the user to pick their own color… that was a little more difficult. I had to do some searching for a color selector, because for some reason there isn’t on available in the Android SDK.

The first one I found was WAY too small, hard to manipulate, and just not working well. If you touched and dragged, it wouldn’t actually drag. It was small even on a phone… when seeing it on a tablet, it was even more ridiculous how small it looked.

So I did some more searching and found an open sourced project with a much better implementation. It’s much larger, making it easier to see and manipulate, it scales well on a tablet, and dragging your finger after touching actually drags the marker. The only thing I could ask for that isn’t included is an RGB value of the color.

Here’s the code, in case you’re interested: http://color-picker-view.googlecode.com/svn/trunk/

Right now your options are: ROYGBIV (Red, Orange, Yellow, Green, Blue, Indigo, Violet) and using the color selector to create your own. I am thinking about adding an RGB value editor of my own… allowing the user to input a value for Red, Green and Blue, displaying the resulting color, and allowing them to accept or deny the color they have created. This should not be too terribly hard, I just haven’t done it yet.

Here’s how it looks now: (screen shots from my Nexus 10)

The top screen is the selection screen, which includes my preset options and a button for creating your own, and the second screen is the color selector. (I’m just noticing now that one window says “Choose a Color” and the other says “Pick a Color”… I’ll change that.)

As you can see, the color selector is a nice size that is easy to manipulate. The scale on the right side is to choose a color range, and the big box that comprises the majority of the dialog is where you select the specific color. Just above “Cancel” and “OK” are the old color, and the new color.

As usual the final design may change slightly, but it’s far enough along that I figured I’d share.

Here’s a game in progress with some different colors selected: