how to get android gradient center light effect?

Question

i want something like following image

i tried it using drawable shape

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
    android:angle="360"
    android:centerX="50%"
    android:centerY="50%"

    android:gradientRadius="50%"
    android:endColor="#000000"
    android:centerColor="#FFFFFF"
    android:startColor="#000000" >
</gradient>
</shape> 

Solution 1

Make a new Android xml file (say GreyRadial.xml) file in your drawable folder

In your xml file

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

    <gradient
        android:centerColor="#c1c1c1"
        android:endColor="#4f4f4f"
        android:gradientRadius="400"
        android:startColor="#c1c1c1"
        android:type="radial" >
    </gradient>

</shape>

Use this xml in your layout background using

android:background="@drawable/GreyRadial"

Solution 2

The effect can be approximated in a Layer-List using multiple rectangular shapes. Use a solid rectangle with the center background color. Then use two gradients with the start and end colors the same. Make the center color the same also, except set the alpha to zero.

In the code below the colors are as follows:

@color/background_dark = #ffb8860b
@color/background_light = #ffd2b48c
@color/transparent = #00b8860b

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape >
            <solid android:color="@color/background_light"/>
        </shape>
    </item>

    <item>
        <shape>
            <gradient 
                android:startColor="@color/background_dark"
                android:centerColor="@color/transparent"
                android:endColor="@color/background_dark"
                android:angle="45"/>
        </shape>
    </item>

    <item>
        <shape>
            <gradient 
                android:startColor="@color/background_dark"
                android:centerColor="@color/transparent"
                android:endColor="@color/background_dark"
                android:angle="135"/>
        </shape>
    </item>

</layer-list>

Solution 3

One more solution:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <gradient
        android:centerX="50%"
        android:centerY="50%"
        android:endColor="@android:color/black"
        android:gradientRadius="100%"
        android:startColor="@android:color/transparent"
        android:type="radial"/>
</shape>

Solution 4

If the aspect ratio of the oval you need is fixed, then you can use the gradient drawable as a background and use scaleX or scaleY to stretch it into an oval.

drawable myradial.xml:

   <?xml version="1.0" encoding="utf-8"?>
   <shape xmlns:android="http://schemas.android.com/apk/res/android"
          android:shape="rectangle">
       <!--Radial gradient centered at middle of top with glow color-->
       <gradient
           android:startColor="FF336699"
           android:endColor="00000000"
           android:centerX="50%"
           android:centerY="50%"
           android:gradientRadius="50%"
           android:type="radial"/>
   </shape>

view using it as a background

   <View
       android:layout_width="200dp"
       android:layout_height="100dp"
       android:background="@drawable/myradial"
       android:scaleX="0.5"
       />

If the aspect ratio is not fixed, it still might be possible to set scaleX in code at runtime.

This will not work for everyone in all situations. It can make for tricky layouts. One nice things is it is a single render pass, compared to the 3 passes of the very elegant solution posted with 2 linear gradients over a solid. It also can be used to stretch out any gradient, for example to create a linear gradient at a 22.5 degree angle.

Solution 5

Here is my solution to the problem.

<shape android:shape="rectangle">

 <gradient
     android:endColor="@color/your_dark_color"
     android:startColor="@color/your_light_color"
     android:type="radial"
     android:gradientRadius="700"/>

By changing the value of android:gradientRadiusI was able to get the exact results for me.

View more solutions

Comments

[Buddy]

the gradient in the picture is elliptical but this is circular.

[MBH]

This should be the accepted answer... Works perfectly

[computerjulian]

warning even this is a good solution, it will crash (or even reboot the whole phone on Android 5.0!) On API<21 gradientRadius doesn't accept % value, you have to use android:gradientRadius="100%p"

[CoolMind]

@computerjulian, thanks! In API 16, 19 emulators it showed right when used "100%", but crashed in API 21 when android:gradientRadius="100%" with exception "java.lang.IllegalArgumentException: radius must be > 0". So I replaced with 100%p. android:centerX and centerY stayed 50%.