Circular gradient in android

Question

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    lt shape xmlns android  http   schemas android com apk res android      android shape  rectangle  gt       lt gradient android startColor   E9E9E9  android endColor   D4D4D4          android angle  270   gt   lt  shape gt    When using the  oval -shape I at least got a round shape  but there were no gradient effect  How can I achieve this

User · Answer

lt  xml version  quot 1 0 quot  encoding  quot utf-8 quot   gt   lt shape xmlns android  quot http   schemas android com apk res android quot      android padding  quot 10dp quot      android shape  quot rectangle quot  gt        lt gradient         android endColor  quot  color color1 quot          android gradientRadius  quot 250dp quot          android startColor  quot  8F15DA quot          android type  quot radial quot    gt        lt corners         android bottomLeftRadius  quot 50dp quot          android bottomRightRadius  quot 50dp quot          android radius  quot 3dp quot          android topLeftRadius  quot 0dp quot          android topRightRadius  quot 50dp quot    gt   lt  shape gt

User · Answer

I guess you should add android centerColor   lt shape xmlns android  http   schemas android com apk res android  android shape  rectangle  gt   lt gradient   android startColor   FFFFFF    android centerColor   000000    android endColor   FFFFFF    android angle  0    gt   lt  shape gt    This example displays a horizontal gradient from white to black to white

User · Answer

You can get a circular gradient using android type  radial     lt shape xmlns android  http   schemas android com apk res android      android shape  rectangle  gt       lt gradient android type  radial  android gradientRadius  250dp          android startColor   E9E9E9  android endColor   D4D4D4    gt   lt  shape gt

User · Answer

Here is the complete xml with gradient  stoke  amp  circular shape    lt  xml version  1 0  encoding  utf-8   gt    lt shape     xmlns android  http   schemas android com apk res android      android shape  oval   gt        lt  -- You can use gradient with below attributes-- gt       lt gradient         android angle  90          android centerColor   555994          android endColor   b5b6d2          android startColor   555994          android type  linear    gt        lt  -- You can omit below tag if you don t need stroke -- gt      lt stroke android color   3b91d7  android width  5dp   gt        lt  -- Set the same value for both width and height to get a circular shape -- gt       lt size android width  200dp  android height  200dp   gt         lt  --if you need only a single color filled shape-- gt       lt solid android color   e42828   gt     lt  shape gt

User · Answer

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

User · Answer

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   lt  xml version  1 0  encoding  utf-8   gt   lt shape xmlns android  http   schemas android com apk res android  gt       lt gradient         android type  radial          android gradientRadius  10 p          android startColor   f6ee19          android endColor   115ede    gt   lt  shape gt    Which can be set on a view s background attribute like this   lt View     android layout width  200dp      android layout height  100dp      android background   drawable my gradient drawable   gt    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

User · Answer

lt  -- Drop Shadow Stack -- gt   lt item gt       lt shape android shape  oval  gt           lt padding             android bottom  1dp              android left  1dp              android right  1dp              android top  1dp    gt            lt solid android color   00CCCCCC    gt            lt corners android radius  3dp    gt       lt  shape gt   lt  item gt   lt item gt       lt shape android shape  oval  gt           lt padding             android bottom  1dp              android left  1dp              android right  1dp              android top  1dp    gt            lt solid android color   10CCCCCC    gt            lt corners android radius  3dp    gt       lt  shape gt   lt  item gt   lt item gt       lt shape android shape  oval  gt           lt padding             android bottom  1dp              android left  1dp              android right  1dp              android top  1dp    gt            lt solid android color   20CCCCCC    gt            lt corners android radius  3dp    gt       lt  shape gt   lt  item gt   lt item gt       lt shape android shape  oval  gt           lt padding             android bottom  1dp              android left  1dp              android right  1dp              android top  1dp    gt            lt solid android color   30CCCCCC    gt            lt corners android radius  3dp    gt       lt  shape gt   lt  item gt   lt item gt       lt shape android shape  oval  gt           lt padding             android bottom  1dp              android left  1dp              android right  1dp              android top  1dp    gt            lt solid android color   50CCCCCC    gt            lt corners android radius  3dp    gt       lt  shape gt   lt  item gt    lt  -- Background -- gt   lt item gt       lt shape android shape  oval  gt           lt gradient             android startColor   color colorAccent 1              android centerColor   color colorAccent 2              android endColor   color colorAccent 3              android angle  45                gt           lt corners android radius  3dp    gt       lt  shape gt   lt  item gt       lt color name  colorAccent 1  gt  6f64d6 lt  color gt   lt color name  colorAccent 2  gt  7668F8 lt  color gt   lt color name  colorAccent 3  gt  6F63FF lt  color gt

User · Answer

lt gradient     android centerColor   c1c1c1      android endColor   4f4f4f      android gradientRadius  400      android startColor   c1c1c1      android type  radial   gt   lt  gradient gt

[android] Circular gradient in android

Examples related to android

Examples related to gradient