how to get android gradient center light effect?

Question

i want something like following image

i tried it using drawable shape

Answer 1

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.

Answer 2

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.

Answer 3

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"

Answer 4

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>

Answer 5

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>