I have to create a shape like this
I will be creating a rounded rectangle and placing the triangle at the centre bottom of the rectangle.
So far I have my rectangle
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#001E33" />
<corners android:radius="30dp" />
</shape>
I created a upside triangle
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<rotate
android:fromDegrees="45"
android:pivotX="-40%"
android:pivotY="87%"
android:toDegrees="45">
<shape android:shape="rectangle">
<stroke
android:width="10dp"
android:color="#android:color/transparent" />
<solid android:color="#000000" />
<corners android:radius="30dp"/>
</shape>
</rotate>
</item>
</layer-list>
How do I make the triangle point down and how do I club these 2 files to make a single drawable?
Draw it in Adobe illustrator(or other similar software) and use svg file format.
Try this
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="40dp"
android:right="40dp">
<rotate
android:fromDegrees="45">
<shape android:shape="rectangle">
<size android:width="100dp"
android:height="100dp"/>
<padding android:bottom="30dp"
/>
<stroke
android:width="30dp"
android:color="#android:color/transparent" />
<solid android:color="#001E33" />
<corners android:radius="30dp"/>
</shape>
</rotate>
</item>
<item>
<shape>
<solid android:color="#001E33" />
<corners android:radius="30dp" />
</shape>
</item>
</layer-list>
We can add multiple shape items inside layer list.
I am trying to design a layout using xml. it's a chat bubble layout. I just need a shape to be place after a shape. basically i am using 2 rectangles 1 rectangle rotated by 45 degree. i need tilted rectangle to placed after a normal rectangle.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<rotate
android:fromDegrees="-45"
android:pivotX="0%"
android:pivotY="0%"
android:toDegrees="0" >
<shape android:shape="rectangle" >
<solid android:color="#color/chat_incoming_color" />
</shape>
</rotate>
</item>
<item android:left="16dp">
<shape android:shape="rectangle" >
<solid android:color="#color/chat_incoming_color" />
<corners android:radius="4dp" />
</shape>
</item>
</layer-list>
http://imgur.com/j556772
image is shown in the link in that image first part is ok but second layout's background should be made accordingly..
Try this I hope it will help you to understand your problem.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<rotate android:fromDegrees="45"
android:pivotX="-35%"
android:pivotY="91%"
android:toDegrees="0">
<shape>
<solid android:color="#android:color/darker_gray"/>
</shape>
</rotate>
</item>
<item android:left="16dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/darker_gray"/>
<corners android:radius="4dp"/>
</shape>
</item>
</layer-list>
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>
I need to create an android shape so that only the bottom has stroke (a dashed line). When I try the following, the stroke bisects the shape right through the center. Does anyone know how to get it right? the stroke needs to be the bottom line/border. I am using the shape as a background to a TextView. Please, never mind why I need 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="#1bd4f6" />
</shape>
</item>
<item>
<shape android:shape="line" >
<padding android:bottom="1dp" />
<stroke
android:dashGap="10px"
android:dashWidth="10px"
android:width="1dp"
android:color="#ababb2" />
</shape>
</item>
</layer-list>
It's kind of a hack, but I think this is probably the best way to do it. The dashed line will always be on the bottom, regardless of the height.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle" >
<solid android:color="#1bd4f6" />
</shape>
</item>
<item android:top="-2dp" android:right="-2dp" android:left="-2dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke
android:dashGap="10px"
android:dashWidth="10px"
android:width="1dp"
android:color="#ababb2" />
</shape>
</item>
</layer-list>
Explanation:
The second shape is transparent rectangle with a dashed outline. The key in making the border only appear along the bottom lies in the negative margins set the other sides. These negative margins "push" the dashed line outside the drawn area on those sides, leaving only the line along the bottom. One potential side-effect (which I haven't tried) is that, for views that draw outside their own bounds, the negative-margin borders may become visible.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:top="-6dp"
android:left="-6dp"
android:right="-6dp"
android:bottom="0dp">
<shape android:shape="rectangle">
<solid android:color="#88FFFF00"/>
<stroke
android:width="5dp"
android:color="#FF000000"/>
</shape>
</item>
</layer-list>
This does the trick...
<item >
<shape android:shape="rectangle">
<solid android:color="#YOUR_BOTTOM_LINE_COLOR"/>
</shape>
</item>
<item android:bottom="1.5dp">
<shape android:shape="rectangle">
<solid android:color="#YOUR_BG_COLOR"/>
</shape>
</item>
I feel it is straightforward, without all this negative paddings or storks.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/main_bg_color"/>
<item android:gravity="bottom">
<shape android:shape="rectangle">
<size android:height="5dp"/>
<solid android:color="#color/bottom_bar_color"/>
</shape>
</item>
</layer-list>
This answer is for those google searchers who want to show dotted bottom border of EditText like here
Create dotted.xml inside drawable folder and paste these
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="1dp"
android:left="-2dp"
android:right="-2dp"
android:top="-2dp">
<shape android:shape="rectangle">
<stroke
android:width="0.5dp"
android:color="#android:color/black" />
<solid android:color="#ffffff" />
<stroke
android:width="1dp"
android:color="#030310"
android:dashGap="5dp"
android:dashWidth="5dp" />
<padding
android:bottom="5dp"
android:left="5dp"
android:right="5dp"
android:top="5dp" />
</shape>
</item>
</layer-list>
Then simply set the android:background attribute to dotted.xml we just created. Your EditText looks like this.
<EditText
android:id="#+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Some Text"
android:background="#drawable/dotted" />
Try next xml drawable code:
<layer-list>
<item android:top="-2dp" android:right="-2dp" android:left="-2dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke
android:width="1dp"
android:color="#fff" />
</shape>
</item>
</layer-list>
I think you do not need to use shape if I understood you.
If you are looking as shown in following image then use following layout.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#1bd4f6"
android:paddingBottom="4dp" >
<TextView
android:layout_width="200dp"
android:layout_height="wrap_content"
android:background="#ababb2"
android:padding="5dp"
android:text="Hello Android" />
</RelativeLayout>
</RelativeLayout>
EDIT
play with these properties you will get result
android:top="dimension"
android:right="dimension"
android:bottom="dimension"
android:left="dimension"
try 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="#1bd4f6" />
</shape>
</item>
<item android:top="20px"
android:left="0px">
<shape android:shape="line" >
<padding android:bottom="1dp" />
<stroke
android:dashGap="10px"
android:dashWidth="10px"
android:width="1dp"
android:color="#ababb2" />
</shape>
</item>
</layer-list>
A Simple solution :
Create a drawable file as edittext_stroke.xml in drawable folder.
Add the below code:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line"
>
<stroke
android:width="1dp"
android:color="#android:color/white" >
</stroke>
</shape>
In layout file , add the drawable to edittext as
android:drawableBottom="#drawable/edittext_stroke"
<EditText
android:textColor="#android:color/white"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableBottom="#drawable/edittext_stroke"
/>
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)
use this xml change the color with your choice.
<item>
<layer-list>
<item>
<shape>
<solid android:color="#color/gray_500" />
</shape>
</item>
<!-- CONTENT LAYER -->
<item android:bottom="2dp" >
<shape>
<solid android:color="#ffffff" />
</shape>
</item>
</layer-list>
</item>
In Case if you want programmatically
public static Drawable getStorkLineDrawable(#ColorInt int colorStrok, int iSize, int left, int top, int right, int bottom)
{
GradientDrawable gradientDrawable = new GradientDrawable();
gradientDrawable.setShape(GradientDrawable.RECTANGLE);
gradientDrawable.setStroke(iSize, colorStrok);
LayerDrawable layerDrawable = new LayerDrawable(new Drawable[]{gradientDrawable});
layerDrawable.setLayerInset(0, left, top, right, bottom);
return layerDrawable;
}
call this method like
Drawable yourLineDrawable= getStorkLineDrawable(yourColor, iSize, -iSize, -iSize, -iSize, 0);
easiest way to do this is put after that view where you want bottom border
<?xml version="1.0" encoding="utf-8"?>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/colorPrimary" />
This worked best for me:
<?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" android:bottom="0dp">
<shape android:shape="rectangle">
<stroke android:width="4dp" android:color="#ff0000"/>
</shape>
</item>
</layer-list>
Shows the line on the bottom only. You can easily change with stroke width to size you like and also update the top, left, right on the accordingly.
Simply add -
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--Minus (-) how much dp you gave in the stroke width from left right top-->
<item android:left="-10dp" android:right="-10dp" android:top="-10dp">
<shape
android:shape="rectangle">
<stroke
android:dashGap="10dp"
android:dashWidth="10dp"
android:width="10dp"
android:color="#android:color/holo_red_dark" />
<!--This is the main background -->
<solid android:color="#FFDDDDDD" />
</shape>
</item>
</layer-list>
Preview -
it is completely transparent Edittext with transparent background.
<item>
<shape android:shape="rectangle" >
<solid android:color="#color/transparent" />
</shape>
</item>
<item android:top="-3dp" android:right="-3dp" android:left="-3dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke
android:width="2dp"
android:color="#color/bottomline" />
</shape>
</item>
A Simple solution :
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="-1dp"
android:left="-1dp"
android:right="-1dp"
android:top="-1dp">
<shape android:shape="rectangle">
<solid android:color="#AARRGGBB" />
<stroke
android:width="5dp"
android:color="#android:color/red"
android:dashWidth="10dp"
android:dashGap="12dp" />
</shape>
</item>
</layer-list>
And finally we have something like that :)
This is rectangular background with bottom stroke
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<corners android:radius="4dp" />
<solid android:color="#f2f4f5" />
<stroke
android:width="3dp"
android:color="#002f34" />
<padding android:bottom="4dp" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<corners android:radius="4dp" />
<solid android:color="#f2f4f5" />
</shape>
</item>
</layer-list>
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>