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>
Related
How can I create below custom drawable shapes using layer-list in XML.
After couple of hours trying finally I am able to create this custom shape using layer-list.
1. /res/drawable/custom_shape_one.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Rectangle -->
<item>
<shape android:shape="rectangle">
<size
android:width="300dp"
android:height="80dp" />
<solid android:color="#android:color/transparent" />
</shape>
</item>
<item
android:right="80dp">
<shape android:shape="rectangle">
<size
android:width="300dp"
android:height="60dp" />
<solid android:color="#F8F7F7" />
</shape>
</item>
<item
android:left="135dp">
<rotate android:fromDegrees="67">
<shape android:shape="rectangle">
<solid android:color="#F8F7F7" />
</shape>
</rotate>
</item>
<!-- Top Border -->
<item
android:right="61dp"
android:bottom="78.8dp">
<shape android:shape="line">
<stroke
android:color="#999999"
android:width="1dp" />
</shape>
</item>
<!-- Right-Diagonal Border -->
<item
android:left="220dp">
<rotate android:fromDegrees="67">
<shape android:shape="line">
<stroke
android:color="#999999"
android:width="1dp" />
</shape>
</rotate>
</item>
</layer-list>
USE:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/custom_shape_one"/>
OUTPUT:
2. /res/drawable/custom_shape_two.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Rectangle -->
<item>
<shape android:shape="rectangle">
<size
android:width="300dp"
android:height="80dp" />
<solid android:color="#android:color/transparent" />
</shape>
</item>
<item
android:left="80dp">
<shape android:shape="rectangle">
<size
android:width="300dp"
android:height="60dp" />
<solid android:color="#F8F7F7" />
</shape>
</item>
<item
android:right="135dp">
<rotate android:fromDegrees="293">
<shape android:shape="rectangle">
<solid android:color="#F8F7F7" />
</shape>
</rotate>
</item>
<!-- Top Border -->
<item
android:left="61dp"
android:bottom="78.8dp">
<shape android:shape="line">
<stroke
android:color="#999999"
android:width="1dp" />
</shape>
</item>
<!-- Left-Diagonal Border -->
<item
android:right="220dp">
<rotate android:fromDegrees="293">
<shape android:shape="line">
<stroke
android:color="#999999"
android:width="1dp" />
</shape>
</rotate>
</item>
</layer-list>
USE:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/custom_shape_two"/>
OUTPUT:
3. /res/drawable/custom_shape.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="300dp"
android:height="60dp" />
<solid android:color="#android:color/transparent" />
</shape>
</item>
<item
android:right="90dp">
<rotate android:fromDegrees="67">
<shape android:shape="rectangle">
<solid android:color="#F8F7F7" />
</shape>
</rotate>
</item>
<item
android:left="90dp">
<rotate android:fromDegrees="293">
<shape android:shape="rectangle">
<solid android:color="#F8F7F7" />
</shape>
</rotate>
</item>
<item
android:right="200dp">
<shape android:shape="rectangle">
<size
android:width="300dp"
android:height="60dp" />
<solid android:color="#F8F7F7" />
</shape>
</item>
<item
android:left="200dp">
<shape android:shape="rectangle">
<size
android:width="300dp"
android:height="60dp" />
<solid android:color="#F8F7F7" />
</shape>
</item>
<!-- Top-Right Line -->
<item
android:right="180dp"
android:bottom="58.5dp">
<shape android:shape="line">
<stroke
android:color="#999999"
android:width="1dp" />
</shape>
</item>
<!-- Top-Right Line -->
<item
android:left="180dp"
android:bottom="58.5dp">
<shape android:shape="line">
<stroke
android:color="#999999"
android:width="1dp" />
</shape>
</item>
<!-- Left-Diagonal Line -->
<item
android:right="26dp">
<rotate android:fromDegrees="67">
<shape android:shape="line">
<stroke
android:color="#999999"
android:width="1dp" />
</shape>
</rotate>
</item>
<!-- Right-Diagonal Line -->
<item
android:left="26dp">
<rotate android:fromDegrees="293">
<shape android:shape="line">
<stroke
android:color="#999999"
android:width="1dp" />
</shape>
</rotate>
</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~
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>
How can a vertical line be drawn within an XML drawable when using a layer-list? I declared 3 shapes within the drawable but for some reason it doesn't appear as expected.
<?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/green"/>
</shape>
</item>
<item android:top="0dp" android:left="1dp" android:bottom="0dp" android:right="5dp">
<shape android:shape="rectangle">
<size android:width="3dp"/>
<solid android:color="#android:color/white"/>
</shape>
</item>
<item android:top="0dp" android:left="5dp" android:bottom="0dp" android:right="1dp">
<shape android:shape="rectangle">
<size android:width="3dp"/>
<solid android:color="#android:color/white"/>
</shape>
</item>
</layer-list>
Current result
Expected result
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:width="16dp"
android:left="15px">
<shape
android:shape="rectangle">
<solid android:color="#color/colorAccent" />/>
<size android:width="5dip" />
<stroke android:color="#color/colorAccent" />
</shape>
</item>
<item
android:width="16dp"
android:left="80px">
<shape
android:shape="rectangle">
<solid android:color="#color/colorAccent" />/>
<size android:width="5dip" />
<stroke android:color="#color/colorAccent" />
</shape>
</item>
<item
android:width="16dp"
android:left="140px">
<shape
android:shape="rectangle">
<solid android:color="#color/colorAccent" />/>
<size android:width="5dip" />
<stroke android:color="#color/colorAccent" />
</shape>
</item>
</layer-list>
Try this solution
drawable/shape.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/colorAccent" />/>
<size android:width="5dip" />
<stroke
android:color="#color/colorAccent"
/>
</shape>
Include in the layout file the following
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<View
android:layout_width="15dip"
android:layout_height="wrap_content"
android:layout_margin="#dimen/activity_horizontal_margin"
android:background="#drawable/shape"></View>
<View
android:layout_width="15dip"
android:layout_height="wrap_content"
android:layout_margin="#dimen/activity_horizontal_margin"
android:background="#drawable/shape"></View>
<View
android:layout_width="15dip"
android:layout_height="wrap_content"
android:layout_margin="#dimen/activity_horizontal_margin"
android:background="#drawable/shape"></View>
</LinearLayout>
Change the colors and fix the margins of the layout.
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>
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>