CODEWITHSUNDEEP
javaandroid
Dhana
Dhana

Reputation: 554

How to fill two different colors in Custom Shape?

I have created the custom shape in android project. here is code,

curvedShape.xml:-

<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <stroke android:width="4dp" android:color="#ffffff" />
    <padding android:left="7dp" android:top="7dp"
            android:right="7dp" android:bottom="7dp" />
    <gradient android:centerColor="#ffffff" android:startColor="#32CD32" android:endColor="#ffffff"/> 
</shape>

main.xml:-

<View   
            android:layout_width="wrap_content"
            android:layout_height="150dp"
            android:layout_marginLeft = "10dp"
            android:layout_marginRight = "10dp"
            android:layout_centerHorizontal="true" 
            android:layout_marginTop="20dp"
            android:background="@drawable/curvedshape"/>

In shape,gradient attribute gave start color as green, that filled green color vertically. but i want to fill the color like the below image, fill color in horizontal in half shape. How to do that?

enter image description here

Upvotes: 5

Views: 1684

Answers (1)

Jaiprakash Soni
Jaiprakash Soni

Reputation: 4112

Use layer-list and draw two shapes in XML:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >   
    < item>
            < shape
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:shape="rectangle" >

           <stroke android:width="4dp" android:color="#ffffff" />

        </shape>
    </item>      
    <item>
        <shape
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle" >

            <stroke android:width="4dp" android:color="#7CFC00" />
        </shape>
    </item> 
</layer-list>

Edits : you have just use this gradient attribute in your xml 

< gradient android:angle="-90" android:centerX="0.5" android:centerY="0.5" android:centerColor="#ffffff" android:startColor="#32CD32" android:endColor="#ffffff"
 />

I have use this and this show similar shape required by you:

 < shape
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:shape="rectangle" >
 < gradient android:angle="-90" android:centerX="0.5" android:centerY="0.5" android:centerColor="#ffffff" android:startColor="#32CD32" android:endColor="#ffffff"
 /> 
 < /shape>

Upvotes: 2

Related Questions