Question Detail

I want to create gradient background as in the picture. but it can't because of the centerColore was spread out to cover bottom and top.

How can I make a background like a picture below? or How can I make small ceterColor that not spread out? did you have any idea?

This is the background that I want.

enter image description here

This is the background that I made.

enter image description here

This is code in xml of background button above

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
    <gradient 
        android:startColor="#6586F0"
        android:centerColor="#D6D6D6"
        android:endColor="#4B6CD6"
        android:angle="90"/>
    <corners 
        android:radius="0dp"/>


</shape>


Thread Reply

Anonymous

- 1 years ago

You can create this 'half-gradient' look by using an xml Layer-List to combine the top and bottom 'bands' into one file. Each band is an xml shape.

See this previous answer on SO for a detailed tutorial: Multi-gradient shapes.

Anonymous

- 1 years ago

Try with this :

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >

    <gradient
        android:angle="90"
        android:centerColor="#555994"
        android:endColor="#b5b6d2"
        android:startColor="#555994"
        android:type="linear" />

    <corners 
        android:radius="0dp"/>

</shape>