Question

i'am trying to accomplish a single line background with 3 or more colors, i want to know if its possible with xml shapes or I've to use 9 patch? i'am kind of a newbie with shapes and I've spent all morning trying to accomplish what i want but nothing.

Below is what I want to achieve:

enter image description here

I allready tried this shape with gradient but it only assumes the start color

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- This is the line -->
<item>
      <shape>
            <padding android:left="0dp" android:top="0dp" android:right="0dp" android:bottom="1dp"/>
            <solid android:color="#868686" />
      </shape>
</item>
<!-- This is the main color -->
<item>
     <shape>
         <solid android:color="@android:color/white" />
     </shape>
</item>

SOLUTION UPDATE

Beside the answer provided by SAM, I've found the 9.png the best answer to my problem.I simple create a png with the 3 colors and then apply the nine patch and DONE :D i had used this tool weblookandfeel.com/nine-patch-editor its as simple as open the image in the app and save and you have your 9.png.

Was it helpful?

Solution

you can try using this tool for obtaining colors you want, http://angrytools.com/gradient/

and then arrange in horizontal, one of the ideas can be, creating three drawables and arrange them using linear layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <ImageView android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/image1"/>
    <ImageView android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/image2"/>
    <ImageView android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/image3"/>

</LinearLayout>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top