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 !

Answer 1

You need to use an image like this one:

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.