XML Circle with gradient fill Android - android

I am trying to make an XML Button, circle shape, which is filled with a gradient color. This color needs to be changed programatically.
Here is an example of what I am trying to achieve.
My attempts to build this have ended up with a gradient background and a solid colored circle. Instead of the gradient circle and transparent background.
I am hoping to be able to use more then 2 colors or a radial gradient for the circle as well. Any help is greatly appreciated.

You can Try with making Drawable XML. Example
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="circle" >
<gradient
android:angle="90"
android:centerColor="#555994"
android:endColor="#b5b6d2"
android:startColor="#555994"
android:type="linear" />
</shape>
Arrange angle based on your requirement.
If you wants to change Color progarmatically then read this:-
How do I programmatically set the background color gradient on a Custom Title Bar?

Belated but can be helpful for someone else
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<gradient android:angle="0" android:endColor="#fff" android:gradientRadius="#dimen/_30sdp" android:startColor="#color/colorPrimaryDark" android:type="radial" />
<size android:width="#dimen/_25sdp" android:height="#dimen/_25sdp" />
</shape>
</item>
Output

Late but someone might get helped. Thanks to #Faizan
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<gradient android:angle="270" android:endColor="#D10719" android:gradientRadius="120dp" android:startColor="#0A5A1B" android:type="linear" />
<size android:width="100dp" android:height="100dp" />
</shape>
</item>
</selector>
Output:

Related

How to give a custom angle to a gradient?

when creating a background with a gradient, it is possible to set the gradient in multiplications of 45
how can I set the gradient angle to 60 for instance?
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:angle="45"
android:startColor="#color/gradient_bottom"
android:endColor="#color/gradient_top"
android:type="linear" />
</shape>
</item>
</selector>
You can use like this.
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
>
<gradient
android:startColor="#color/purple"
android:endColor="#color/pink"
android:angle="60" />
</shape>
If you use shape then it's working fine.

Android shape border with gradient and middle transparent

I need to create a round corner border, where border with gradient.enter link description here is working.But My page is using a image as background which is also with gradient. I need to show background image from middle of the filed. I want to create just like below image:
round_background.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="4dp"
android:color="#color/transparent" />
<gradient
android:startColor="#374533"
android:centerColor="#432727"
android:endColor="#222430"
android:angle="135"/>
<corners android:radius="10dp" />
</shape>
round_border.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#efe301"
android:centerColor="#7dc17b"
android:endColor="#01dae6"
android:angle="180"/>
<corners android:radius="10dp" />
result_drawable.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/round_border"/>
<item android:drawable="#drawable/round_background" />
</layer-list>
Here, you can set android:width="4dp" in round_background.xml to set size of your border. use result result_drawable.xml where you want..
Enjoy. :}

Android shadow color for layout

I have developed a listView for my app. My UI is simple flat UI, here is a snapshot:
when I searched internet for better interfaces I found this for example:
As you see in this sample, background colors have shadows at the bottom. Is there a way that I can color my Layout background like this? Thanks in advanced.
In order to achieve a shadow effect I'd guess that it's better to use a layer-list with two items, one with the solid color and the second item would be a gradient coming from transparent to a black color with an alpha value.
Here's how this would look like (needs to be placed in res/drawable/):
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#ff33b5e5" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<gradient
android:angle="-90"
android:endColor="#90000000"
android:startColor="#android:color/transparent" />
</shape>
</item>
</layer-list>
Doing it this way, you won't need to "search" for a darker color of your solid color all the time.
Output would look like this:
Create an XML file and named it as "gradient_effect" in Res -> Drawable folder and put below code in it
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#a0a0a0"
android:endColor="#f5f5f5"
android:angle="0"
/>
Now use this file as a background in any of your layout as you can get is like
android:Background= "#Drawable/gradient_effect"
Set above line as an attribute for any of you view or layout in xml file
This can help too!
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<gradient
android:angle="90"
android:endColor="#A2000000"
android:startColor="#android:color/transparent" />
</shape>
</item>

Android xml shape drawable - how to draw a u-form?

I need to create a xml shape drawable that draws a rectangle without the top-line (a "u-form"). What I am able to do is draw a rectangle, like so:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#color/detailrow_bg_normal" />
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"
android:radius="1dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp" />
<padding
android:bottom="2dip"
android:left="1.5dip"
android:right="1.5dip"
android:top="8dip" />
<stroke
android:width="1dip"
android:color="#color/detailtable_border" />
But how - if possible, can I define the same shape without the top (or bottom) line?
You could try using a layer-list. See if something like this would work:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<solid android:color="#color/detailtable_border" />
</shape>
</item>
<item android:left="1.5dp" android:right="1.5dp" android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="#color/detailrow_bg_normal" />
</shape>
</item>
</layer-list>
This (should) fill the rectangle with the border color, then overlay it with the default background color, leaving the appropriate amount of the right/left/bottom border color showing.
try this code and also refer this link:::
I achieved a good solution with this one:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- This is the line -->
<item android:top="-1dp" android:right="-1dp" android:left="-1dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke android:width="1dp" android:color="#ffffff" />
</shape>
</item>
</layer-list>
This works well in case you need a transparent color but still an open stroke color (In my case i only needed a bottom line). If you need a background color you can add a solid shape color as in above answer.
You might be able to achieve this using two shapes and a LayerList, but I think it is both a better solution and easier to use a NinePatch-drawable.

Layout with different colors

I'd like to have a background color of a RelativeLayout similar to that of an image shown in the link below. Ignore the black strip in the bottom half of the image.
I don't want to use the image as a background of the layout. Can you give me an idea of how to proceed?
You can use gradient. Set different gradient in selector as you want. Done!
GradientDrawable.class
This is what you want, set your colors. Enjoy!
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:bottom="30dp">
<shape android:shape="rectangle" >
<corners
android:topRightRadius="8dip"
android:topLeftRadius="8dip" />
<gradient
android:startColor="#030303"
android:endColor="#3B3B3B"
android:angle="270" />
</shape>
</item>
<item android:top="30dp" >
<shape android:shape="rectangle" >
<corners
android:bottomLeftRadius="8dip"
android:bottomRightRadius="8dip" />
<gradient
android:startColor="#4B5057"
android:endColor="#4B5059"
android:angle="270" />
<size android:height="30dp" />
</shape>
</item>
</layer-list>
just try with shape file structure. I think this may give the solution.
//save this below code as gradient and use as background of your layout as
android:background="#drawable/gradient"
//gradient.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#232323" android:endColor="#4B5059"
android:angle="270"/>
</shape>

Categories

Resources