I try to use the GradientDrawable to set a gradient to some backgrounds and buttons.
Sadly the documentation is not very detailed.
What are the main attributes to configure the gradient? I understand start and endcolor but some of the other attributes could need some explanation.
At the moment I used images as the background for the buttons but a drawable defined in XML would be much nicer.
I try to get a look like this (It is a very light gradient): alt text http://janusz.de/~janusz/RedButton.png
use this xml as background to the imageview.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient android:angle="90" android:startColor="#7c0000" android:endColor="#A71C1C"/>
</shape>
thats it.
I will give the same answer as Praveen, but will try to explain the settings as well.
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:type="linear"
android:angle="-90"
android:startColor="#7c0000"
android:endColor="#A71C1C" />
</shape>
android:type
There are 3 types of gradients, the default and the one for this question is "linear". The other 2 are "radial" and "sweep".
android:angle
Counter-clockwise rotation of the gradient, where 0 is | start color --> end color | (horizontally).
android:startColor
Color the gradient starts from, start is defined by the rotation.
android:endColor
Color the gradient ends with, end is defined by the rotation.
android:centerColor
There can also be a color in between the start and end color, if desired.
Code
I originally found this question because I wanted to do it in code. Here is how to do it programmatically.
int startColor = 0xfff6ee19; // yellow
int endColor = 0xff115ede; // blue
GradientDrawable gradientDrawable = new GradientDrawable(
GradientDrawable.Orientation.LEFT_RIGHT,
new int[] {startColor, endColor});
View myView = findViewById(R.id.my_view);
myView.setBackgroundDrawable(gradientDrawable);
The different orientations in the image at the top can be achieved by changing the Orientation in the constructor.
XML
As already answered, this is how you do it in xml.
my_gradient_drawable.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:type="linear"
android:angle="0"
android:startColor="#f6ee19"
android:endColor="#115ede" />
</shape>
You set it to the background of some view. For example:
<View
android:layout_width="200dp"
android:layout_height="100dp"
android:background="#drawable/my_gradient_drawable"/>
See also
How to make gradient background in android
GradientDrawable documentation
Related
I have a custom shape for button's dashed border. With hardcoded color everything works as expected, but I need to pass color from outside. How can I do it?
Here is my xml.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid/>
<corners android:radius="16dip" />
<stroke
android:width="1dp"
android:color="#color/blue"
android:dashWidth="3dp"
android:dashGap="3dp"
/>
</shape>
</item>
</selector>
and this is usage
android:background="#drawable/dashed_border_button"
I need to change border color from hardcoded to dynamic
I achieved the same by using another Drawable resource file wit the attribute Stroke - Color = "your color"
and then setting the background Drawable to new Drawable file
yourview.setBackgroundResource(R.drawable.another);
This is because the method :
DrawableCompat.setTint(as.getBackground(),Color.BLUE);
Set even the solid fill color to the blue (here in this case) , which you don't want.
Hope it helps!!`
You need to get background() from your view and make
DrawableCompat.setTint(color, DrawableCompat.wrap(view.bacground())
I've been following this tutorial here Medium - Diagonal Cut View to get that diagonal view effect
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/colorPrimary" />
<item>
<bitmap
android:src="#drawable/bebe"
android:gravity="center"
android:alpha="0.1" />
</item>
<item android:top="260dp"
android:bottom="-100dp"
android:left="0dp"
android:right="-260dp">
<rotate
android:fromDegrees="-10"
android:pivotX="0%"
android:pivotY="100%">
<shape
android:shape="rectangle">
<solid
android:color="#android:color/white"/>
</shape>
</rotate>
</item>
</layer-list>
So far the code is the almost the same and the effect is achieved, but only works on Lollipop+, I have searched but cannot find how to have a color overlay on top of an drawable to achieve this same effect and all my tries has being in vain.
The drawable goes in the background property of a RelativeLayout. I have tried to make it in 2 separated ImageView, one for the background image and one for the color overlay, but that doesn't apply the diagonal style right.
How can one achieve this effect for pre-lollipop versions?
Drawable background = relativeLayout.getBackground();
background.setColorFilter(getResources().getColor(R.color.colorAccent), PorterDuff.Mode.SRC_IN);
you can also try SRC_ATOPor MULTIPLY depending on desired effect.
========= EDIT ========================
Ok, I think I now better understand what you are asking. It wasn't entirely clear at first.
You aren't asking about a color overlay per-say, or rather, that is not what your problem is. Your problem lies in your reliance on the alpha attribute.
Do this, I have reordered your elements, so that the colored shape goes on top of the image, and instead of making the image transparent, we make the colored shape's color have an specified alpha byte. You can change the color and alpha as you like.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<bitmap
android:gravity="center"
android:src="#drawable/muse15fence_750"/>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#cc3F51B5"/>
</shape>
</item>
<item
android:bottom="-100dp"
android:left="0dp"
android:right="-260dp"
android:top="260dp">
<rotate
android:fromDegrees="-10"
android:pivotX="0%"
android:pivotY="100%">
<shape
android:shape="rectangle">
<solid
android:color="#android:color/white"/>
</shape>
</rotate>
</item>
</layer-list>
This is what it looks like in Jelly Bean.
This question already has answers here:
Create alpha gradient on image to create fade effect
(2 answers)
Closed 6 months ago.
I need to create an alpha-gradient on the edge of the ImageView. Preferably using only XML.
Image for example
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#00FFFFFF"
android:endColor="#FFFFFFFF"
android:type="linear" />
</shape>
perfect transperancy. Make sure that the View below gradient is actually below and not just touching Gradient shape View.
If you have main RelativeLayout, ListView and View(Background:Gradient )
make sure that Gradient View is on top, of the ListView, and not a side. If Your gradient is aside it will be transparent by RelativeLayout Background Color and not by ListView .
i hope you understand what i want to say.
For transparency :
android:startColor="#null"
Or you can use a 8-digit hex color like that :
android:startColor="#FF000000"
The first two FF are for the alpha of the color, 00 is fully transparent and FF opaque
Need to code a custom ImageView if you want colorless transparency.
If your background is a static color, here's my preferred workaround:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/your_image"/>
<item>
<shape android:shape="rectangle">
<gradient android:startColor="#00efefef"
android:endColor="#ffefefef"
android:angle="270"
android:type="linear"/>
</shape>
</item>
</layer-list>
I'm trying to create an button with xml gradient code. (Because I'm a new user can't upload the image :( ) This image has two colors and corners in its edges.The color which starts the gradient will start from 15% of all gradient length and ending color ends on 75% of gradient length.
I use this code to create Gradient with two colors:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item >
<shape android:shape="rectangle">
<gradient
android:angle="-45"
android:startColor="#64bcfb"
android:endColor="#2f8fd4"
android:type="linear"/>
<corners android:radius="10dp" />
</shape>
</item>
</layer-list>
The problem is that i don't know how to add the start percentage and the end percentage of gradient.I have some searches about this and ind some things in:
banded background with two colors?
Gradients and shadows on buttons
in both there is some solutions but i it's not work for me. The solutions is about creating a simple bar with two colors but i want to create a button that have some corners in its edges also.
I cant also use the original image in my app because i need to changes its colors pragmatically.
Have any body some idea about how we can add percentages in gradients?
This is quite old but no answer and I think I was having the issue and found a fix.
If you only need a gradient with 2 colors, a single transition and with corners, you can do the following:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners
android:bottomLeftRadius="10dp"
android:bottomRightRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp" />
<gradient
android:angle="270"
android:startColor="#android:color/transparent"
android:centerColor="#android:color/transparent"
android:centerY="0.65"
android:endColor="#color/colorPrimary"
android:type="linear" />
</shape>
The trick here is adding a centerColor and centerY and modifying it's center. This will allow you to modify where the transition occur.
I have the following drawable:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#2F2F2F"
android:endColor="#5A5A5A"
android:angle="90"
android:dither="true"
/>
</shape>
Is there anyway to start the startColor at 50% or the endColor at 50%?
Are there any links that show me all of the attributes I can apply to a gradient?
These pages show all the attributes you can apply to a gradient.
http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape
http://developer.android.com/reference/android/graphics/drawable/GradientDrawable.html
To do something in the middle like you are asking, try experimenting with the android:centerColor attribute.
Are you talking about transparency? I'm fairly certain you can just use a 8-digit color code rather than a 6-digit, the first 2 of which constitute the alpha value. So #AARRGGBB, or something like #882F2F2F.