Develop Reference

Bottom Rounded Corners - Android

I have been trying to fix this but for whatever I do, I just cannot get the Bottom Rounded Corners the way I want, I am using the following
<?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="0dp" />
<solid android:color="?attr/colorPrimaryDark" />
</shape>
</item>
<item android:top="0dp" android:bottom="1dp">
<shape
android:shape="rectangle">
<stroke android:width="0dp"/>
<solid android:color="?attr/colorPrimary"/>
<corners android:radius="15dp" android:bottomRightRadius="15dp" android:bottomLeftRadius="15dp" android:topLeftRadius="0dp" android:topRightRadius="0dp"/>
</shape>
</item>
</layer-list>
The Results are the following
It creates the corners but it adds grey color (colorPrimaryDark) to it where I want it to be white (colorPrimary") with a grey line - Any idea how I accomplish this?

A little hack is possible to get rid of line on top and sides: set negative offsets.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="-1dp"
android:right="-1dp"
android:top="-1dp">
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="?attr/colorPrimaryDark" />
<solid android:color="?attr/colorPrimary" />
<corners
android:bottomLeftRadius="15dp"
android:bottomRightRadius="15dp"
android:radius="15dp"
android:topLeftRadius="0dp"
android:topRightRadius="0dp" />
</shape>
</item>
</layer-list>
Not sure will it work correctly on all devices / Android versions or not.

If you only want bottom border a Shape drawable will be enough . You do not need a layer-list for it .
try this
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="1dp" android:color="#color/green"/>
<solid android:color="?attr/colorPrimary" />
<corners
android:bottomLeftRadius="15dp"
android:bottomRightRadius="15dp" />
</shape>
The problem with your current code is first item have a solid color set . this is why the gray part showing .

How to add a drop shadow to a Rectangular Shape in Android

I am developing an Android App in which I need to use a Rectangular shape which should have a drop_shadow. I have designed a rectangular shape but somehow i am not able to add a drop shadow to it on (right and left sides).
P.S.: this rectangular shape is added as a background attribute.
If this type of Question is already been answered then please provide the links here.
THANK YOU IN ADVANCE!!!!
Code:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ffffff" />
<stroke
android:width="1dp"
android:color="#000000" />
<corners
android:radius="10dp" >
</corners>
</shape>

Try 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="#CABBBBBB"/>
<corners android:radius="2dp" />
</shape>
</item>
<item
android:left="0dp"
android:right="1dp"
android:top="0dp"
android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/white"/>
<corners android:radius="1dp" />
</shape>
</item>
</layer-list>

How to create only two edges rounded textView in android.?

I need to create a textview with only
TopLeft and TopRight coners with round shape and no others,
I've written an XML for 4 corner round, but it not supporting for two corner round.
Here is the XML
<?xml version="1.0" encoding="utf-8"?>
<!-- res/drawable/rounded_edittext.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
<solid android:color="#FFFFFF"/>
<corners
android:bottomRightRadius="5dp"
android:bottomLeftRadius="5dp"
android:topLeftRadius="5dp"
android:topRightRadius="5dp"/>
</shape>
any suggestions or help..?

From your code provided, your are just one step from achieving what you want.
<?xml version="1.0" encoding="utf-8"?>
<!-- res/drawable/rounded_edittext.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
<solid android:color="#FFFFFF"/>
<corners
android:bottomRightRadius="5dp"
android:bottomLeftRadius="5dp"
android:topLeftRadius="5dp"
android:topRightRadius="5dp"/>
</shape>
You can either comment out android:bottomRightRadius="5dp" and android:bottomLeftRadius="5dp", and add android:radius="0dp", or set them to 0dp. So a result might be:
<?xml version="1.0" encoding="utf-8"?>
<!-- res/drawable/rounded_edittext.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
<solid android:color="#FFFFFF"/>
<corners
android:radius="0dp"
android:topLeftRadius="5dp"
android:topRightRadius="5dp"/>
</shape>

Try to use the following xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="2dp" android:color="#color/grey" />
<padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
<corners android:topLeftRadius="5dp" android:topRightRadius="5dp"/>
</shape>
</item>
</selector>

How to set image border for Layout (RelativeLayout) in Android?

I want to use border image is below :
set border for Layout ...?
Should i do it ?

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF" />
<stroke android:width="1dp" android:color="#000000" />
<padding android:left="1dp" android:top="1dp" android:right="1dp" android:bottom="1dp" /></shape>
Save this file in as customborder.xml in drawbale folder. In you layout file add this line android:background="#drawable/customborder"

You can make a 9-patch image as apply it as the background. Make the middle transparent and fill the border the way you want.
Here is the official documentation: http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch

What you can do is create an custom drawable shape that will apply as the background of ImageView which will create a border.
Something like below xml, you can customize it yourself. Put it in drawable/image_border.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#FFFFFF" />
<stroke
android:width="1dp"
android:color="#000000" />
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
</shape>
Apply it as ImageView's background. It should create a border for your ImageView.

first create simple border.xml and save in to drawable
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle" >
<corners android:radius="15dip" />
<solid android:color="#00000000" />
<stroke android:width="2dp" android:color="#000000"/>
</shape>
</item>
</layer-list>
then after set background of Linear/Relative layout
android:background="#drawable/imageee_color"

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>