Develop Reference

Progress bar shadow only on filled part

Implementing a progress bar in android, trying to get a drop shadow on the bottom part of the filled section only, like this:
API level is KitKat and up but i wont mind a solution that applies to LOLLIPOP and up only.
Elevation does not seem to work, nor do the card View.
any sugesstions?

Create the following xml shape and place it as your progressBar background.
** The 10dp in the xml assumes the progressBar is 20dp in Height and that you want the shadow to be exactly half of it.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<layer-list>
<item android:bottom="10dp">
<shape android:shape="rectangle">
<solid android:color="#color/orange" />
</shape>
</item>
</layer-list>
</item>
<item android:id="#android:id/progress">
<clip>
<layer-list>
<item>
<shape android:shape="rectangle">
<solid android:color="#color/green" />
</shape>
</item>
<item android:top="10dp">
<shape android:shape="rectangle">
<gradient
android:angle="90"
android:endColor="#color/black"
android:startColor="#color/white" />
</shape>
</item>
</layer-list>
</clip>
</item>
</layer-list>

How to set button selection color along with rounded corners in android?

I want to set a rounded corner for a button in android along with changing the button color on when selected. I am doing the following things.
drawable/push_button.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true" android:drawable="#color/green"/>
<item android:state_focused="true" android:drawable="#color/green"/>
<item android:state_focused="false" android:drawable="#color/green"/>
<item android:state_pressed="false" android:drawable="#color/red"/>
<item android:drawable="#drawable/push_button_background"/>
</selector>
drawable/push_button_background.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
>
<solid android:color="#3F4040"/>
<corners
android:radius="7dp"
/>
</shape>
and in code, I am using
android:background="#drawable/push_button"
Here, the problem is, button colors are setting properly when selected & deselected. But, rounded corners are not working.
How to do that?
If I use
android:background="#drawable/push_button_background"
then, rounded corners are working but the button color change on selection is not working
How to implement this?
I have referred this link. Even then no help!!

I have found answer for my question with few trial & error attempts.
Here is the solution.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true">
<shape >
<solid android:color="#color/green"/>
<corners
android:radius="7dp"/>
</shape>
</item>
<item android:state_focused="true" >
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#color/green"/>
<corners
android:radius="7dp"/>
</shape>
</item>
<item android:state_focused="false" >
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#color/red"/>
<corners
android:radius="7dp"/>
</shape>
</item>
<item android:state_pressed="false" >
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#color/red"/>
<corners
android:radius="7dp"
/>
</shape>
</item>
</selector>

What I did was defined the shape and specify the dp of each corner.
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="90dp">
<solid android:color="#FFFFFF"/>
<padding />
<corners
android:bottomRightRadius="15dp"
android:bottomLeftRadius="15dp"
android:topLeftRadius="15dp"
android:topRightRadius="15dp"/>
</shape>
If you increase the dp in each corner it will make the button more rounded.

I have been successful at doing exactly what you're describing. I did the following:
First, I created a new class that extends Button. In this class, I created a method called setState():
public void setState (int s)
{
if (s > 0 && s < 4 &&)
{
this.state = s;
switch (state)
{
case 1:
setBackgroundDrawable (def_gray);
break;
case 2:
setBackgroundDrawable (lt_gray);
break;
case 3:
setBackgroundDrawable (black);
}
}
}
The three background drawables you see above are XML files describing the button look. They are mostly the same, but vary in the color set for each one. The default gray button is described like this:
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:startColor="#333333"
android:endColor="#333333" />
<stroke
android:width="2dp"
android:color="#android:color/white" />
<corners
android:radius="5dp" />
<padding
android:left="2dp"
android:top="2dp"
android:right="2dp"
android:bottom="2dp" />
</shape>
</item>
</selector>
As far as I know, that XML format is expecting to be used to configure a color gradient on the button face. Since that wasn't what I wanted, I set both color values the same and the background color is consistent. You may need to experiment a bit with color values, but it looks like you've already got a handle on that.

How to get gravity 'bottom' working on a drawable in xml

I have a simple aim. I want a light grey background on my FrameLayout with a black dividing line underneath it (only undernearth, not all around). So far I have this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle" android:gravity="center">
<solid android:color="#EEEEEE" />
</shape>
</item>
<item>
<shape android:shape="line" android:gravity="bottom" >
<stroke android:width="1dip" android:color="#010101"/>
</shape>
</item>
</layer-list>
But it draws the line through the centre, i.e. ignores the gravity='bottom' bit. How can I fix this?
EDIT: This question is very old. The selected answer may or may not be in-line with current APIs, etc. You are encouraged to start your own question rather than add to this one, which is no longer monitored.

I've struggled a lot with this as well. Basically, to create a border at the bottom, you have to think in opposite direction from what you expect. You start with a rectangle with your Border color. On top of that, you draw the actual color, with an offset from the bottom.
I use this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- CREATE A RECTANGLE WITH YOUR BORDER COLOR -->
<item>
<shape android:shape="rectangle" >
<solid android:color="#fff"/>
</shape>
</item>
<!-- NOW DEFINE THE NORMAL COLOR-->
<item android:bottom="BOTTOM_BORDER_THICKNESS E.G. 4dp">
<shape android:shape="rectangle" >
<solid android:color="#ccc"/>
</shape>
</item>
</layer-list>
Or, as Juan Pablo Saraceno suggested :
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<color android:color="YOUR_BORDER_COLOR" />
</item>
<item android:top="YOUR_BORDER_THICKNESS">
<color android:color="YOUR_BG_COLOR" />
</item>
</layer-list>

Unfortunately I have not found a way to get the gravity working for drawables, but I found how you can achieve what you want with pure xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:top="-2dp"
android:left="-2dp"
android:right="0dp"
android:bottom="1dp"
>
<shape android:shape="rectangle">
<solid android:color="#EEEEEE"/>
<stroke android:width="1dp" android:color="#010101"/>
</shape>
</item>
</layer-list>
Good luck:)

I'd recommend using a nine-patch image for this - here's an example that should do the job:
(It's only tiny but it is there!)
If you place this in your drawable folder and set your FrameLayout's background to it then you should get the desired result. The content will go in the grey area and the #010101 pixel will be stretched horizontally to form a line at the bottom. Just make sure to keep the .9.png extension to ensure it gets loaded as a nine-patch.
Hope that helps you

This works!
<item>
<bitmap
android:gravity="left|bottom"
android:src="#drawable/myDrawable" />
</item>

I know it's pretty old question but given answers didn't work for me. Turns out in order to gravity property work you just need to add size tag in drawable item.
So following will work as expected:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:gravity="center">
<shape android:shape="rectangle">
<solid android:color="#EEEEEE" />
</shape>
</item>
<item
android:gravity="bottom">
<shape android:shape="line">
<size android:height="2dp"/>
<stroke android:width="1dip" android:color="#010101"/>
</shape>
</item>
</layer-list>
ps. this feature added in api level 23
https://developer.android.com/reference/android/graphics/drawable/LayerDrawable#setLayerGravity%28int,%20int%29

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<solid android:color="#color/Black" />
</shape>
</item>
<item android:bottom="5dp">
<shape android:shape="rectangle" >
<solid android:color="#color/White" />
</shape>
</item>
</layer-list>

Well, it's pretty old question, but none of the answers seem to answer the actual question (how to make gravity working) so here's a working example:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<color android:color="#2196F3"/> <!-- Background color -->
</item>
<item android:gravity="bottom">
<shape>
<size android:height="10dp" /> <!-- I would suggest 1dp -->
<solid android:color="#F50057" /> <!-- Line color -->
</shape>
</item>
</layer-list>
By analogy, if you want to use gravity left or right change attribute height to width

Drawing top border on a shape on Android

I'm creating a custom progress bar (positioned under a WebView) and what I would like to draw is a 1dp-wide line between the WebView and the ProgressBar. I'm modifying existing drawable, namely progress_horizontal.xml, and tried something like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
(...)
<item>
<shape android:shape="line">
<stroke android:width="1dp" android:color="#FF000000" />
</shape>
</item>
</layer-list>
This line however is vertically centered but I want it to be drawn on top of the drawable. The only idea I could come up with is to use this "hacky" gradient below:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
(...)
<item>
<shape>
<gradient
android:startColor="#FF000000"
android:centerColor="#00000000"
android:centerY="0.01"
android:endColor="#00000000"
android:angle="270"
/>
</shape>
</item>
</layer-list>
Do you have better ideas how to draw a single line shape aligned to the top of the drawable defined with layer-list?

I spent a while trying to figure this out as well. Hopefully there is a better way to do it but here is the method I used, which is also kind of hackish, but in case it helps someone, I thought I would share.
The first item in your layer list should be a solid of whatever color you want to be your border. Following that would be the thing(s) you want to have the border, with padding on whatever side you want the border to be on.
For example:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="YOUR BORDER COLOR" />
</shape>
</item>
<item android:top="YOUR TOP BORDER THICKNESS">
THE THING YOU WANT A BORDER ON
</item>
</layer-list>
The idea is that the padding on the item reveals the solid shape behind it, giving the border appearance. You could add padding to any side to add a border. I imagine you could get more complicated and have different colored borders this way as well.
Seems like a hack but it worked for me.
EDIT: I said "padding" but in layer-lists it's more of an offset.

i was going through all related topics but no one could solve my problem. But some of them were very useful to understand how the layer-list or shape parameters work.
My problem was to define a button with a linear gradient and draw a top and a bottom line in different colors. After all I hacked this solution. I saved the file unter res/drawable/blue_btn.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true" >
<shape android:shape="rectangle">
<solid android:color="#color/blue_end" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
<stroke
android:width="1dp"
android:color="#color/bottomline_btn" />
</shape>
</item>
<item>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<solid android:color="#color/blue" />
<gradient
android:startColor="#color/blue"
android:endColor="#color/blue_end"
android:angle="270" />
</shape>
</item>
<item android:top="0dp" android:bottom="-1dp" android:left="-1dp" android:right="-1dp">
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#color/topline_btn" />
<solid android:color="#00000000" />
<corners android:radius="0dp" />
</shape>
</item>
<item android:top="-1dp" android:bottom="0dp" android:left="-1dp" android:right="-1dp">
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#color/bottomline_btn" />
<solid android:color="#00000000" />
<corners android:radius="0dp" />
</shape>
</item>
</layer-list>
</item>
</selector>
<color name="topline_btn">#31ffffff</color>
<color name="bottomline_btn">#31000000</color>
<color name="blue">#449def</color>
<color name="blue_end">#2f6699</color>

Did you try offsetting it by something like this
http://android.amberfog.com/?p=9

My solution is to add 9-patch as the last layer item :
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape>
<solid android:color="#color/tab_button_active_layer2" />
</shape>
</item>
<item android:bottom="#dimen/tab_button_active_bottom_bar_width">
<shape>
<solid android:color="#color/tab_button_active_layer1" />
</shape>
</item>
<!-- 9-patch drawable -->
<item android:drawable="#drawable/tab_button_border_top"/>
</layer-list>

Padding doesn't affect <shape> in an XML Layout

I am trying to set padding in a <shape> declared within an XML file/layout. But whatever I set, nothing changes related to padding. If I modify any other properties, I see the effects on the UI. But it doesn't work with padding. Could you please advise on the possible reasons for which this might occur?
Here is the XML Shape I am trying to style:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:width="1dp"
android:color="#ffffff"
android:dashWidth="2dp"/>
<solid android:color="#color/button_white_cover"/>
<corners android:radius="11dp"/>
<padding android:left="1dp"
android:top="20dp"
android:right="20dp"
android:bottom="2dp"/>
</shape>

I have finally resolved my problem with padding.
So padding here will have no effect on the shape. Instead of this, you will have to apply padding in other drawable that will use it. So, I have a drawable that uses the shape and there I do following:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/shape_below"/>
<item android:top="10px" android:right="10px" android:drawable="#drawable/shape_cover"/>
</layer-list>
So, as you can see in the second <item>-element I set padding (top and right). And after this everything works.
Thanks.

As a couple of comments have alluded to, the best approach is to wrap the <shape> in an <item> element and set the padding there instead. There are however other options available which are detailed in the link below. eg
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="8dp"
android:right="8dp"
android:top="8dp"
android:bottom="8dp">
<shape android:shape="rectangle">
...
</shape>
</item>
</layer-list>
Depending on your needs, instead of using a layer-list, you could use any of the following drawable types:
layer-list
selector
level-list
transition
For more information about the available drawable types see this android documentation
Sources:
DustinB's comment
Yahel's answer
user924's comment
How to add padding to gradient <shape> in Android?

You can try insets:
<?xml version="1.0" encoding="UTF-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetBottom="2dp"
android:insetLeft="1dp"
android:insetRight="20dp"
android:insetTop="20dp">
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#ffffff"
android:dashWidth="2dp" />
<solid android:color="#color/button_white_cover" />
<corners android:radius="11dp" />
</shape>
</inset>

The answer by Lyobomyr works, but here is the same solution applied but without the overhead of creating a new drawable, hence minimizing the file clutter :
https://stackoverflow.com/a/3588976/578746
Copy/Paste of the anwser by anon on the SO answer above :
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:left="6dp"
android:right="6dp">
<shape android:shape="rectangle">
<gradient android:startColor="#ccd0d3"
android:centerColor="#b6babd"
android:endColor="#ccd0d3"
android:height="1px"
android:angle="0"/>
</shape>
</item>
</layer-list>

I solved this problem like this:
<shape android:shape="oval" >
<stroke android:width="4dp" android:color="#android:color/transparent" />
<solid android:color="#color/colorAccent" />
</shape>
just added a transparent stroke to it.