Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Gradient Radius as percentage of screen size

I'm trying to create a shape drawable with radial gradient background, with radius that will adjust to the screen size (take a look at the relevant documentation).

This is my code:

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"     android:shape="rectangle" >      <gradient         android:endColor="#000"         android:gradientRadius="50%p"         android:startColor="#5d2456"         android:type="radial" /> </shape> 

But it doens't seem to work. if I remove the "%p", it works, but then the radius will be static, thus not adjusting to the screen size...Any idea what's wrong?

like image 657
shaylh Avatar asked Jun 24 '12 10:06

shaylh


People also ask

What is radial gradient?

The radial-gradient() CSS function creates an image consisting of a progressive transition between two or more colors that radiate from an origin. Its shape may be a circle or an ellipse. The function's result is an object of the <gradient> data type, which is a special kind of <image> .

How do you make a radial gradient?

Select the Radial Gradient tool by clicking its icon in the column on the right or pressing the R key. Drag over the area that you want to adjust. The point where you start to drag will become the center of the radial gradient. Drag the sliders in the Radial Gradient panel to make your adjustments.

How do you change the radial gradient size in CSS?

Radial-gradient size In addition to keywords you can also use length units to give the size of a radial gradient. Horizontal size comes first, then vertical. Both are required in middle syntax. In new syntax one length is allowed, which causes the gradient to become a circle (same width and height).

How do you make a radial gradient in HTML?

The createRadialGradient() method creates a radial/circular gradient object. The gradient can be used to fill rectangles, circles, lines, text, etc.


1 Answers

From what I´ve tested, the % does work, but not as you expected.
First of all

android:gradientRadius="50" 

seems to take the value as pixels 50px

android:gradientRadius="50%" 

is converted as if 50% = 0.5 px, try

android:gradientRadius="5000%" 

and you will see a 50px radius.
Using %p has a similar result. Obviously this is something I hope will be changed in the future, because it does not have much use as it is. Usually XML ShapeDrawable resources adapt their size to some external container, in this case gradientRadius is setting the size regardless of the container.

like image 182
ilomambo Avatar answered Sep 19 '22 19:09

ilomambo