Develop Reference

Android: Draw shape with skewed corner

I want to use a background for my buttons. But when I use a png it slows down the app. Therefore I want to use a xml shape but I do not know how to make the corner cut (like on the picture).
By now I have the following shape which is just a rectangle:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/blue_semi_transparent"/>
<padding android:bottom="10dp" android:right="10dp" android:top="10dp" android:left="10dp"/>
<margin android:bottom="10dp" android:right="10dp" android:top="10dp" android:left="10dp"/>
</shape>
How can I draw the bottom right corner?

You can try this,
skewed_background.xml
<?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="#3F8EEB" />
</shape>
</item>
<item>
<rotate
android:fromDegrees="110"
android:pivotX="90%"
android:pivotY="90%"
>
<shape android:shape="rectangle" >
<solid android:color="#FFF" />
</shape>
</rotate>
</item>
</layer-list>
sample_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp"
android:orientation="vertical" >
<View
android:layout_width="200dp"
android:layout_height="50dp"
android:background="#drawable/triangle1"/>
</LinearLayout>
If you want to modify the skewed area you just need to change the value of fromDegrees, pivotX and pivotY value in the second item in skewed_background.xml.

This is exactly what you looking for
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bg"
android:paddingRight="15dp"
android:textColor="#ffffff"
android:layout_centerInParent="true"
android:text="Button" />
</RelativeLayout>
bg.xml
<?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:width="100dp"
android:height="40dp" />
<solid android:color="#13a89e" />
</shape>
</item>
<item
android:right="100dp"
android:left="100dp"
android:top="-100dp"
android:bottom="-100dp">
<rotate
android:fromDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</rotate>
</item>
<item
android:right="-100dp"
android:left="100dp"
android:top="-100dp"
android:bottom="-100dp">
<rotate
android:fromDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</rotate>
</item>
</layer-list>
OUTPUT

This will give you your desired result
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/colorPrimary"/>
<item android:top="-20dp"
android:bottom="-50dp"
android:left="350dp"
android:right="-120dp">
<rotate
android:fromDegrees="10"
android:pivotX="50%"
android:pivotY="0%">
<shape
android:shape="rectangle">
<solid
android:color="?android:colorBackground"/>
</shape>
</rotate>
</item>
</layer-list>

Rectangle Shape with Arrow using XML

How to implement this shape of Departments header using shape and xml without 9-patch ?
I mean rectangle with arrow on the left.
My code snippet:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="1px"
android:left="#dimen/edittext_border"
android:right="#dimen/edittext_border"
android:top="#dimen/edittext_border">
<shape android:shape="rectangle">
<stroke
android:width="#dimen/edittext_border_width"
android:color="#color/menu_divider" />
<solid android:color="#color/background" />
<corners android:radius="4dp" />
</shape>
</item>
</layer-list>

if you are looking for someting like this, try the following code..
Make a xml arrow_shape in your drawable folder.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<rotate android:fromDegrees="45" android:toDegrees="45"
android:pivotX="-40%" android:pivotY="87%" >
<shape android:shape="rectangle" >
<stroke android:color="#c6802a" android:width="10dp"/>
<solid android:color="#c6802a" />
</shape>
</rotate>
</item>
</layer-list>
Make a xml rectangle_shape in your drawable folder.
<?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="#B2E3FA" />
</shape>
</item>
In your main xml file
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="center"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.example.stpl.myapplication.MainActivity">
<RelativeLayout
android:id="#+id/arrow"
android:layout_width="30dp"
android:layout_height="30dp"
android:background="#drawable/arrow_shape"
android:rotation="270" />
<RelativeLayout
android:id="#+id/rectangle"
android:layout_width="150dp"
android:layout_height="50dp"
android:background="#drawable/rectangle_shape"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:android="http://schemas.android.com/tools" />
</LinearLayout>

A solution with a gradient:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:width="2dp" android:height="2dp"
android:top="4dp" android:left="3dp">
<rotate android:fromDegrees="45"
android:pivotX="0"
android:pivotY="0">
<shape>
<solid android:color="#D83945"/>
</shape>
</rotate>
</item>
<item android:width="50dp" android:height="11dp" android:left="3dp">
<shape>
<gradient
android:startColor="#D83945"
android:endColor="#F9700C"
/>
<corners
android:radius="2dp"
/>
</shape>
</item>
</layer-list>
The final result is:

Custom shaped Linearlayout with curved side in android

I am trying to make a custom shaped linearlayout like below
I am trying to make only one side curved. Tried with corner radius but it doesn't give the same look as above.
Already tried this background shape as below :-
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#3F51B5" />
<padding
android:bottom="7dp"
android:left="7dp"
android:right="7dp"
android:top="7dp" />
<corners
android:bottomLeftRadius="50dp"
android:bottomRightRadius="50dp"
android:topLeftRadius="0dp"
android:topRightRadius="0dp" />
</shape>
it rounds only corners and on increasing the value shape is not preserved it gets too circular. I WANT CURVED line and not rounded corners

Its very late already but this is for future seekers.
I think vector drawables are the most perfect solution for this. Use below vector as background to get custom shaped bottom curved layout.
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportHeight="100.0"
android:viewportWidth="200.0">
<path
android:fillColor="#YOUR_FAVORITE_COLOR"
android:pathData="M200,0H0v4.5h0v75.8h0c17.8,10.2 56,17.2 100.5,17.2c44.5,0 81.6,-7 99.5,-17.2h0V4.5h0V0z" />

Create a shape file in drawable folder e.g: my_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:bottomLeftRadius="100dp"
android:bottomRightRadius="100dp"
android:topLeftRadius="0dp"
android:topRightRadius="0dp" />
<padding
android:bottom="0dp"
android:left="0dp"
android:right="0dp"
android:top="0dp" />
<stroke
android:width="0.5dp"
android:color="#color/theme_red" />
<solid android:color="#color/white" />
</shape>
then add this shape in your layout as a background. e.g:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/my_shape"
android:orientation="horizontal">
</LinearLayout>

shape_curve.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle" />
</item>
<item
android:bottom="0dp"
android:left="-100dp"
android:right="-100dp"
android:top="-80dp">
<shape android:shape="oval">
<solid android:color="#color/colorAccent" />
</shape>
</item>
</layer-list>
Use
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#drawable/shape_curve"
android:orientation="horizontal" />

what i did is
create a drawable allowaccess_button_normal.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<solid android:color="#color/colorPrimary"/>
</shape>
</item>
</selector>
Try below layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:background="#fefefe"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:background="#color/colorPrimary"
android:layout_height="110dp">
</RelativeLayout>
<ImageView
android:layout_marginTop="85dp"
android:src="#drawable/allowaccess_button_normal"
android:layout_width="match_parent"
android:layout_height="50dp" />
</RelativeLayout>

<layer-lisxmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="175dp">
<shape android:shape="oval">
<gradient
android:angle="135"
android:startColor="#f56f2c"
android:endColor="#fa9f46"/>
</shape>
</item>
<item android:bottom="40dp">
<shape android:shape="rectangle">
<gradient
android:angle="135"
android:startColor="#f56f2c"
android:endColor="#fa9f46"/>
</shape>
</item>
</layer-list>

you can set the dimension in the value -dimension.xml fime and then set it in your xml of your linearlayout it will give the following like this
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#FFFF00" />
<padding android:left="7dp"
android:top="7dp"
android:right="7dp"
android:bottom="7dp" />
just make a xml file in your drawable set the dimensio u need and then call it by your linear layout

Android border bottom for custom view not working

What I'm trying to do is to have a relativelayout with a gradient on it and a gray bottom border, I'm using the below custom view in my application:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/list_item_container"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/list_item_image"
android:layout_width="match_parent"
android:layout_height="#dimen/SIZE_LIST_ITEM_LARGE"
android:scaleType="centerCrop"/>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/shape_list_item_gradient" />
<com.rahil.widgets.CustomTextView
android:id="#+id/list_item_title"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:gravity="bottom"
android:textColor="#color/COLOR_BLACK"/>
</RelativeLayout>
and this is shape_list_item_gradient:
<?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="#FFFFFFFF"
android:endColor="#00FFFFFF"
android:angle="90" />
</shape>
</item>
<item android:bottom="2dp">
<shape android:shape="rectangle">
<stroke android:width="2dp" android:color="#color/COLOR_GRAY" />
</shape>
</item>
</layer-list>
but the above code applies border to all borders not just bottom border. I added the separate shape xml to the relativelayout but it didn't work which I assume the view with gradient covers it maybe?? I'm quiet lost. thanks for your help.

The android:bottom attribute is actually the "bottom offset in pixels" as noted here about layer-list drawables. There is no explicit way to create a rectangle that is stroked only on one side.
However you can use the same trick that Krylez suggested here: https://stackoverflow.com/a/19239478/1538674
So something like this:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<gradient
android:startColor="#FFFFFFFF"
android:endColor="#00FFFFFF"
android:angle="90" />
</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/COLOR_GRAY" />
</shape>
</item>
</layer-list>

How to set a shape's background in xml?

I just created a red circle using android shapes:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadiusRatio="4"
android:shape="ring"
android:thicknessRatio="9"
android:useLevel="false" >
<solid android:color="#FF0000" />
<size
android:height="48dip"
android:width="48dip" />
</shape>
This is really cool, but I cannot set the background color of the circle to my color. I tried android:background="#FFFFFF" but it always appear to be black in my layout. How can I set the background of the above shape?

I think a layer-list might help you:
<?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="#ffffff" />
</shape>
</item>
<item>
<shape
android:innerRadiusRatio="4"
android:shape="ring"
android:thicknessRatio="9"
android:useLevel="false" >
<solid android:color="#FF0000" />
<size
android:height="48dip"
android:width="48dip" />
</shape>
</item>
</layer-list>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="12dp" />
<solid android:color="#ffffff" />
<stroke
android:width="1dp"
android:color="#android:color/black" />
</shape>

I am just adding helpful research as an answer. Let us suppose you have a shape as the answer described by #GeneBo and you are looking forward to re-using that shape but with a different solid color. So all you need to do in your widget is:
android:background="#drawable/your_shape_to_reuse"
android:backgroundTint="#color/new_background_color_you_need"

Ok, how about this?
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FFFFFF">
<TextView android:text="Foo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
android:gravity="center"
android:background="#drawable/red_circle"/>
</LinearLayout>
</LinearLayout>