semi-circle on top rectangle in android with xml - android

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>

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>

Android Drawable Horizontal Line

Is it possible to make line to be like this with xml? or there's some way to do that..?
I already made some drawable with shape but it's not really like i want
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:bottomLeftRadius="30dp"
android:bottomRightRadius="30dp"
android:topLeftRadius="0dp"
android:topRightRadius="0dp" />
<padding
android:bottom="0dp"
android:left="0dp"
android:right="0dp"
android:top="0dp" />
<stroke
android:width="0.8dp"
android:color="#color/colorPrimaryDark" />
<solid android:color="#android:color/transparent" />
</shape>
We can create a drawable file also for this. May be helpful for someone.
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">
<solid android:color="#android:color/white" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<stroke
android:width="5dp"
android:color="#android:color/holo_blue_dark" />
<solid android:color="#android:color/white" />
<corners android:radius="20dp" />
</shape>
</item>
<item android:bottom="25dp">
<shape android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#android:color/white" />
<solid android:color="#android:color/white" />
</shape>
</item>
</layer-list>
Result :
<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetLeft="-5dp"
android:insetRight="-5dp"
android:insetTop="-10dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/transparent" />
<stroke
android:width="3dp"
android:color="#color/colorPrimaryDark" />
<corners
android:bottomLeftRadius="25dp"
android:bottomRightRadius="25dp" />
</shape>
</inset>
Try this
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#de0b0b" />
<solid android:color="#ffffff" />
<corners android:radius="20dp" />
</shape>
</item>
<item
android:bottom="5dp"
android:top="0dp">
<shape android:shape="rectangle">
<stroke
android:width="10dp"
android:color="#ffffff" />
<solid android:color="#android:color/transparent" />
<corners android:radius="20dp" />
</shape>
</item>
</layer-list>
USE like this
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:gravity="center"
android:background="#ffffff"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/test"
android:text="Nilesh"
android:gravity="center"
android:layout_margin="#dimen/_5sdp"
android:padding="#dimen/_5sdp">
</TextView>
</LinearLayout>
OUTPUT
EDIT
Try this
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape
android:shape="rectangle">
<stroke android:width="1dp" android:color="#a032e4" />
<solid android:color="#a032e4" />
<corners android:radius="40dp"/>
</shape>
</item>
<item android:bottom="4dp" >
<shape
android:shape="rectangle">
<stroke android:width="2dp" android:color="#ffffff" />
<solid android:color="#ffffff" />
<corners android:radius="40dp"/>
</shape>
</item>
</layer-list>
USE LIKE THIS
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:gravity="center"
android:background="#FFFFFF"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/test"
android:layout_margin="20dp"
android:padding="10dp"
android:text="Nilesh Rathod"
android:gravity="center" />
</LinearLayout>
OUTPUT

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>

How to draw vertical shape in the centre of XML drawable

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.

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>

Categories

Resources