Circular gradient in android
AndroidGradientAndroid Problem Overview
I'm trying to make a gradient that emits from the middle of the screen in white, and turns to black as it moves toward the edges of the screen.
As I make a "normal" gradient like this, I have been experimenting with different shapes:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#E9E9E9" android:endColor="#D4D4D4"
android:angle="270"/>
</shape>
When using the "oval"-shape I at least got a round shape, but there were no gradient effect. How can I achieve this?'
Android Solutions
Solution 1 - Android
You can get a circular gradient using android:type="radial"
:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:type="radial" android:gradientRadius="250dp"
android:startColor="#E9E9E9" android:endColor="#D4D4D4" />
</shape>
Solution 2 - Android
I always find images helpful when learning a new concept, so this is a supplemental answer.
The %p
means a percentage of the parent, that is, a percentage of the narrowest dimension of whatever view we set our drawable on. The images above were generated by changing the gradientRadius
in this code
my_gradient_drawable
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:type="radial"
android:gradientRadius="10%p"
android:startColor="#f6ee19"
android:endColor="#115ede" />
</shape>
Which can be set on a view's background
attribute like this
<View
android:layout_width="200dp"
android:layout_height="100dp"
android:background="@drawable/my_gradient_drawable"/>
##Center
You can change the center of the radius with
android:centerX="0.2"
android:centerY="0.7"
where the decimals are fractions of the width and height for x
and y
respectively.
##Documentation
Here are some notes from the documentation explaining things a little more.
> android:gradientRadius
>
> Radius of the gradient, used only with radial gradient. May be an
> explicit dimension or a fractional value relative to the shape's
> minimum dimension.
>
> May be a floating point value, such as "1.2".
>
> May be a dimension value, which is a floating point number appended
> with a unit such as "14.5sp". Available units are: px (pixels), dp
> (density-independent pixels), sp (scaled pixels based on preferred
> font size), in (inches), and mm (millimeters).
>
> May be a fractional value, which is a floating point number appended
> with either % or %p, such as "14.5%". The % suffix always means a
> percentage of the base size; the optional %p suffix provides a size
> relative to some parent container.
Solution 3 - Android
You can also do it in code if you need more control, for example multiple colors and positioning. Here is my Kotlin snippet to create a drawable radial gradient:
object ShaderUtils {
private class RadialShaderFactory(private val colors: IntArray, val positionX: Float,
val positionY: Float, val size: Float): ShapeDrawable.ShaderFactory() {
override fun resize(width: Int, height: Int): Shader {
return RadialGradient(
width * positionX,
height * positionY,
minOf(width, height) * size,
colors,
null,
Shader.TileMode.CLAMP)
}
}
fun radialGradientBackground(vararg colors: Int, positionX: Float = 0.5f, positionY: Float = 0.5f,
size: Float = 1.0f): PaintDrawable {
val radialGradientBackground = PaintDrawable()
radialGradientBackground.shape = RectShape()
radialGradientBackground.shaderFactory = RadialShaderFactory(colors, positionX, positionY, size)
return radialGradientBackground
}
}
Basic usage (but feel free to adjust with additional params):
view.background = ShaderUtils.radialGradientBackground(Color.TRANSPARENT, BLACK)
Solution 4 - Android
Here is the complete xml with gradient, stoke & circular shape.
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<!-- You can use gradient with below attributes-->
<gradient
android:angle="90"
android:centerColor="#555994"
android:endColor="#b5b6d2"
android:startColor="#555994"
android:type="linear" />
<!-- You can omit below tag if you don't need stroke -->
<stroke android:color="#3b91d7" android:width="5dp"/>
<!-- Set the same value for both width and height to get a circular shape -->
<size android:width="200dp" android:height="200dp"/>
<!--if you need only a single color filled shape-->
<solid android:color="#e42828"/>
</shape>
Solution 5 - Android
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:shape="rectangle">
<gradient
android:endColor="@color/color1"
android:gradientRadius="250dp"
android:startColor="#8F15DA"
android:type="radial" />
<corners
android:bottomLeftRadius="50dp"
android:bottomRightRadius="50dp"
android:radius="3dp"
android:topLeftRadius="0dp"
android:topRightRadius="50dp" />
</shape>
Solution 6 - Android
I guess you should add android:centerColor
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#FFFFFF"
android:centerColor="#000000"
android:endColor="#FFFFFF"
android:angle="0" />
</shape>
This example displays a horizontal gradient from white to black to white.
Solution 7 - Android
<gradient
android:centerColor="#c1c1c1"
android:endColor="#4f4f4f"
android:gradientRadius="400"
android:startColor="#c1c1c1"
android:type="radial" >
</gradient>
Solution 8 - Android
<!-- Drop Shadow Stack -->
<item>
<shape android:shape="oval">
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="#00CCCCCC" />
<corners android:radius="3dp" />
</shape>
</item>
<item>
<shape android:shape="oval">
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="#10CCCCCC" />
<corners android:radius="3dp" />
</shape>
</item>
<item>
<shape android:shape="oval">
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="#20CCCCCC" />
<corners android:radius="3dp" />
</shape>
</item>
<item>
<shape android:shape="oval">
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="#30CCCCCC" />
<corners android:radius="3dp" />
</shape>
</item>
<item>
<shape android:shape="oval">
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="#50CCCCCC" />
<corners android:radius="3dp" />
</shape>
</item>
<!-- Background -->
<item>
<shape android:shape="oval">
<gradient
android:startColor="@color/colorAccent_1"
android:centerColor="@color/colorAccent_2"
android:endColor="@color/colorAccent_3"
android:angle="45"
/>
<corners android:radius="3dp" />
</shape>
</item>
<color name="colorAccent_1">#6f64d6</color>
<color name="colorAccent_2">#7668F8</color>
<color name="colorAccent_3">#6F63FF</color>