Search code examples
androidbackgroundgradientshapes

How to make gradient background in android

I want to create gradient background where the gradient is in the top half and there's a solid color in the bottom half, like in this image below:

I can't because the centerColor spreads out to cover the bottom and top.

In the gradient for the button, a white horizontal line fades over blue toward the top and botton.

How can I make a background like the first image? How can I make small centerColor that's not spread out?

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>
Solution

  • 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.