How to create this shape drawable - android

I want to create xml drawable to this shape,

use this layout and save in 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">
<size
android:width="200dp"
android:height="50dp" />
<solid android:color="#ef45d1" />
<corners android:topRightRadius="20dp" />
</shape>
</item>
<item
android:bottom="0dp"
android:right="165dp"
android:top="0dp">
<rotate
android:fromDegrees="45"
android:pivotX="0%"
android:pivotY="0%"
android:toDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</rotate>
</item>
</layer-list>
and set in your layout view as background....
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:background="#drawable/newrecatngle"/>
NOTE:-set width and height as wrap_content.....
enjoy coding...........

Related

I want to add a shadow of a image button in round shape but cant make it

<ImageButton
android:id="#+id/btn_scan_qr"
android:layout_width="216dp"
android:layout_height="203dp"
android:elevation="10dp"
android:background="#drawable/roundbutton"
android:src="#drawable/ic_power_settings_new_black_24dp"
android:textSize="15dp"
tools:layout_editor_absoluteX="97dp"
tools:layout_editor_absoluteY="225dp"
/>
This is Xml code
<item android:state_pressed="false"
>
<shape android:shape="oval">
<corners android:radius="40dp" />
<solid android:color="#FFFFFF"
/>
<padding
android:bottom="40dp"
android:left="40dp"
android:right="40dp"
android:top="40dp" />
</shape>
</item>
This is Drawable code for shape of oval i want to add shadow of it i have used elevation but it doesnot do anything at all in constrained layout but it does in Linear layout but it is showing shadow in square but i want it in circle
Please try below code
oval shape view with shadow
custom_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list>
<item>
<shape
android:shape="oval"
xmlns:android="http://schemas.android.com/apk/res/android">
<solid
android:color="#057F86A6"/>
<padding
android:top="2dp"
android:bottom="2dp"
android:right="2dp"
android:left="2dp"/>
</shape>
</item>
<item>
<shape
android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android">
<solid
android:color="#107F86A6"/>
<padding
android:top="1.8dp"
android:bottom="1.8dp"
android:right="1.8dp"
android:left="1.8dp"/>
</shape>
</item>
<item>
<shape
android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android">
<solid
android:color="#207F86A6"/>
<padding
android:top="1.5dp"
android:bottom="1.5dp"
android:right="1.5dp"
android:left="1.5dp"/>
</shape>
</item>
<item>
<shape
android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android">
<solid
android:color="#357F86A6"/>
<padding
android:top="1.1dp"
android:bottom="1.1dp"
android:right="1.1dp"
android:left="1.1dp"/>
</shape>
</item>
<item>
<shape
android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android">
<solid
android:color="#457F86A6"/>
<padding
android:top="0.9dp"
android:bottom="0.9dp"
android:right="0.9dp"
android:left="0.9dp"/>
</shape>
</item>
<item>
<shape
android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android">
<solid
android:color="#507F86A6"/>
<padding
android:top="0.8dp"
android:bottom="0.8dp"
android:right="0.8dp"
android:left="0.8dp"/>
</shape>
</item>
<item>
<shape
android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android">
<solid
android:color="#607F86A6"/>
<padding
android:top="0.5dp"
android:bottom="0.5dp"
android:right="0.5dp"
android:left="0.5dp"/>
</shape>
</item>
<item>
<shape
android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android">
<solid
android:color="#fff"/>
</shape>
</item>
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:background="#android:color/white"
android:orientation="vertical"
android:gravity="center">
<LinearLayout
android:layout_width="120dp"
android:layout_height="120dp"
android:gravity="center"
android:background="#drawable/custom_button">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"/>
</LinearLayout>
</LinearLayout>

Diamond shape xml background for android view

Hi anyone please suggest me how to create android xml drawable like below image?
Now I am using below code
<?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="-40%"
android:pivotY="87%"
android:toDegrees="45">
<shape android:shape="rectangle">
<stroke
android:width="10dp"
android:color="#color/colorAccent" />
<solid android:color="#color/colorAccent" />
</shape>
</rotate>
</item>
</layer-list>
but its result is triangle but I need above shape.
Check this,
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="43dp"
android:top="43dp"
android:right="43dp"
android:bottom="43dp">
<rotate android:fromDegrees="45">
<shape>
<size
android:width="200dp"
android:height="200dp" />
<gradient
android:startColor="#0fdcc9"
android:endColor="#0fdcc9" />
<stroke
android:width="5dp"
android:color="#2DACA0" />
</shape>
</rotate>
</item>
</layer-list>
This is my drawable file for diamond shape ic_diamond.xml file.
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="372.7dp"
android:height="367.4dp"
android:viewportWidth="372.7"
android:viewportHeight="367.4">
<path
android:fillColor="#50AE89"
android:strokeColor="#266D4F"
android:strokeWidth="5"
android:strokeMiterLimit="10"
android:pathData="M188.706,51.8702 L318.105,181.269 L183.968,315.406 L54.5691,186.007
L188.706,51.8702 Z" />
</vector>
I include this in simple view:
<View
android:layout_width="100dp"
android:layout_height="40dp"
android:layout_centerInParent="true"
android:background="#drawable/ic_diamond"
/>
Here, is the result:
i fixed with this tutorial
here
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="43dp"
android:left="43dp"
android:right="43dp"
android:state_pressed="true"
android:top="43dp">
<rotate android:fromDegrees="45">
<shape>
<size
android:width="200dp"
android:height="200dp" />
<gradient
android:endColor="#color/colorPrimaryDark"
android:startColor="#color/colorPrimaryDark" />
<stroke
android:width="5dp"
android:color="#color/colorPrimary" />
<corners android:radius="7dp" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
</shape>
</rotate>
</item>
</layer-list>
Here is a drawable resource which creates a 200dp square and rotates it 45° to form a diamond shape:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="50dp"
android:left="50dp"
android:right="50dp"
android:top="50dp">
<rotate android:fromDegrees="45">
<shape>
<size
android:width="200dp"
android:height="200dp"/>
<stroke
android:width="10dp"
android:color="#358165"/>
<solid android:color="#69BE9E"/>
</shape>
</rotate>
</item>
</layer-list>

Drawable xml with horizontal line and circle in middle

I want to create a drawable xml file for the shape below. It will be like a horizontal line should fill the width of the layout and a circle in the middle.
Can anyone help me on this? Thanks in advance.
Keep it simple
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:height="1dp"
android:gravity="center">
<shape android:shape="rectangle">
<solid android:color="#ff0000" />
</shape>
</item>
<item
android:width="56dp"
android:height="56dp"
android:gravity="center">
<shape android:shape="oval">
<solid android:color="#ff0000" />
</shape>
</item>
</layer-list>
output
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/txtstep"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:layout_marginTop="6dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#drawable/simple_border_white"
android:textSize="3dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#drawable/round_with_shadow"
android:gravity="center"
android:text="1"
android:textColor="#color/colorPrimaryDark"
android:textSize="26sp" />
</RelativeLayout>
simple_border_white.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="#android:color/transparent" />
<!--background color of box-->
</shape>
</item>
<item
android:left="-2dp"
android:right="-2dp"
android:top="-2dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke
android:width="1dp"
android:color="#color/accentcolor" />
</shape>
</item>
</layer-list>
round_with_shadow.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#color/accentcolor"/>
<stroke
android:width="4dp"
android:color="#color/colorPrimaryLight"/>
<size android:width="40dp" android:height="40dp"/>
</shape>
hope this helps
Create your drawable file and put below code.
And change your color code red.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#color/colorAccent" />
<size
android:width="10dp"
android:height="10dp" />
</shape>
</item>
<item>
<rotate
android:fromDegrees="180"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="90">
<shape
android:shape="line"
android:top="1dp">
<stroke
android:width="0.5dp"
android:color="#color/colorAccent" />
</shape>
</rotate>
</item>
Use below drawable XML into your views background :
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:width="100dp"
android:height="100dp"
android:gravity="center">
<shape android:shape="oval">
<solid android:color="#android:color/holo_red_dark" />
<!--background color of box-->
</shape>
</item>
<item
android:height="10dp"
android:gravity="center">
<shape android:shape="rectangle">
<solid android:color="#android:color/holo_red_dark" />
<!--background color of box-->
</shape>
</item>
</layer-list>
Attributes height and width in <item/> are supported since 23 api.
For earlier versions you can use following code:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:gravity="center">
<shape android:shape="rectangle">
<size android:height="1dp" />
<solid android:color="#ff0000" />
</shape>
</item>
<item android:gravity="center">
<shape android:shape="oval">
<size
android:width="30dp"
android:height="30dp" />
<solid android:color="#ff0000" />
</shape>
</item>

Create xml Chat Bubble With the Shape As in the .png File

Could I please ask if anyone knows how to create an xml shape of the chat bubble below? The only examples I found online were two separate shapes that were put as two separate backgrounds in a layout - a triangle and a rectangle. I tried combining the triangle and rectangle to no avail. The triangle seems to hide in the rectangle.
Setting a top attribute to the triangle to move it down makes the ImageView object blank.
Please see what I tried:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!--rectangle with rounded corners-->
<item android:top="0dp" android:bottom="20dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#android:color/black" />
<size
android:width="106dp"
android:height="20dp"/>
<stroke
android:width="1dp"
android:color="#000" />
<corners android:radius="8dp" />
</shape>
</item>
<!--triangle-->
<item android:bottom="0dp" android:top="20dp" android:gravity="center_horizontal|bottom">
<rotate
android:fromDegrees="45"
android:toDegrees="45"
android:pivotX="135%"
android:pivotY="15%">
<shape android:shape="rectangle">
<solid android:color="#android:color/black" />
<size
android:height="10dp"
android:width="10dp"/>
</shape>
</rotate>
</item>
</layer-list>
This is the usage in the imageView:
<?xml version="1.0" encoding="utf-8"?>
<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"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="net.eventilate.shapes.Balloon">
<ImageView
android:layout_width="106dp"
android:layout_height="30dp"
android:id="#+id/imageView2"
android:contentDescription="#string/test"
android:background="#drawable/balloon"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
You can Use this code
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top="0dp" android:bottom="10dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#android:color/holo_blue_light" />
<size
android:width="106dp"
android:height="20dp"/>
<stroke
android:width="1dp"
android:color="#40adc2" />
<corners android:radius="4dp" />
</shape>
</item>
<item android:bottom="0dp"
android:top="0dp"
android:gravity="center_horizontal|bottom">
<rotate
android:fromDegrees="45"
android:toDegrees="45"
android:pivotX="135%"
android:pivotY="15%">
<shape android:shape="rectangle">
<solid android:color="#android:color/holo_blue_light" />
<size
android:height="10dp"
android:width="10dp"/>
</shape>
</rotate>
</item>
</layer-list>
it get this result:
This is exactly what you need:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- red shape -->
<item
android:bottom="0dp"
android:gravity="center_horizontal|bottom"
android:top="0dp">
<rotate
android:fromDegrees="45"
android:pivotX="110%"
android:pivotY="17%"
android:toDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#android:color/holo_red_dark" />
<size
android:width="10dp"
android:height="10dp" />
</shape>
</rotate>
</item>
<item
android:bottom="10dp"
android:top="0dp">
<shape>
<corners android:radius="3dp" />
<solid android:color="#android:color/holo_red_dark" />
<size
android:width="50dp"
android:height="20dp" />
</shape>
</item>
<!-- black shape -->
<item
android:bottom="0dp"
android:gravity="center_horizontal|bottom"
android:top="0dp">
<rotate
android:fromDegrees="45"
android:pivotX="120%"
android:pivotY="15%"
android:toDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#android:color/black" />
<size
android:width="10dp"
android:height="10dp" />
</shape>
</rotate>
</item>
<item
android:bottom="10.5dp"
android:left="0.5dp"
android:right="0.5dp"
android:top="0.5dp">
<shape>
<corners android:radius="3dp" />
<solid android:color="#android:color/black" />
<size
android:width="50dp"
android:height="20dp" />
</shape>
</item>
</layer-list>

layer-list not working as expected, I want to understand this concept

I have fair Idea about layer_list referred from here and here
here is my code
<?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="#FEBB02" />
<corners android:radius="4dp" />
<size
android:width="40dp"
android:height="20dp" />
</shape>
</item>
<item
android:bottom="2dp"
android:left="10dp"
android:right="10dp"
>
<rotate
android:toDegrees="45"
android:fromDegrees="45"
android:pivotX="50%"
android:pivotY="50%">
<shape android:shape="rectangle">
<solid android:color="#3F51B5" />
<corners android:radius="2dp" />
</shape>
</rotate>
</item>
This is how it is look line in studio
but when I am applying background of Linearlayout it gives this result
I am expecting corner would be below the pointed as seen in studio.
I think you should try setting the clipToPadding and clipChildren attributes to false, inside the parent view of the linear layout.
Plz change size of Linearlayout to 150dp * 100dp.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--<item>-->
<!--<scale android:drawable="#drawable/ic_launcher" android:useIntrinsicSizeAsMinimum="true">-->
<!--<!–<shape android:shape="rectangle" android:useLevel="true">–>-->
<!--<!–<solid android:color="#color/red" />–>-->
<!--<!–<size–>-->
<!--<!–android:width="60dp"–>-->
<!--<!–android:height="60dp" />–>-->
<!--<!–</shape>–>-->
<!--</scale>-->
<!--</item>-->
<item
android:bottom="15dp"
android:left="0dp"
android:right="0dp"
android:top="15dp">
<shape android:shape="rectangle">
<solid android:color="#FEBB02" />
<corners android:radius="4dp" />
<size
android:width="150dp"
android:height="70dp" />
</shape>
</item>
<item
android:bottom="15dp"
android:left="40dp"
android:right="40dp"
android:top="15dp"
>
<rotate
android:toDegrees="45"
android:fromDegrees="45"
android:pivotX="50%"
android:pivotY="50%">
<shape android:shape="rectangle">
<solid android:color="#3F51B5" />
<corners android:radius="2dp" />
<size
android:width="70dp"
android:height="70dp" />
</shape>
</rotate>
</item>
</layer-list>

Categories

Resources