I want to create a custom thumb for seekbar that should look like this:
One solution could be this one, where png pictures are used to draw the thumb.
I believe that it should be possible to use xml only, since it is very similar to this thumb:
thumb.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<size android:height="30dp" android:width="30dp"/>
<stroke android:width="18dp" android:color="#882EA5DE"/>
<solid android:color="#2EA5DE" />
<corners android:radius="1dp" />
</shape>
Just need to add second border (white stroke around), so that I can skip to manage all that pictures for different screen resolutions (hdpi/mdpi/xhdpi/xxhdpi).
I have tried different combination with shapes "oval" and "ring", but could not get the result required. How can you make it?
I could not manage to find a solution with just xml, that is why I used a picture to solve this, with a little help from this answer:
Created an image of the thumb seekbar_thumb_icon.png and saved it in different resolutions in res/drawable-* maps (hdpi/mdpi/xhdpi/xxhdpi).
Specified "android:thumb="#layout/seekbar_thumb" for SeekBar:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<item>
<shape>
<size
android:height="30dp"
android:width="30dp" />
<solid android:color="#android:color/transparent" />
</shape>
</item>
<item android:drawable="#drawable/balance_icon_48px"/>
</layer-list>
Other styles:
<SeekBar
android:id="#+id/seekbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:progressDrawable="#layout/seekbar_style"
android:thumb="#layout/seekbar_thumb" />
seekbar_style.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="match_parent"
android:layout_width="match_parent">
<item android:id="#android:id/background"
android:drawable="#layout/seekbar_background" />
<item android:id="#android:id/progress">
<clip android:drawable="#layout/seekbar_progress" />
</item>
</layer-list>
seekbar_background.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:shape="line">
<stroke android:width="2dp" android:color="#868686"/>
<corners android:radius="1dp" />
</shape>
seekbar_progress.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:shape="line">
<stroke android:width="2dp" android:color="#ffffff"/>
<corners android:radius="1dp" />
</shape>
Related
How to add a shadow border on 4 sides of an edit text as shown in the image? Applied below code but it creates a shadow on single side only.
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#FFBDBDBD"
android:centerColor="#65FFFFFF"
android:endColor="#00FFFFFF"
/>
<stroke
android:width="1dp"
android:color="#C3C3C3" />
<corners
android:radius="5dp" />
</shape>
You can use elevation like :-
android:elevation="5dp"
elevation worked as Z-index.
You can try adding width and color inside the shape tag.
It will look like this:
<stroke android:width="3dp" android:color="#bfafb2"/>
First create this background drawable with a rectangle, round corner and a stroke in grey. Called background_drawable.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ffffff"/>
<corners android:radius="5dp" />
<stroke android:width="1dp"
android:color="#C3C3C3"/>
</shape>
After that you set this as android:background="" in your LinearLayout and EditText, both widgets have android:elevation="2dp" for it's shadow on each sites matching the stroke of the rectangle. Here is your layout called activity_main.xml:
<LinearLayout
android:layout_width="200dp"
android:layout_height="100dp"
android:elevation="2dp"
android:id="#+id/linear_layout"
android:background="#drawable/background_drawable"
android:layout_centerInParent="true"
android:orientation="horizontal" />
<EditText
android:layout_width="200dp"
android:layout_height="wrap_content"
android:id="#+id/edit_text"
android:elevation="2dp"
android:layout_marginTop="10dp"
android:background="#drawable/background_drawable"
android:layout_below="#+id/linear_layout"
android:layout_centerHorizontal="true"
android:padding="10dp"/>
The final result will look like this image.
<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="2dp"
android:right="2dp"
android:top="2dp"
android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/white"/>
<corners android:radius="2dp" />
</shape>
</item>
How to create round circle for the rectangle edges like StickerView Have.
I don't want to use StickerView, because it does not support EditText like function.
My xml code for Rectangle. I would like to add Corners with round big dots.
<?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">
<corners
android:bottomRightRadius="15dp"
android:bottomLeftRadius="15dp"
android:topLeftRadius="15dp"
android:topRightRadius="15dp"/>
</shape>
Below is the mainactivity.xml code where I implement the borders for RotatableAutofitEditText.
<com.agilie.RotatableAutofitEditText xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:autofit="http://schemas.android.com/apk/res-auto"
android:id="#+id/editText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="128dp"
android:layout_marginTop="272dp"
android:background="#drawable/borders"
android:gravity="center"
android:hint="#string/hint_add_some_text"
android:text="Type Here"
android:textColor="#android:color/white"
android:textColorHint="#android:color/darker_gray"
autofit:clipBounds="false"
autofit:layout_constraintStart_toStartOf="parent"
autofit:layout_constraintTop_toTopOf="parent"
autofit:maxTextSize="#dimen/autoresize_max_text_size"
autofit:minTextSize="#dimen/autoresize_min_text_size"
autofit:minWidth="#dimen/autoresize_min_width"
autofit:movable="true"
autofit:resizable="true"
autofit:rotatable="true" />
You can customize this template with your colors.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="8dp"
android:end="8dp"
android:start="8dp"
android:top="8dp">
<shape android:shape="rectangle">
<solid android:color="#color/colorPrimary" />
</shape>
</item>
<item android:gravity="start|top">
<shape android:shape="oval">
<size
android:width="16dp"
android:height="16dp" />
<solid android:color="#android:color/black" />
</shape>
</item>
<item android:gravity="end|top">
<shape android:shape="oval">
<size
android:width="16dp"
android:height="16dp" />
<solid android:color="#android:color/black" />
</shape>
</item>
<item android:gravity="start|bottom">
<shape android:shape="oval">
<size
android:width="16dp"
android:height="16dp" />
<solid android:color="#android:color/black" />
</shape>
</item>
<item android:gravity="end|bottom">
<shape android:shape="oval">
<size
android:width="16dp"
android:height="16dp" />
<solid android:color="#android:color/black" />
</shape>
</item>
</layer-list>
A list of Github link for StickerView
https://github.com/nimengbo/StickerView
https://github.com/kencheung4/android-StickerView
https://github.com/uptechteam/MotionViews-Android
https://github.com/wuapnjie/StickerView
https://github.com/sangmingming/StickerView
https://github.com/niravkalola/Android-StickerView
https://github.com/Kaka252/StickerView
https://github.com/yovenny/StickerView
https://github.com/lukehutch/android-multitouch-controller
This handles 3 in 1 facility. On Multi-Touch, you can pan your image, you can scale your image and at the same time you can also rotate your image. And you can add number of stickers as you want.
EDIT: suggested solutions here offer me to draw the shadows myself. I
don't want that as the view will be animated (translationZ will change
over time) and I would like to avoid rendering the shadows myself
during the animation. I would like some solution to help
android-system recognize my shape as a background for the elevation.
If no such solution will be found, the hard way will be subclassing a
ViewOutlineProvider with convexPath, but I would really like to avoid
this.
As the name of the question suggests, I have a problem getting android's elevation to work with a rectangle of different rounded-corners. (pictures added at the end of the question)
It does work when there is only 1 default radius, i.e with this example:
rounded_rect.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#android:color/holo_orange_dark"/>
<corners android:radius="5dp"/>
</shape>
activity.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/rounded_rect"
android:elevation="5dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
But when I'm changing rounded_rect.xml to the following code, no shadows are being casted:
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#android:color/holo_orange_dark"/>
<corners
android:bottomRightRadius="5dp"
android:bottomLeftRadius="20dp"
android:topLeftRadius="10dp"
android:topRightRadius="30dp"
/>
</shape>
I have tried adding also android:radius="5dp" into the <corners> tag in rounded_rect.xml , but it didn't add shadows.
Any help would be much appreciated!
picture working with default radius for all corners:
picture not working with different radius for each corner - no shadows:
Refer this
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Bottom 2dp Shadow -->
<item>
<shape android:shape="rectangle">
<solid android:color="#d8d8d8" />
<corners android:radius="7dp" />
</shape>
</item>
<!-- White Top color -->
<item android:bottom="3px">
<shape android:shape="rectangle">
<solid android:color="#FFFFFF" />
<corners android:radius="7dp" />
</shape>
</item>
</layer-list>
I got it to work using my custom subclass of ViewOutlineProvider . in my subclass I calculated a Path that its isConvex() returns true, and used that path as the shadow.
use this online making tool this will help you to make shapes
in that at border radius
Apply this code. Set the button as per your requirement
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item android:right="5dp" android:top="5dp">
<shape>
<corners android:topRightRadius="40dp"
android:bottomLeftRadius="10dp"
android:bottomRightRadius="10dp"
android:topLeftRadius="10dp"/>
<solid android:color="#D6D6D6" />
</shape>
</item>
<item android:bottom="2dp" android:left="2dp">
<shape>
<gradient android:angle="270"
android:endColor="#android:color/holo_orange_dark" android:startColor="#android:color/holo_orange_dark" />
<stroke android:width="1dp" android:color="#BABABA" />
<corners android:topRightRadius="40dp"
android:bottomLeftRadius="10dp"
android:bottomRightRadius="10dp"
android:topLeftRadius="10dp"/>
<padding android:bottom="10dp" android:left="10dp"
android:right="10dp" android:top="10dp" />
</shape>
</item>
</layer-list>
</item>
</selector>
I would like to create the same border of this LinearLayout as the example :
In this example, we can see that the border is not the same all around the linearLayout.
How can I create this using an XML drawable file?
For now, I have only able to create a simple border all around the LinearLayout like this :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<corners
android:radius="1dp"
android:topRightRadius="0dp"
android:bottomRightRadius="0dp"
android:bottomLeftRadius="0dp" />
<stroke
android:width="1dp"
android:color="#E3E3E1" />
<solid android:color="#color/blanc" />
</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="0dp"
android:top="0dp"
android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/white"/>
<corners android:radius="2dp" />
</shape>
</item>
</layer-list>
That's why CardView exists. CardView | Android Developers
It's just a FrameLayout that supports elevation in pre-lollipop devices.
<android.support.v7.widget.CardView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardUseCompatPadding="true"
app:cardElevation="4dp"
app:cardCornerRadius="3dp" >
<!-- put whatever you want -->
</android.support.v7.widget.CardView>
To use this you need to add dependency to build.gradle:
compile 'com.android.support:cardview-v7:23.+'
I get the best looking results by using a 9 patch graphic.
You can simply create an individual 9 patch graphic by using the following editor:
http://inloop.github.io/shadow4android/
Example:
The 9 patch graphic:
The result:
The source:
<LinearLayout
android:layout_width="200dp"
android:layout_height="200dp"
android:orientation="vertical"
android:background="#drawable/my_nine_patch"
okay, i know this is way too late. but i had the same requirement. i solved like this
1.First create a xml file (example: border_shadow.xml) in "drawable"
folder and copy the below code into it.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<item>
<shape>
<!-- set the shadow color here -->
<stroke
android:width="2dp"
android:color="#7000" />
<!-- setting the thickness of shadow (positive value will give shadow on that side) -->
<padding
android:bottom="2dp"
android:left="2dp"
android:right="-1dp"
android:top="-1dp" />
<corners android:radius="3dp" />
</shape>
</item>
<!-- Background -->
<item>
<shape>
<solid android:color="#fff" />
<corners android:radius="3dp" />
</shape>
</item>
</layer-list>
2.now on the layout where you want the shadow(example: LinearLayout) add this in android:background
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="8dip"
android:background="#drawable/border_shadow"
android:orientation="vertical">
and that worked for me.
This is so simple:
Create a drawable file with a gradient like this:
for shadow below a view below_shadow.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#20000000"
android:endColor="#android:color/transparent"
android:angle="270" >
</gradient>
</shape>
for shadow above a view above_shadow.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#20000000"
android:endColor="#android:color/transparent"
android:angle="90" >
</gradient>
</shape>
and so on for right and left shadow just change the angle of the gradient :)
As an alternative, you might use a 9 patch image as the background for your layout, allowing for more "natural" shadows:
Result:
Put the image in your /res/drawable folder.
Make sure the file extension is .9.png, not .png
By the way, this is a modified (reduced to the minimum square size) of an existing resource found in the API 19 sdk resources folder.
I left the red markers, since they don't seem to be harmful, as shown in the draw9patch tool.
[EDIT]
About 9 patches, in case you never had anything to do with them.
Simply add it as the background of your View.
The black-marked areas (left and top) will stretch (vertically, horizontally).
The black-marked areas (right, bottom) define the "content area" (where it's possible to add text or Views - you can call the unmarked regions "padding", if you like to).
Tutorial: http://radleymarx.com/blog/simple-guide-to-9-patch/
You create a file .xml in drawable with name drop_shadow.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!--<item android:state_pressed="true">
<layer-list>
<item android:left="4dp" android:top="4dp">
<shape>
<solid android:color="#35000000" />
<corners android:radius="2dp"/>
</shape>
</item>
...
</layer-list>
</item>-->
<item>
<layer-list>
<!-- SHADOW LAYER -->
<!--<item android:top="4dp" android:left="4dp">
<shape>
<solid android:color="#35000000" />
<corners android:radius="2dp" />
</shape>
</item>-->
<!-- SHADOW LAYER -->
<item>
<shape>
<solid android:color="#35000000" />
<corners android:radius="2dp" />
</shape>
</item>
<!-- CONTENT LAYER -->
<item android:bottom="3dp" android:left="1dp" android:right="3dp" android:top="1dp">
<shape>
<solid android:color="#ffffff" />
<corners android:radius="1dp" />
</shape>
</item>
</layer-list>
</item>
</selector>
Then:
<LinearLayout
...
android:background="#drawable/drop_shadow"/>
1.First create a xml file name shadow.xml in "drawable" folder and copy the below code into it.
<?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="10dp" />
</shape>
</item>
<item
android:bottom="6dp"
android:left="0dp"
android:right="6dp"
android:top="0dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/white" />
<corners android:radius="4dp" />
</shape>
</item>
</layer-list>
Then add the the layer-list as background in your LinearLayout.
<LinearLayout
android:id="#+id/header_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/shadow"
android:orientation="vertical">
Use this single line and hopefully you will achieve the best result;
use:
android:elevation="3dp" Adjust the size as much as you need and this is the best and simplest way to achieve the shadow like buttons and other default android shadows.
Let me know if it worked!
If you already have the border from shape just add elevation:
<LinearLayout
android:id="#+id/layout"
...
android:elevation="2dp"
android:background="#drawable/rectangle" />
Ya Mahdi aj---for RelativeLayout
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<gradient
android:startColor="#7d000000"
android:endColor="#android:color/transparent"
android:angle="90" >
</gradient>
<corners android:radius="2dp" />
</shape>
</item>
<item
android:left="0dp"
android:right="3dp"
android:top="0dp"
android:bottom="3dp">
<shape android:shape="rectangle">
<padding
android:bottom="40dp"
android:top="40dp"
android:right="10dp"
android:left="10dp"
>
</padding>
<solid android:color="#color/Whitetransparent"/>
<corners android:radius="2dp" />
</shape>
</item>
</layer-list>
I know this is late but it could help somebody.
You can use a constraintLayout and add the following property in the xml,
android:elevation="4dp"
I found the best way to tackle this.
You need to set a solid rectangle background on the layout.
Use this code - ViewCompat.setElevation(view , value)
On the parent layout set android:clipToPadding="false"
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>