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.
Related
Am trying to achieve this without using image as background, wanted to be done in xlm drawable
Use this
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FFFFFF" />
</shape>
</item>
<item
android:bottom="0dp"
android:left="-200dp"
android:right="-200dp"
android:top="-340dp">
<shape
android:shape="oval">
<solid android:color="#color/dark_orange" />
</shape>
</item>
Change left-right margin as per your requirements. That will change curve.
I have made a button drawable that consists of a gradient shape and a solid shape, both in a layer-list like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:height="25dp">
<shape android:shape="rectangle" >
<gradient
android:angle="90"
android:startColor="#color/greyDark1"
android:endColor="#color/greyDark2"/>
</shape>
</item>
<item android:top="25dp" android:height="25dp">
<shape android:shape="rectangle" >
<solid android:color="#color/black" />
</shape>
</item>
</layer-list>
But I can't get the corners right.
I need rounded corners around the entire shape, but not on the inside (so topRight and topLeft op the top half and bottomRight and bottomLeft for the bottom half).
If I set both halves with <corners android:radius="8dp"> the bottom corners of the top half and the top corners of the bottom half are rounded too, and that's not what I want.
If I set <corners android:topRightRadius="8dp" android:topLeftRadius"8dp"> for the top half and <corners android:bottomRightRadius="8dp" android:bottomLeftRadius"8dp"> for the bottom half the top half would be the full size of the drawable making the gradient not working properly and the bottom corners are that same color too.
Here is an image of what I'm trying to accomplish:
Does someone know a solution to this?
EDIT:
I have gotten some answers and I'm thankful for that, but sadly enough they don't seem to work.
The answers I got from bofredo and Bhuvnesh Chasta resulted in something like this:
And the answer I got from curiousMind looks pretty nice, but isn't what I'm aiming for:
FINAL EDIT:
I have discussed this problem with someone I was working with and we both agree that it isn't that important to have it look like this, so we went with a solid color.
I still want to thank everybody who helped, all the current answers will get an upvote and I will accept the answer from waqaslam because he came very close to what I wanted.
I think that's the closest you can reach to your desired drawable using xml.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<corners android:radius="2dp"/>
<gradient android:startColor="#4e4e4e" android:centerColor="#626262" android:endColor="#android:color/transparent" android:angle="270" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<corners android:radius="2dp"/>
<gradient android:startColor="#android:color/transparent" android:centerColor="#4c4c4c" android:endColor="#1c1c1c" android:angle="270" />
</shape>
</item>
Perhaps you should use 9-patch drawable to get the exact effect.
I had this problem quite some time ago aswell. You can find that question HERE
This is from the working answer:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#color/cocus_orange"/>
<corners android:radius="15px"/>
<padding android:left="1dp" android:top="1dp" android:right="1dp" android:bottom="1dp" />
</shape>
</item>
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient android:angle="90"
android:startColor="#880f0f10"
android:centerColor="#880d0d0f"
android:endColor="#885d5d5e"/>
<corners
android:radius="15px" />
</shape>
</item>
</layer-list>
try like this
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="270"
android:endColor="#000"
android:startColor="#787575" />
<corners android:radius="8dip" />
Try this one. You should use to corners in shape for round to corner.
<?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="#b2d1d1ef" />
<corners android:radius="1dp"/>
</shape>
</item>
<item android:right="1dp" android:left="1dp" android:bottom="2dp" android:top="1dp">
<shape
android:shape="rectangle">
<solid android:color="#FFFFFF"/>
<corners android:radius="5dp"/>
</shape>
</item>
Found this question today and solved, I'm sharing it in case anyone else will find it unsolved as the OP wanted, and wants to know the right way as I'm sure the OP doesn't need it anymore.
I made starting point/ending point for each item's draw, the gradient for the top starts where the button starts, ends after 20dp, for the bottom starts after 20dp and it ends in the end of the button. You can even see from the attachment that it is the same as the OP's wanted result! :)
(I don't have 10 reputation to post images.)
Button Preview from Android Studio
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="20dp">
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="270"
android:startColor="#4e4e4e"
android:endColor="#626262"
android:type="linear"/>
</shape>
</item>
<item android:top="20dp">
<shape
android:shape="rectangle" >
<gradient
android:angle="270"
android:startColor="#4c4c4c"
android:endColor="#1c1c1c"
android:type="linear"/>
<corners android:bottomLeftRadius="8dp" android:bottomRightRadius="8dp"/>
</shape>
</item>
</layer-list>
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.
I want to make a drawable for my Android button, defined as drawable. I found I could set all the borders by using a rectangle, but I got kinda stuck when I wanted it on three sides. I want for example have either the top or the bottom open.
Could anyone show me how to do this?
Try doing this, though I saw it on some other post
<?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="#FFFFFF" />
<padding
//android:bottom="10dp" Remove this to avoid seeing the bottom border
android:left="10dp"
android:right="10dp"
//android:top="10dp" Remove this to avoid seeing the top border
/>
<corners android:radius="5dp" />
</shape>
</item>
<item>
<shape android:shape="rectangle" >
<padding
android:bottom="5dp"
android:left="5dp"
android:right="5dp"
android:top="5dp" />
<solid android:color="#666666" />
</shape>
</item>
</layer-list>
https://stackoverflow.com/a/10133434/1244489
If anyone is running into issues regarding padding taking effect in the accepted answer, try taking a look at: https://stackoverflow.com/a/11006931. That solution uses position attributes on the tags to achieve the same effect.
I was having trouble using the accepted answer here while creating drawables for use in an ActionBar, and the linked approach worked for me.
This might help you.
I The border on Three sides of the XML
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:left="0dp" android:right="0dp" android:top="0dp" android:bottom="-5dp">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
<corners android:radius="0dp" />
<stroke android:width="3dp" android:color="#000000" />
</shape>
</item>
</layer-list>
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>