I am trying to make a circle using xml with a halo. The halo would be like it starts with say green color in the center, the greenish color keeps fading and finally at the edges it becomes transparent.
How to go about it?
I am trying to use following:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<gradient android:centerColor="#drawable/light_green" android:gradientRadius="250" android:type="radial"
android:endColor="#android:color/transparent"
android:angle="270"/>
</shape>
Still not able to get the desired effect. Any lead would be helpful.
Try this:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<gradient
android:angle="270"
android:centerColor="#88FF0000"
android:centerX="50%p"
android:centerY="50%p"
android:endColor="#00FF0000"
android:gradientRadius="50%p"
android:startColor="#FFFF0000"
android:type="radial" />
<size
android:height="80dp"
android:width="80dp" />
</shape>
Change color code and change centerColor's alpha code as per your requirement
Related
How can we display the colors as shown in the image where we can select more than one color ? The colored boxes must be checkboxes according to me but I am not able customize them
You need to define an xml resource in the drawable folder and use it in an imageView for instance for your question above it may look like this. Where by you use a shape called rectangle, giving it a solid colour as below and then also making the corner radius circular with 8dp. Then to display it you use an imageView and set it as a src. I have also added a stroke. Remove it if you dont need it!
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#DFDFE0" />
<size
android:height="8dp"
android:width="16dp" />
<corners
android:bottomLeftRadius="8dp"
android:bottomRightRadius="8dp"
android:topLeftRadius="8dp"
android:topRightRadius="8dp" />
<stroke
android:width="3dp"
android:color="#2E3135" />
<gradient
android:type="linear"
android:angle="0"
android:startColor="#f6ee19"
android:endColor="#115ede" />
</shape>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:radius="5dp"/>
<gradient
android:startColor="#2E3135"
android:centerColor="#000000"
android:endColor="#ffffff"
android:angle="180"/>
</shape>
Change the colour as your need.
NOTE : updated question !
i want to make gradiend as mentioned in the pic
the centered gray is a line i want it to be merged with both right left
Solution tried
Android drawable with background and gradient on the left
i couldnt find more about custom drawable gradient how i need
<shape android:shape="rectangle">
<gradient
android:angle="0"
android:centerColor="#color/white"
android:endColor="#color/gray"
android:startColor="#color/gray"
android:type="linear"
/>
</shape>
i have these two images and want to make them with drawable ..
thanks in advance ..
PS : I have also tried the answer i got against my question but i think this gradient isnt possible i have been waiting since 3 months for solution.
Try to use type as radial :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:useLevel="false">
<size
android:width="48dip"
android:height="48dip" />
<gradient
android:centerColor="#android:color/white"
android:centerY="0.5"
android:gradientRadius="180"
android:type="radial"
android:useLevel="false" />
</shape>
try this and change color what you want
android:background:"#drawable/color_grad"
color_grad.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:centerColor="#FAFAFA"
android:endColor="#C7C7C7"
android:startColor="#C7C7C7"
android:type="linear"
android:angle="270"/>
<corners android:radius="0dp" />
android:background="#drawable/gradient"
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#C3C3C3"
android:endColor="#00000000"
android:angle="45"/>
</shape>
I would like to know how to create a kind of gradient frame for a background rectangle with xml.
It's simple to create a background gradient for 1 side with xml definition like this:
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient
android:type="linear"
android:centerX="8%"
android:startColor="#FF004D4D"
android:centerColor="#FF000000"
android:endColor="#FF000000"
android:angle="180"/>
</shape>
which results into a background like this:
But how can I create a similar gradient for all sides ? So that it would look something like this (apologies for 30 seconds photoshopping):
I tried to create a layer-list, as suggested in other questions regarding multiple gradients, but that didn't seem to work, it just took the "last item", and used those settings..
I am using setBackgroundResource(R.drawable.gradient_bg); in onDraw method for View if that is of any importance. Thanks for any suggestions!
The answer was indeed layered-list. The mistake was just not lowering the alpha on the endColor. So this works as expected:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<gradient
android:type="linear"
android:centerX="8%"
android:startColor="#FFFF0000"
android:centerColor="#00FF0000"
android:endColor="#00000000"
android:angle="0"/>
</shape>
</item>
<item>
<shape android:shape="rectangle">
<gradient
android:type="linear"
android:centerX="8%"
android:startColor="#FFFF0000"
android:centerColor="#00FF0000"
android:endColor="#00000000"
android:angle="90"/>
</shape>
</item>
</layer-list>
I'm trying to make my imageview have a radial gradient background that goes from solid white to a transparent white on the outside. Here's my SHAPE definition that I use as the ImageView background. The problem is that I end up with a solid white circle for my background, not the semi transparent edges like I want:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#ffffff00"
android:endColor="#ffffffff"
android:centerX="50%"
android:centerY="50%"
android:gradientRadius="50%"
android:type="radial"/>
<corners
android:bottomRightRadius="20dp"
android:bottomLeftRadius="20dp"
android:topLeftRadius="20dp"
android:topRightRadius="20dp"/>
Ok, I figured it out. I had two errors: the first being that percentages are not supported in gradientRadius and the second being that the first two places in startColor and endColor are the transparency values. It's AARRGGBB not RRGGBBAA. Here is the fixed Shape definition:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#ffffffff"
android:endColor="#00ffffff"
android:gradientRadius="36"
android:type="radial"/>
<corners
android:bottomRightRadius="20dp"
android:bottomLeftRadius="20dp"
android:topLeftRadius="20dp"
android:topRightRadius="20dp"/>
</shape>
How do I make a gradient image in Android, like this photo?
I tried this, Hope it will work for you
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:type="radial" android:gradientRadius="250"
android:startColor="#E9E9E9" android:endColor="#D4D4D4" />
</shape>