9 patch converted to gradient

Question

I would like to have on my Android application an ActionBar with a bottom line. This line should looks like this with only 4 colors :

To get this effect I use a 9patch but instead of showing the 4 colors, it replaces it with a gradient :

This is the 9Patch I'm using. Do you know where I'm wrong, because I don't understand why :/

Thanks for your help !

Jilli

Wow, first time I see something like this. This side effect is actually quite interesting! This would be 9 patch could also be used to do gradients!? – Ebonize

Answer 1

You need to use an image like this one:

Amoeboid

@OcuS, no Gimp, but didn't put too much effort into it :D – Amoeboid

You'd be better off using the bundled 9-patch editor in the SDK tools (android-sdk\tools\draw9patch.bat) – Echinoderm

It's for illustration purposes only (much like the one posted in the question). Also, on Linux, the file is called draw9patch (no .bat). – Amoeboid

I use photoshop and it works great once you have acquired some experience. – Ebonize

Answer 2

Try editing your 9-patch so that instead of the blocks of colour being 1 pixel wide, make them 3 wide, where only the middle pixel is marked as stretchable. This might give you what you need.

It's doing it because you've marked the boundary between colours as stretchable, so when it stretches your 9-patch it interpolates the values at the boundary so that it produces a smooth transition. If you change your 9-patch to my suggestion, you'll have marked the boundaries as non-stretchable, which should remove the gradient.

Echinoderm