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.
Related
A bit new to android design.
I'm trying to add an image as the background to an activity. I want this image to be partly transparent and have a black gradient at the bottom.
For this, I created a drawable resource (openscreenbgg.xml) and created a <layer-list> as follows:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<bitmap
android:src="#drawable/bgnew"
android:gravity="fill"
android:alpha="0.4">
</bitmap>
</item>
<item>
<shape android:shape = "rectangle" >
<gradient
android:startColor="#000000"
android:type="linear"
android:angle="90"/>
</shape>
</item>
bgnew is the image name
I set android:alpha for the desired transparency effect and a added <shape> item for the gradient
The preview of this xml is perfect and exactly what i want:
expected
But when I use this drawable as a background for my activity, like so:
android:background="#drawable/openscreenbgg"
The preview is much brighter:
Actual
Am I misinterpreting the use of android:alpha here? Does making it more transparent mean more "light" passes through it and so it is brighter?
I suspect the problem is that your theme gives you a default white background for all windows, and so your semi-transparent image is overlaying a light color rather than a dark one.
One way to solve this is to change how you build your background image. Instead of using alpha on the bitmap, you could mask the entire image with semi-transparent black. The end result should be approximately the same, but you wouldn't have to worry about the window background "bleeding through" the image.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<bitmap
android:src="#drawable/bgnew"
android:gravity="fill">
</bitmap>
</item>
<item>
<shape android:shape="rectangle">
<gradient
android:startColor="#FF000000"
android:endColor="#99000000"
android:type="linear"
android:angle="90"/>
</shape>
</item>
</layer-list>
Alternatively, you could set the window background to be dark instead of light, and then you'd get what you expect. But this may be difficult to achieve without affecting other activities in your app.
I was given a design for a custom ProgressBar that looks like this:
The way it works is that the bar is completely blue at 0 progress, and as progress is incremented, each side fills in equally white toward the center until the entire bar is white at max progress.
I've got the bar set up just fine. I'm using two ProgressBar objects, one that moves left-to-right, and the other rotated so that it moves right-to-left.
The part I'm stuck at is how to draw those extra circle shapes that move toward the center along with the white progress <clip>. I tried just adding an extra <shape> to my <clip> item in the XML, but that stretched the circle out as if it was using the circles to fill in the bar.
Is there a way I can add these extra shapes to the ProgressBar XML itself, or do I need to create another drawable for these shapes and then update their position manually in code? I'm not sure what the correct approach is here and I haven't been able to find any similar examples in my research. Any help is appreciated!
Here's the XML I'm using for the progressDrawable:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="#android:id/background">
<shape>
<corners
android:topLeftRadius="12dp"
android:bottomLeftRadius="12dp"/>
<solid android:color="#29A4DD"/>
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<corners
android:topLeftRadius="12dp"
android:bottomLeftRadius="12dp"
android:topRightRadius="0dp"
android:bottomRightRadius="0dp"/>
<solid android:color="#F05926"/>
</shape>
</clip>
</item>
</layer-list>
I have created the following progressbar style and set the corner radius to both shapes (background, and pogress). But it seems that when I animate / set progress below 90 my progressbar current progress shows rectangle shaped borders, without any radius. I would like to know if it is possible to have the corner radius all the time, even if the progress is 30 or less than 90,95. Can anyone explain why this is not working?
Also I need this to work with the API LEVEL 8
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Define the background properties like color etc -->
<item android:id="#android:id/background">
<shape>
<corners android:radius="25dp" />
<solid android:color="#00000000"></solid>
</shape>
</item>
<!-- Define the progress properties like start color, end color etc -->
<item android:id="#android:id/progress">
<clip>
<shape>
<corners android:radius="25dp" />
<gradient
android:startColor="#fff"
android:centerColor="#fff"
android:centerY="1.0"
android:endColor="#0d1522"
android:angle="270"
/>
</shape>
</clip>
</item>
</layer-list>
Update: I've added the right code that explains my problem
Ok. After researching and doing some more tries to accomplish this I only got to the solution of using a 9patched PNG file to make this work.
It is definately possible to have corner radius all the time. I did it by adding this line before setcontentview method of your custom progress bar.
customProgressDialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
This will make your whole view transparent. So fill the boundary inside your corners with some color.
I'm working first time with animation on Android. And I discovered this fact and I became really angry. I had a template for button with rectangle as background and an image bitmap centered using layer list.
OK, now I want to replace bitmap image with an animation. I created animation-list drawable and changed my buttons code:
<layer-list>
<item>
<shape android:shape="rectangle">
<gradient
android:startColor="#666666"
android:endColor="#666666"
android:angle="90"
android:centerY="10%"
/>
<corners android:radius="0dp" />
</shape>
</item>
<item
android:drawable="#drawable/arrowseq">
</item>
There is no possibility to avoid this very anoying auto-scaling like for bitmap.
Could you please help me or explain WHY?
Lot of thanks!
I'm trying to make a custom list divider. It has one horizontal line that's a subtle gradient, and a second horizontal white line immediately below it as a sort of "drop shadow".
I'm trying to use <layer-list> to accomplish what I want, but it's not working out the way I expect.
Here's the code:
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:startColor="#ccd0d3"
android:centerColor="#b6babd"
android:endColor="#ccd0d3"
android:height="1px"
android:angle="0" />
</shape>
</item>
<item android:top="2px">
<shape
android:color="#android:color/white"
android:height="1px" />
</item>
</layer-list>
If I use android:divider to assign this to a ListView and set the android:dividerHeight="2", I get a grey gradient that's two pixels high. The white line is nowhere to be seen.
If I set the white line's android:top="1px", I see a one pixel grey gradient and a one pixel black line below it.
Any ideas what I'm doing wrong?
You should set dividerHeight to 3 or avoid setting it altogether.