Develop Reference

android - borders seems to be cut

I set the Root Layout background as black colour with corner radius and padding. I set the child layout background as white colour only so the corners seems to be removed. I mean it white colour as overlay of the black. I found one solution for this i.e., we should maintain one more xml like root layout background. Is there any good solution instead of this?
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#color/black_color" />
<corners android:radius="10dp" />
<padding
android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="2dp" />
</shape>

You need to create another XML file for the white background and give corner top radius to left-right only. And apply this background to the child view.

try this or a modification of this.Just modify the lines and other things as you need it.I needed a black bar at the top.I just modified that to white for your use.But you will still ahve trim your image to be smaller than the overall border.
what if you put your image as
android:scaleX="0.95"
android:scaleY="0.95"
the drawable code:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:bottom="40dp">
<shape android:shape="rectangle" >
<solid android:color="#FFFFFF" />
<corners android:radius="20dp" />
<stroke
android:width="1dp"
android:color="#7F7F7F" />
</shape>
</item>
<item android:top="40dp">
<shape android:shape="rectangle" >
<solid android:color="#FFFFFF" />
<corners android:radius="20dp" />
<stroke
android:width="1dp"
android:color="#7F7F7F" />
</shape>
</item>
<item
android:bottom="40dp"
android:left="1dp"
android:right="1dp"
android:top="24dp">
<shape android:shape="rectangle" >
<solid android:color="#FFFFFF" />
</shape>
</item>
</layer-list>

how to make stroke for 3 sides for a shape in android?

I am using a stroke to make a colored border to a shape in xml layout in android .
Can I make the stroke for only 3 edges ( left,top,bottom) the right NO ?

You can achieve this by using a layerlist and messing with the padding. You'll need 3 elements:
1: A border.xml shape, which is just a solid shape in the color of your border: border.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ff0000"/>
</shape>
2: The 'inner' shape, the shape where you want the border to appear around: inner.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#00ff00"/>
</shape>
3: A layer list, which will put these 2 on top of eachother. You create the border by setting the padding on the inner shape: layerlist.xml
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/border"/>
<item android:drawable="#drawable/inner"
android:top="3dp" android:right="0dp" android:bottom="3dp"
android:left="3dp" />
</layer-list>

Using #Mopper answer, you can like that too.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid android:color="#ff0000" />
</shape>
</item>
<item
android:bottom="3dp"
android:left="3dp"
android:right="0dp"
android:top="3dp">
<shape>
<solid android:color="#00ff00" />
</shape>
</item>
</layer-list>

Here's my solution, which works if you want transparent or semi-transparent background colors.
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetLeft="-1dp"
>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
android:color="#c45b5b5b"
android:width="1dp"/>
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="5dp"
android:topLeftRadius="0dp"
android:topRightRadius="5dp"
/>
</shape>
</inset>
</item>
<item
android:top="1dp"
android:right="1dp"
android:bottom="1dp"
android:left="0dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/infoBox_Background"/>
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="5dp"
android:topLeftRadius="0dp"
android:topRightRadius="5dp"
/>
</shape>
</item>
</layer-list>

Another approach would be to use a 9-Patch png file for your background. You do this by taking a normal png file and then using a tool like this to define:
The area where your content goes in the png.
The area of your png that stretches as the underlying control grows in either width or height.
Once you generate the 9-patch png file, add it to your drawables (define files for various resolutions). Then just set the drawable as your control background.
android:background="#drawable/my9_patch_file_name"

Square shaped layout border with round inside edges

I’m attempting to create a layout border with corners that are square on the outside and round on the inside. I’ve gathered that I need to create an .xml drawable definition composed of two shapes: one with a stroke width and corner radius and another with a stroke width only:
The drawables
round_border.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="4dp" android:color="#FF000000" />
<padding android:left="7dp" android:top="7dp"
android:right="7dp" android:bottom="7dp" />
<corners android:radius="4dp" />
<solid android:color="#FFC0C0C0" />
</shape>
square_border.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="2dp" android:color="#FF000000" />
<solid android:color="#FFC0C0C0" />
</shape>
Each of these works independantly as a border when appliedby itself like so:
android:background="#drawable/round_border"
but when they either or both are added to an item-list drawable like so:
composite_border.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<layer-list>
<item android:drawable="#drawable/round_border"/>
<!-- <item android:drawable="#drawable/square_border"/> -->
</layer-list>
</shape>
and:
android:background="#drawable/composite_border"
The layout's background is completely black instead of just a black border.
Does anyone know how to make the layer list work for this task?

From Shape Drawable Doc you can see that shape can't have layer-list inside so you should define your composite_border.xml like this
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/square_border"/>
<item android:drawable="#drawable/round_border"/>
</layer-list>
note that I changed the order of your items inside the layer-list as stated in the documentation of layer-list
Each drawable in the list is drawn in the order of the list—the last drawable in the list is drawn on top and you want it to be squared from outside

Try this will work fine enough:
solid is background color
stroke is border
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#color/white"/>
<stroke android:width="1dp" android:color="#ffaaaaaa" />
<size
android:width="15dp"
android:height="15dp"/>
</shape>

Create a xml file like round_background.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
android:color="#CCCC33"/>
<size
android:width="35dp"
android:height="35dp"/>
</shape>
In the layout set as background
<LinearLayout
android:id="#+id/layout_wellbeing"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:background="#drawable/rounded_corner_leuvan"
android:orientation="horizontal" >
</LinearLayout>

square_border.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="2dp"
android:color="#FF000000"
/>
<solid android:color="#FFC0C0C0" />
</shape>
composite_border.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<layer-list>
<item android:drawable="#drawable/round_border"/>
<!-- <item android:drawable="#drawable/square_border"/> -->
</layer-list>
</shape>
watch out the comments and the quotation marks! =]

Android shape within a shape

I want to have a shape element with a two color border outline. I can do a single color outline using the solid element, but this only allows me to draw a single line. I tried using two stroke elements within my shape, but that didn't work either.
Is there a way to either draw a shape within a shape or draw two lines around my shape (which has rounded corners, BTW).

I found that the <layer-list> is the best approach. Like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="6dp"
android:right="6dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="3dp"
android:color="#000000" />
</shape>
</item>
<item
android:bottom="1dp"
android:left="8dp"
android:right="8dp"
android:top="1dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:bottomLeftRadius="2dp"
android:bottomRightRadius="2dp"
android:topLeftRadius="2dp"
android:topRightRadius="2dp" />
<solid android:color="#android:color/white" />
<stroke
android:width="1dp"
android:color="#BDBDBD" />
</shape>
</item>
</layer-list>
You then need to put the proper margins on your listView row layout, but it works quite nicely.

so i have a work around but its ugly. the work around is to wrap my element inside another container element. i.e.
<RelativeLayout ... android:background="#drawable/outer">
<ListView ... android:background="#drawable/inner" />
</RelativeLayout>

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>