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

Android shape border with gradient and middle transparent

I need to create a round corner border, where border with gradient.enter link description here is working.But My page is using a image as background which is also with gradient. I need to show background image from middle of the filed. I want to create just like below image:

round_background.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="4dp"
android:color="#color/transparent" />
<gradient
android:startColor="#374533"
android:centerColor="#432727"
android:endColor="#222430"
android:angle="135"/>
<corners android:radius="10dp" />
</shape>
round_border.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#efe301"
android:centerColor="#7dc17b"
android:endColor="#01dae6"
android:angle="180"/>
<corners android:radius="10dp" />
result_drawable.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/round_border"/>
<item android:drawable="#drawable/round_background" />
</layer-list>
Here, you can set android:width="4dp" in round_background.xml to set size of your border. use result result_drawable.xml where you want..
Enjoy. :}

Gravity for xml drawable

I want to create a custom View based on ImageView to make a widget as below where the drawable source is the camera and the background is the rectangle with the tick sign:
The problems are:
I can not create the border with the tick sign on the right: the tick is stretched fullscreen instead of staying at the bottom right.
The tick sign is sometime behind the image if I set it with android:background.
Here are my xml files:
The current border 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/transparent"/>
<stroke
android:width="2dip"
android:color="#color/bg_black"/>
<padding
android:left="3dp"
android:right="3dp"
android:top="3dp"
android:bottom="3dp"
/>
</shape>
</item>
<item >
<layer-list >
<item>
<shape
android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#color/border_yellow"/>
<size
android:width="37dp"
android:height="37dp"/>
<padding
android:bottom="3dp"
android:left="3dp"
android:right="3dp"
android:top="3dp"/>
</shape>
</item>
<item android:drawable="#drawable/ic_tick"/>
</layer-list>
</item>
</layer-list>
The Image Button xml layout
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/product1"
android:background="#drawable/toggle_rectangle_check"/>
Thanks for your time.

I'm not sure if this is the sort of solution you'd be looking for but instead of having an xml file with the styling in it, I believe it would be better to have a layout file which defines your layout for your custom Widget, Something like this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/customWidgetBox"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/customCheckmark"
android:gravity="bottom|right" />
</LinearLayout>
And to the drawable folder you would need to add both the customCheckmark.xml and customWidgetBox.xml
customCheckmark.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<item android:drawable="#drawable/check_mark">
<stroke android:width="3dp" android:color="#color/blue_button_border" />
</item>
</shape>
customWidgetBox.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<item android:drawable="#drawable/camera">
<stroke android:width="3dp" android:color="#color/blue_button_border" />
</item>
</shape>
Not sure if this code accomplish exactly what you want, but it'll be a good help to get you started because this is definitely the way to do it! :)
Some links that might be interesting for examples:
Set border and background color of textView
Drawable Resource, Android API
how to put a border around an android textview
Tips & Tricks -XML Drawables Part 1

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>

How to draw border on just one side of a linear layout?

I'm able to draw border to a linear layout, but it is getting drawn on all sides. I want to restrict it to right side only, like you do in CSS (border-right:1px solid red;).
I've tried this, but it still draws on all sides:
<?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:height="2dp"
android:width="2dp"
android:color="#FF0000" />
<solid android:color="#000000" />
<padding
android:bottom="0dp"
android:left="0dp"
android:right="1dp"
android:top="0dp" />
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="5dp"
android:radius="1dp"
android:topLeftRadius="5dp"
android:topRightRadius="0dp" />
</shape>
</item>
Any suggestions on how to accomplish this?
BTW, I do not want to use the hack of putting a view of width 1dp on the required side.

You can use this to get border on one side
<?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="#FF0000" />
</shape>
</item>
<item android:left="5dp">
<shape android:shape="rectangle">
<solid android:color="#000000" />
</shape>
</item>
</layer-list>
EDITED
As many including me wanted to have a one side border with transparent background, I have implemented a BorderDrawable which could give me borders with different size and color in the same way as we use css. But this could not be used via xml. For supporting XML, I have added a BorderFrameLayout in which your layout can be wrapped.
See my github for the complete source.

Easy as pie, allowing a transparent bg:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="0"
android:startColor="#f00"
android:centerColor="#android:color/transparent"
android:centerX="0.01" />
</shape>
Change the angle to change border location:
0 = left
90 = bottom
180 = right
270 = top

it is also possible to implement what you want using a single layer
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:bottom="-5dp"
android:right="-5dp"
android:top="-5dp">
<shape android:shape="rectangle" >
<solid android:color="#color/color_of_the_background" />
<stroke
android:width="5dp"
android:color="#color/color_of_the_border" />
</shape>
</item>
</layer-list>
this way only left border is visible but you can achieve any combination you want by playing with bottom, left, right and top attributes of the item element

To get a border on just one side of a drawable, apply a negative inset to the other 3 sides (causing those borders to be drawn off-screen).
<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetTop="-2dp"
android:insetBottom="-2dp"
android:insetLeft="-2dp">
<shape android:shape="rectangle">
<stroke android:width="2dp" android:color="#FF0000" />
<solid android:color="#000000" />
</shape>
</inset>
This approach is similar to naykah's answer, but without the use of a layer-list.

An other great example
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetRight="-2dp">
<shape android:shape="rectangle">
<corners
android:bottomLeftRadius="4dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="4dp"
android:topRightRadius="0dp" />
<stroke
android:width="1dp"
android:color="#70b23f" />
<solid android:color="#android:color/transparent" />
</shape>
</inset>

As an alternative (if you don't want to use background), you can easily do it by making a view as follows:
<View
android:layout_width="2dp"
android:layout_height="match_parent"
android:background="#000000" />
For having a right border only, place this after the layout (where you want to have the border):
<View
android:layout_width="2dp"
android:layout_height="match_parent"
android:background="#000000" />
For having a left border only, place this before the layout (where you want to have the border):
Worked for me...Hope its of some help....

I was able to achieve the effect with the following code
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:left="0dp" android:right="-5dp" android:top="-5dp" android:bottom="-5dp">
<shape
android:shape="rectangle">
<stroke android:width="1dp" android:color="#123456" />
</shape>
</item>
</layer-list>
You can adjust to your needs for border position by changing the direction of displacement

<?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="#f28b24" />
<stroke
android:width="1dp"
android:color="#f28b24" />
<corners
android:radius="0dp"/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="#f28b24"
android:endColor="#f28b24"
android:angle="270" />
<stroke
android:width="0dp"
android:color="#f28b24" />
<corners
android:bottomLeftRadius="8dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="0dp"
android:topRightRadius="0dp"/>
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>

There is no mention about nine-patch files here. Yes, you have to create the file, however it's quite easy job and it's really "cross-version and transparency supporting" solution. If the file is placed to the drawable-nodpi directory, it works px based, and in the drawable-mdpi works approximately as dp base (thanks to resample).
Example file for the original question (border-right:1px solid red;) is here:
http://ge.tt/517ZIFC2/v/3?c
Just place it to the drawable-nodpi directory.

Borders of different colors. I used 3 items.
<?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/colorAccent" />
</shape>
</item>
<item android:top="3dp">
<shape android:shape="rectangle">
<solid android:color="#color/light_grey" />
</shape>
</item>
<item
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="3dp">
<shape android:shape="rectangle">
<solid android:color="#color/colorPrimary" />
</shape>
</item>
</layer-list>

You can wrap into container and define margins for start left bottom top.
Suppose you want to provide margin for left side you can do this
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/light_blue"
>
<TextView
android:marginStart="2dp" // This is Your border
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/white"
android:padding="16dp"
android:text="a"
android:textColor="#color/light_blue"
android:textSize="25dp" />
</RelativeLayout>