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.
Related
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.
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 am trying to create a list divider that has an etched look like the attached screenshot. Upon closer inspection, I see that the divider is composed of 3 layers of colors, 2A2A2A, 3A3A3A and 404040. Does anyone have a clue as to how to implement this. I tried to do it with a layer-list, but it does not have a field for color or background
<item android:color ?? >
Quick help is appreciated.
Just use a shape that has a height of 3 pixels with a vertical gradient.
Here is an UNTESTED EXAMPLE
<shape android:shape="rectangle">
<size android:height="3dp"/>
<gradient
android:angle="90"
android:startColor="#2A2A2A"
android:centerColor="#3A3A3A"
android:endColor="#404040" />
</shape>
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.