CODEWITHSUNDEEP
androidlayoutgradient
iCaesar
iCaesar

Reputation: 411

android gradient with 4 params

How can I make a gradient like this in xml

gradient

I can not do it with just these params

startColor=""
centerColor=""
endColor=""

any ideas ?

Upvotes: 1

Views: 205

Answers (3)

Jake Lee
Jake Lee

Reputation: 7989

6 years too late, but the easiest way to do more complex gradients like this is via multiple overlapping shapes in a layer-list, as Blackbelt mentioned.

The basic layout is:

  • Rectangle 1 is centred at 20% down vertically. It starts at your grey colour, and centres & ends as pure white. By having the centre only partially down the drawable, the first grey -> white transition is achieved.
  • Rectangle 2 is centred at 80% down vertically. It starts & ends as transparent, but has grey in the centre. As it is mostly transparent, it does not interfered with Rectangle 1.

This could also be achieved by having multiple drawables overlapping each other, but this way is simple enough. Here's a screenshot of it: overlapping gradients

And here's the actual XML:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient
                android:centerColor="#FFFFFF"
                android:centerY="20%"
                android:endColor="#FFFFFF"
                android:startColor="#AAAAAA" />
        </shape>
    </item>

    <item>
        <shape>
            <gradient
                android:centerColor="#AAAAAA"
                android:centerY="80%"
                android:endColor="@android:color/transparent"
                android:startColor="@android:color/transparent" />
        </shape>
    </item>
</layer-list>

Upvotes: 0

Blackbelt
Blackbelt

Reputation: 157467

if you want to draw it through shape you have to do work with layer-list. You can think about it like two rectangles and every rectangle has its own gradient color.

Upvotes: 0

Digvesh Patel
Digvesh Patel

Reputation: 6533

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

Upvotes: 1

Related Questions