I am trying to draw a custom shape which I can use as a background for my layout. But I am not able to do so. Is it possible to draw a shape as below using xml in android. I am not getting how to cut the semicircle shape from the vertical centres of rectangle.
Use layer-list to make this custom shape drawable.
/res/drawable/custom_shape.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Transparent Rectangle -->
<item>
<shape android:shape="rectangle">
<corners
android:topLeftRadius="8dp"
android:topRightRadius="8dp"
android:bottomLeftRadius="4dp"
android:bottomRightRadius="4dp" />
<size
android:width="300dp"
android:height="100dp" />
<solid android:color="#FFFFFF" />
</shape>
</item>
<!-- Left Half-Circle -->
<item
android:left="-10dp"
android:right="290dp"
android:top="40dp"
android:bottom="40dp">
<shape android:shape="oval">
<solid android:color="#000000" />
</shape>
</item>
<!-- Right Half-Circle -->
<item
android:left="290dp"
android:right="-10dp"
android:top="40dp"
android:bottom="40dp">
<shape android:shape="oval">
<solid android:color="#000000" />
</shape>
</item>
<!-- Middle Dotted Line -->
<item
android:left="10dp"
android:right="10dp">
<shape android:shape="line">
<stroke
android:width="1dp"
android:dashWidth="10px"
android:dashGap="10px"
android:color="#ff00"/>
</shape>
</item>
</layer-list>
USE:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/custom_shape"/>
OUTPUT:
Hope this will help~
In your case it might be worth to create a resizable bitmap (9-Patch drawable). Follow this guide.
try bellow xml. save it in drawable.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:topLeftRadius="15dp"
android:topRightRadius="15dp"
android:bottomLeftRadius="5dp"
android:bottomRightRadius="5dp"
/>
<solid
android:color="#ffffff"
/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<stroke
android:width="1dp"
android:color="#000000"
/>
</shape>
It is better to use 9-Patch images. If you can create an image like above you can use https://romannurik.github.io/AndroidAssetStudio/nine-patches.html to create 9-patch image(define expandable area).
Try this xml file in drawable :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape= "rectangle">
<solid android:color="#color/primary" />
<corners android:radius="50dp"/>
</shape>
Please refer the below xml, it may help you out
<?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/black" />
</shape>
</item>
<item
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp">
<shape android:shape="rectangle">
<size
android:width="200dp"
android:height="200dp" />
<solid android:color="#color/colorAccent" />
<corners android:radius="5dp" />
</shape>
</item>
<item>
<shape android:shape="line">
<solid android:color="#android:color/black" />
<stroke android:width="1dp"
android:dashWidth="10px"
android:dashGap="10px"/>
</shape>
</item>
<item
android:bottom="103dp"
android:left="-10dp"
android:right="205dp"
android:top="103dp">
<shape android:shape="oval">
<size
android:width="3dp"
android:height="3dp" />
<solid android:color="#android:color/black" />
<stroke android:width="1dp" />
</shape>
</item>
<item
android:bottom="103dp"
android:left="205dp"
android:right="-10dp"
android:top="103dp">
<shape android:shape="oval">
<size
android:width="3dp"
android:height="3dp" />
<solid android:color="#android:color/black" />
<stroke android:width="1dp" />
</shape>
</item>
</layer-list>
Try below code
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#FFFFFF" />
<corners android:radius="3dip" />
<stroke
android:width="1dp"
android:color="#ED2A3C" />
</shape>
Background
I'm trying to make a (fake) shadow below a view, so that the layers would be vertical in this manner:
a line of color "#43000000" with a height of "1dp"
below the line, a gradient that starts from the top with color "#1A000000" and ends with color "#00000000", and is of a height of "8dp".
The problem
For some reason, I can't draw the line correctly.
No matter what I do, the line for some reason takes the whole space, while the gradient seems fine.
What I tried
I tried using "line" as the shape and also "rectangle". I also tried using "stroke" instead of "solid", tried adding padding and margins...
Here's the XML of the drawable file:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<size android:height="1dp" />
<solid android:color="#43000000" />
</shape>
</item>
<item android:top="1dp">
<shape android:shape="rectangle" >
<gradient
android:angle="270"
android:endColor="#00000000"
android:startColor="#1A000000" />
<size android:height="8dp" />
</shape>
</item>
</layer-list>
Again, this is not the only thing I've tried. It's just my first attempt.
The question
How can I fix this XML ? what is causing it to happen?
Here's what I've found to be working:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:bottom="8dp">
<shape android:shape="rectangle" >
<size android:height="1dp" />
<solid android:color="#43000000" />
</shape>
</item>
<item android:top="1dp">
<shape
android:dither="true"
android:shape="rectangle" >
<gradient
android:angle="270"
android:endColor="#00000000"
android:startColor="#10000000" />
<size android:height="8dp" />
</shape>
</item>
</layer-list>
Tried with this,may it fulfill your need with gradient
<?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="#e040fb"/>
<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="#E1BEE7"/>
<corners android:radius="2dp" />
<gradient
android:angle="270"
android:endColor="#e1bee7"
android:startColor="#e040fb" />
</shape>
</item>
</layer-list>
You can change the heights in this and get what you want
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:height="10dp"
android:gravity="bottom">
<shape
android:shape="oval">
<solid android:color="#color/shadow_color" />
</shape>
</item>
<item android:right="20dp" android:left="20dp" android:bottom="12dp"
android:top="10dp">
<shape
android:shape="rectangle">
<solid android:color="#color/border_color"/>
<corners android:radius="20dp"/>
</shape>
</item>
<item android:right="30dp" android:left="30dp" android:bottom="23dp"
android:top="20dp">
<shape
android:shape="rectangle">
<solid android:color="#color/base_color"/>
<corners android:radius="15dp"/>
</shape>
</item>
</layer-list>
I'm trying to create a drawable shape with different states for my button. So I wrote this:
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true" android:color="#android:color/black" >
<shape android:shape="rectangle" >
<solid android:color="#color/NEGATIVE_pressed" />
<stroke
android:width="1dp"
android:color="#color/ORANGE" />
<corners android:radius="4dp" />
</shape>
</item>
<item android:state_focused="true" android:color="#android:color/black" >
<shape android:shape="rectangle" >
<solid android:color="#color/NEGATIVE_focused" />
<stroke
android:width="1dp"
android:color="#color/ORANGE" />
<corners android:radius="4dp" />
</shape>
</item>
<item android:color="#android:color/black" >
<shape android:shape="rectangle" >
<solid android:color="#color/NEGATIVE" />
<stroke
android:width="1dp"
android:color="#color/NEGATIVE" />
<corners android:radius="4dp" />
</shape>
</item>
</selector>
Then in my button I use it as android:background="#drawable/btn_negative_selector"
However, I want to draw a bottom border to that shape, to be, something like 3 dp and of different color, but I can't figure out how to do it. I tried searching, but didn't find anything suitable for selector. Any suggestions, please?
First I'm separating the shapes to make them easier to manage.
This is your btn_negative_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#xml/rectangle_button_pressed" android:state_pressed="true"></item>
<item android:drawable="#xml/rectangle_button_focused" android:state_focused="true"></item>
<item android:drawable="#xml/rectangle_button" ></item>
</selector>
create folder called 'xml' in your res and save these shapes into it:
1) rectangle_button_pressed:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#color/NEGATIVE_pressed" />
<stroke
android:width="1dp"
android:color="#color/ORANGE" />
<corners android:radius="4dp" />
</shape>
2) rectangle_button_focused:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#color/NEGATIVE_focused" />
<stroke
android:width="1dp"
android:color="#color/ORANGE" />
<corners android:radius="4dp" />
</shape>
3) This one rectangle_button.xml will have a border at the bottom of it by defining a shape using <layer-list>. first <item> is bottom layer and last <item> is the top layer.
<?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/gray"/>
<corners android:radius="4dp"/>
</shape>
</item>
<item android:bottom="3dp">
<shape android:shape="rectangle">
<solid android:color="#color/orange" />
<corners android:radius="4dp"/>
</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 tried to make a button wherein a square shape should be inside a circle shape. It works well on a square with a circle but not with the other way around and I wonder why. Here's my xml code so far for this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:left="#dimen/tab_space" android:right="#dimen/tab_space">
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<size android:width="80dp" android:height="80dp" />
<gradient android:angle="-90" android:startColor="#990000" android:endColor="#550000" />
<stroke android:width="1dp" android:color="#110000" />
</shape>
</item>
<item android:left="#dimen/tab_space" android:right="#dimen/tab_space">
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<size android:width="50dp" android:height="50dp" />
<gradient android:angle="-90" android:startColor="#ff0000" android:endColor="#990000" />
<stroke android:width="1dp" android:color="#440000" />
</shape>
</item>
</layer-list>
Any solution for this?
You can try this. It worked for me.
chat_icon.xml:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<padding android:left="7pt" android:top="8pt" android:right="7pt" android:bottom="8pt"/>
<solid android:color="#android:color/white" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<stroke android:color="#color/jade" android:width="2dip"/>
<solid android:color="#color/white" />
</shape>
</item>
Then, to use it in your layout, declare it as follows:
<ImageView
android:id="#+id/chat_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/chat_icon"
------------------------------ />