How to draw vertical shape in the centre of XML drawable - android

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.

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>

semi-circle on top rectangle in android with xml

how can make this shape in android studio with xml?
a semi-circle on top of rectangle.
i want to put profile picture in top and text inside the rectangle.
<?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="#201215cc" />
<corners android:radius="8dp"/>
<padding android:left="0dp" android:top="0dp" android:right="0dp" android:bottom="0dp" />
</shape>
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:width="100dp"
android:height="40dp"
android:bottom="4dp"
android:top="10dp">
<shape>
<solid android:color="#000" />
<corners android:radius="2dp"/>
</shape>
</item>
<item
android:width="20dp"
android:height="10dp"
android:left="10dp"
android:top="1dp">
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#000000"/>
<corners
android:topLeftRadius="20dp"
android:topRightRadius="20dp"/>
</shape>
</item>
<item
android:width="98dp"
android:height="38dp"
android:bottom="5dp"
android:top="11dp"
android:start="1dp">
<shape>
<solid android:color="#fff" />
<corners android:radius="2dp"/>
</shape>
</item>
<item
android:width="18dp"
android:height="10dp"
android:left="11dp"
android:top="2dp">
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#fff"/>
<corners
android:topLeftRadius="20dp"
android:topRightRadius="20dp"/>
</shape>
</item>
</layer-list>
Output like
It can be done using ConstraintLayout.
Alight your profile pic in vertical center of top border of your rectangle and apply some start(left) margin to it.
<androidx.constraintlayout.widget.ConstraintLayout
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">
<LinearLayout
android:id="#+id/your_rectangle"
android:layout_width="match_parent"
android:layout_height="120dp"
android:layout_marginStart="20dp"
android:layout_marginTop="80dp"
android:layout_marginEnd="20dp"
android:background="#c6c6c6"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/your_view"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_marginStart="20dp"
android:background="#451245"
app:layout_constraintBottom_toTopOf="#id/your_rectangle"
app:layout_constraintStart_toStartOf="#id/your_rectangle"
app:layout_constraintTop_toTopOf="#id/your_rectangle" />
</androidx.constraintlayout.widget.ConstraintLayout>

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>

Custom shape in android using xml

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>

Categories

Resources