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>
Related
I am going to customize the Seekbar in Android and I am having one problem with it.
This is what I am going to do :
This is now I get :
And Here is my code:
<SeekBar
android:id="#+id/blueSlider"
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_marginStart="50dp"
android:layout_marginTop="50dp"
android:layout_marginEnd="10dp"
android:splitTrack="false"
android:maxHeight="40dp"
android:shape="oval"
android:thumbOffset="-20dp"
android:secondaryProgress="0"
android:progressDrawable="#drawable/styled_progress"
android:max="#integer/slider_max_value"
android:thumb="#drawable/oval_seekbar_thumb"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintEnd_toStartOf="#+id/blueText"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
styled_progress.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<shape android:shape="rectangle">
<corners
android:radius="25dp"/>
<gradient
android:startColor="#color/gradient_start"
android:endColor="#color/gradient_end"
android:angle="0" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape android:shape="rectangle">
<corners
android:radius="90dp"/>
</shape>
</clip>
</item>
</layer-list>
oval_seekbar_thumb.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/white" />
<size android:height="25dp" android:width="25dp"/>
</shape>
</item>
</selector>
Please help me on this problem.(missing white line)
Thank you
you can try adding a margin around your secondary progress
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- BACKGROUND-->
<item android:id="#android:id/background">
<shape android:shape="rectangle">
<corners
android:radius="25dp"/>
<size android:height="30dp"
android:width="200dp" />
<gradient
android:startColor="#color/primary"
android:endColor="#color/primary_light"
android:angle="0" />
</shape>
</item>
<item android:id="#android:id/secondaryProgress"
android:left="10dp"
android:top="14dp"
android:right="10dp"
android:bottom="14dp">
<shape android:shape="rectangle">
<solid android:color="#color/white" />
</shape>
</item>
</layer-list>
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>
I am Using Drawable For Draw Horizontal Line With Starting Small Circle In android But The Circle Comes With Center Of the Horizontal Line.
This is my code.
android->res->drawable Folder.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:gravity="start">
<shape
android:innerRadius="0dp"
android:shape="ring"
android:thickness="6dp"
android:useLevel="false">
<solid android:color="#color/colorPrimary"/>
</shape>
</item>
<item >
<shape
android:shape="line">
<size
android:width="200dp"
android:height="200dp" />
<stroke
android:width="2dp"
android:color="#0000FF" />
</shape>
</item>
Please Help me to solve this....
I think this will solve your problem.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item >
<shape
android:shape="line">
<size
android:width="200dp"
android:height="200dp" />
<stroke
android:width="2dp"
android:color="#0000FF" />
</shape>
</item>
<item android:gravity="start" android:left="-188dp">
<shape
android:innerRadius="0dp"
android:shape="ring"
android:thickness="6dp"
android:useLevel="false">
<solid android:color="#color/colorPrimary"/>
</shape>
</item>
</layer-list>
Also, to place this drawable in imageview then follow this code.
<ImageView
android:scaleType="fitXY"
android:src="#drawable/test"
android:layout_width="200dp"
android:layout_height="15dp" />
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.
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>