Develop Reference

Shape with multiple circles

I want to draw a circle of color 1 inside a circle of color 2. Both of them have stroke and its inside is transparent. This should be used as a background of a button.
Something like this (but green and red are next to each other - no gap in between. Sorry, I don't have any graphical program where I could draw them so they're next to each other.)
Is there a way how to do it in XML ?
I was thinking of doing it using shape XML but layers are scaled so layers would be on top of each other so only 1 color would be visible.

You use a layer list with insets in order to avoid the inner circle to lurk out from the outer circle, like this:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<stroke
android:width="4dp"
android:color="#android:color/holo_red_dark" />
</shape>
</item>
<item>
<inset android:inset="4dp">
<shape android:shape="oval">
<stroke
android:width="4dp"
android:color="#android:color/holo_green_dark" />
</shape>
</inset>
</item>
</layer-list>
You set the size and background of the button like this:
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#drawable/red_green" />
It then looks like this:

Try 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="oval">
<size android:height="10dp" android:width="10dp"/>
<stroke
android:width="2dp"
android:color="#FF0000"
/>
</shape>
</item>
<item>
<shape android:shape="oval">
<stroke
android:width="1dp"
android:color="#00FF00"
/>
</shape>
</item>
</layer-list>
You can change the width and height of the size element to get a different ring width.

You can achieve this by defining two drawable resources both circle with different stroke colors and puting them in a layer-list drawable one on top of the other, with different ofsets which give then the effect you need:
Inner circle inner.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke android:color="#color/colorRed"
android:width="2dp"/>
</shape>
Outer circle outer.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke android:color="#color/colorGreen"
android:width="2dp"/>
</shape>
Button background background.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/outer"
android:right="0dp"
android:top="0dp"
android:bottom="0dp"
android:left="0dp"
android:gravity="center"/>
<item android:drawable="#drawable/inner"
android:right="4dp"
android:top="4dp"
android:bottom="4dp"
android:left="4dp"
android:gravity="center"/>
</layer-list>
And this is final result

How can I create a vertical line in a drawable xml? Android

Is there a way to make a drawable that draws a vertical line? So far I have a horizontal line that draws this:
current code is as follows:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/object_switcher_background" />
<item android:left="0dp"
android:right="250dp">
<shape android:shape="line">
<stroke android:color="#color/c19"
android:width="2dp"/>
<size android:width="40dp"/>
</shape>
</item>
<item android:left="50dp"
android:bottom="50dp"
android:top="75dp"
android:right="150dp">
<shape android:shape="line">
<stroke android:color="#color/c19"
android:width="2dp"
android:rotation="90"/>
<size android:width="40dp"/>
</shape>
</item>
</layer-list>
How can I manipulate this to make it look like this?

You could do this by nesting your second item inside a rotate item.

you can do that using rotate item: the below code defines a white background with a vertical divider using only xml drawable
<?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="#android:color/white" />
</shape>
</item>
<item>
<rotate android:fromDegrees="90">
<shape android:shape="line">
<stroke
android:width="1dp"
android:color="#android:color/darker_gray" />
</shape>
</rotate>
</item>

I'm not sure why you need a drawable for this.
This can also be done by using a simple view and adjusting its height, width and position according to your needs. For example:
<View
android:layout_width="1dp"
android:background="#color/grey_text_color"
android:layout_height="match_parent"/>

Add only top and bottom border on LinearLayout [duplicate]

This question already has answers here:
Is there an easy way to add a border to the top and bottom of an Android View?
(25 answers)
Closed 1 year ago.
I would like to add only a bottom and a top border on my Linearlayout.
I have tried to do this :
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:bottom="1dp"
android:top="1dp">
<shape android:shape="rectangle">
<solid android:color="#FFFFFF" />
<stroke
android:width="1dp"
android:color="#000" />
</shape>
</item>
</layer-list>
But it add a border around the shape..
Could you help me please ?

I think you can create this drawable and use it as background:
<?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="#000"/>
</shape>
</item>
<item android:bottom="1dp" android:top="1dp">
<shape android:shape="rectangle" >
<solid android:color="#FFFFFF" />
</shape>
</item>
</layer-list>
Think of is as drawing a rectangle with border color first and then lay on top of it a rectangle with your background color leaving out 1dp on top and at the bottom.

Make this two file and put this code. you can set border top and bottom border,
main.xml
<TextView
android:text="This is textline"
android:background="#drawable/border_set"
/>
border_set.xml
This file located into full path project_root/res/drawable/border_set.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape
android:shape="rectangle">
<stroke android:width="1dp" android:color="#FF000000" />
<solid android:color="#FFDDDDDD" />
</shape>
</item>
<item android:top="1dp" android:bottom="1dp">
<shape
android:shape="rectangle">
<stroke android:width="1dp" android:color="#000" />
<solid android:color="#FFFFFF" />
</shape>
</item>
</layer-list>

Here is the solution. It works even with transparent background.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:left="-2dp" android:right="-2dp">
<shape android:shape="rectangle">
<stroke android:width="2dp" android:color="#color/borderColor" />
<solid android:color="#color/backgroundColor" />
</shape>
</item>
</layer-list>

I believe this is the simplest way:
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#000000" />

This is my version; top border and bottom border are visible, not showing the left or right borders. And the background is transparent.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="1dp">
<item
android:left="-1dp"
android:right="-1dp"
android:top="-1dp"
android:bottom="1dp">
<shape
android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#color/BlueGrey_colorPrimary" />
<solid android:color="#android:color/transparent" />
</shape>
</item>
</layer-list>

A quick way to achieve this:
Add a Text View to the bottom and/or top of your layout.
Set the TextView's width to "match_parent"
Set the TextView's height to about "1dp" or find the thickness you would like
Set the TextView's background to the color you would like the border to be
I hope this helps!

You can follow this link Is there an easy way to add a border to the top and bottom of an Android View?
I expect that you are solve from this link.
also you can solve How to add border around linear layout except at the bottom?

Its simple. Draw 3 shapes like this.
<?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/menu_line_separator_in" />
</shape>
</item>
<item android:bottom="1.5dp">
<shape android:shape="rectangle" >
<solid android:color="#color/menu_line_separator_out" />
</shape>
</item>
<item android:top="1.5dp">
<shape android:shape="rectangle" >
<solid android:color="#color/menu_line_separator_out" />
</shape>
</item>
</layer-list>

Shape drawable as background, a line at the bottom

I am using a drawable as a background of a TextView just to have a divider line below the text. A achivied it with this drawable-xml:
<?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="#FFDDDDDD" />
<gradient
android:angle="0"
android:startColor="#FFAAAAAA"
android:endColor="#FFEEEEEE"
/>
</shape>
</item>
<item android:bottom="2dp">
<shape
android:shape="rectangle">
<solid android:color="#FF000000" />
</shape>
</item>
</layer-list>
But this method draws a colored rectangle above a black rectangle. I would like to have just the line at the bottom of the shape with no black rectangle because black is not transparent. How could I achieve that?

This is how I got a line at the bottom for mine. Draw a stroke but then shift the item up and to the sides to get the top and sides to not show the stroke:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="-8dp" android:left="-8dp" android:right="-8dp">
<shape>
<solid android:color="#2b7996"/>
<stroke android:color="#33b5e5" android:width="6dp"/>
</shape>
</item>
</layer-list>

I think it's better solution:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:gravity="bottom">
<shape>
<size android:height="1dp" />
<solid android:color="#000000" />
</shape>
</item>
</layer-list>

In general, I try to mess as little as possible with backgrounds unless absolutely necessary, since doing so overrides the default background colors that have states for focused, pressed, etc. I suggest just using an additional view (in a vertical LinearLayout) that is as thick as you need it to be. For example:
<View
android:background="#FF000000"
android:layout_height="2dp"
android:layout_width="fill_parent"/>

Usually for similar tasks - I created layer-list drawable like this one:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#color/underlineColor"/>
</shape>
</item>
<item android:bottom="3dp">
<shape android:shape="rectangle">
<solid android:color="#color/buttonColor"/>
</shape>
</item>
The idea is that first you draw the rectangle with underlineColor and then on top of this one you draw another rectangle with the actual buttonColor but applying bottomPadding. It always works.
But when I needed to have buttonColor to be transparent I couldn't use the above drawable. I found one more solution
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#android:color/transparent"/>
</shape>
</item>
<item android:drawable="#drawable/white_box" android:gravity="bottom" android:height="2dp"/>
</layer-list>
(as you can see here the mainButtonColor is transparent and white_box is just a simple rectangle drawable with white Solid)

With this solution where ever you require different line you can. My requirement was underline only. Even you can give different colors to the layout. You can see in below picture, white line
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="-5dp" android:left="-5dp" android:right="-5dp">
<shape>
<solid android:color="#android:color/transparent"/>
<stroke android:color="#color/white" android:width="5dp"/>
</shape>
</item>
<item android:top="-5dp" android:bottom="-5dp" android:right="-5dp">
<shape>
<solid android:color="#android:color/transparent"/>
<stroke android:color="#color/colorPrimaryDark" android:width="5dp"/>
</shape>
</item>
<item android:bottom="-5dp" android:left="-5dp" android:right="-5dp">
<shape>
<solid android:color="#android:color/transparent"/>
<stroke android:color="#color/colorPrimaryDark" android:width="5dp"/>
</shape>
</item>
<item android:top="-5dp" android:left="-5dp" android:bottom="-5dp">
<shape>
<solid android:color="#android:color/transparent"/>
<stroke android:color="#color/colorPrimaryDark" android:width="5dp"/>
</shape>
</item>
<item android:bottom="2dp" android:left="5dp" android:right="5dp" android:top="5dp">
<shape>
<solid android:color="#color/colorPrimary"/>
<corners android:bottomRightRadius="0dp"
android:bottomLeftRadius="0dp"
android:topLeftRadius="0dp"
android:topRightRadius="0dp" />
</shape>
</item>
</layer-list>

This is a slightly lighter variant of the above.
/drawable/rect_highlight.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<stroke android:width="1px" android:color="#color/colorHighlight"/>
</shape>
/drawable/underline.xml
<inset xmlns:android="http://schemas.android.com/apk/res/android" android:insetLeft="-1px" android:insetRight="-1px" android:insetTop="-1px" android:drawable="#drawable/rect_highlight"/>
Usage:
<TextView ... android:background="#drawable/underline"/>
It's not mine, somebody smarter than I came up with it. If I was smarter, I would have asked who. :)

This solution worked for most of the cases that I needed something like that.
<?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="#android:color/transparent" /> <!--background color of box-->
</shape>
</item>
<item
android:height="2dp"
android:gravity="bottom">
<shape>
<solid android:color="#000000" />
</shape>
</item>
</layer-list>

A simple solution is extending a TextView, then override the onDraw.
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Paint paint = new Paint();
paint.setColor(ContextCompat.getColor(getContext(),R.color.colorTextUnderLine));
paint.setStrokeWidth(10);
canvas.drawLine(0.0f,canvas.getHeight(),canvas.getWidth(),canvas.getHeight(),
paint);
}

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>