I have been trying to create a vector similar to this image as an android drawable XML but I have been having a few issues.
I am trying to create it as a layer-list so I can have several primitives (a circle and 4 rectangles with rounded corners to act as a semi-circle).
here is my XML code for the drawable
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:right="0dp" android:left="0dp">
<shape
android:shape="rectangle">
<solid android:color="#FFFFFF"/>
<corners
android:bottomRightRadius="20dp"
android:bottomLeftRadius="20dp"/>
</shape>
</item>
<item android:right="-80dp" android:left="0dp" android:height="20dp" android:width="20dp">
<shape
android:shape="rectangle">
<solid android:color="#FFFFFF"/>
<corners
android:bottomRightRadius="20dp"
android:bottomLeftRadius="20dp"/>
</shape>
</item>
<item android:right="-80dp" android:left="0dp" android:height="20dp" android:width="20dp">
<shape
android:shape="rectangle">
<solid android:color="#FFFFFF"/>
<corners
android:bottomRightRadius="20dp"
android:bottomLeftRadius="20dp"/>
</shape>
</item>
<item android:right="-80dp" android:left="0dp" android:height="20dp" android:width="20dp">
<shape
android:shape="rectangle">
<solid android:color="#FFFFFF"/>
<corners
android:bottomRightRadius="20dp"
android:bottomLeftRadius="20dp"/>
</shape>
</item>
<item android:right="-80dp" android:left="0dp" android:height="20dp" android:width="20dp">
<shape
android:shape="rectangle">
<solid android:color="#FFFFFF"/>
<corners
android:bottomRightRadius="20dp"
android:bottomLeftRadius="20dp"/>
</shape>
</item>
<item android:right="00dp" android:left="00dp" android:height="40dp" android:width="40dp">
<shape android:shape="oval">
<solid android:color="#000000"/>
</shape>
</item>
</layer-list>
So the problem is I can't get them to spread out as I want them. At the moment they're all on top of each other. When I try to resize one of them, they all adopt that same size for some reason, making impossible to create the semi-circles. Also when I try to move them with android:top and the like, it would drag the others with it so I am kind of lost on how I am supposed to create the shape I'm looking for.
Any help is appreciated.
I had modified your sample , hope this will help you
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:gravity="left|center_vertical" android:right="35dp">
<shape
android:shape="rectangle">
<size android:height="10dp"
android:width="10dp"/>
<solid android:color="#2962FF"/>
<corners
android:topLeftRadius="10dp"
android:bottomLeftRadius="10dp"/>
</shape>
</item>
<item android:gravity="right|center_vertical" android:left="35dp">
<shape
android:shape="rectangle">
<size android:width="10dp"
android:height="10dp"/>
<solid android:color="#2962FF"/>
<corners
android:bottomRightRadius="10dp"
android:topRightRadius="10dp"/>
</shape>
</item>
<item android:gravity="top|center_horizontal" android:bottom="35dp">
<shape
android:shape="rectangle">
<size android:width="10dp" android:height="10dp"/>
<solid android:color="#2962FF"/>
<corners
android:topRightRadius="10dp"
android:topLeftRadius="10dp"/>
</shape>
</item>
<item android:gravity="bottom|center_horizontal" android:top="35dp">
<shape android:shape="rectangle">
<size android:height="10dp"
android:width="10dp"/>
<solid android:color="#2962FF"/>
<corners
android:bottomRightRadius="20dp"
android:bottomLeftRadius="20dp"/>
</shape>
</item>
<item android:gravity="center_horizontal|center_vertical">
<shape android:shape="oval">
<size android:height="20dp"
android:width="20dp"/>
<solid android:color="#000000"/>
</shape>
</item>
</layer-list>
Related
I'm trying to implement a view like what's in this link here: https://imgur.com/a/6b75AMp
This is the layer-list I'm using:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<corners android:radius="10dp" />
<solid android:color="#color/HobbesLightGreen"/>
</shape>
</item>
<item android:left="8dp">
<shape android:shape="rectangle">
<corners android:radius="10dp" />
<solid android:color="#color/HobbesBackground"/>
</shape>
</item>
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
// The width and color of the border
<stroke
android:width="1dp"
android:color="#3C341F" />
// The desired corner radius. reduce it to keep it less rounded
<corners android:radius="10dp" />
<solid
android:color="#F0ECE0"
/>
</shape>
</item>
</layer-list>
However, the border doesn't show up. If I play around with the order of the items--for example, if I make the vertical stripe the last item--then the border might show up, but the vertical stripe won't. How do I get everything in the layer-list to show up properly?
try the following code you will get a hint
<?xml version="1.0" encoding="utf-8"?>
<item>
<shape android:shape="rectangle">
<corners android:radius="10dp" />
<solid android:color="#color/HobbesLightGreen" />
</shape>
</item>
<item android:left="4dp" android:top="4dp" android:right="4dp" android:bottom="4dp">
<shape android:shape="rectangle">
<corners android:radius="10dp" />
<solid android:color="#color/HobbesBackground" />
</shape>
</item>
<item android:left="8dp" android:top="8dp" android:right="8dp" android:bottom="8dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:width="1dp" android:color="#3C341F" />
<corners android:radius="10dp" />
<solid android:color="#F0ECE0" />
</shape>
</item>
I have modified some of your code, use it and chech the output.
<item>
<shape android:shape="rectangle">
<corners android:radius="10dp" />
<solid android:color="#color/colorPrimary"/>
</shape>
</item>
<item android:left="8dp">
<shape android:shape="rectangle">
<corners android:radius="10dp" />
<solid android:color="#color/colorAccent"/>
</shape>
</item>
<item>
<shape android:shape="rectangle">
<corners android:radius="10dp" />
<stroke android:color="#000000" android:width="2dp"/>
</shape>
</item>
How can I draw this gradient border(border is fade out to transparent) and radial gradient background?
My code :
Drawable/bg.xml
Radial gradient code is here
Drawable/border.xml
<item>
<shape android:shape="rectangle">
<solid android:color="#android:color/holo_blue_light"/>
<corners android:topLeftRadius="100dp" android:topRightRadius="100dp"/>
</shape>
</item>
<item android:left="3dp" android:right="3dp" android:top="2dp">
<shape android:shape="rectangle">
<solid android:color="#color/white"/>
<corners android:topLeftRadius="100dp" android:topRightRadius="100dp"/>
</shape>
</item>
<item android:height="5dp" android:left="30dp" android:right="30dp">
<shape android:shape="rectangle">
<solid android:color="#color/colorPrimary"/>
<corners android:topLeftRadius="100dp" android:topRightRadius="200dp"/>
<gradient android:endColor="#color/transparent"
android:centerColor="#color/white"
android:startColor="#color/transparent"/>
</shape>
</item>
<item>
<shape android:shape="rectangle">
<gradient android:endColor="#color/white"
android:startColor="#android:color/transparent"
android:angle="-90" />
</shape>
</item>
I want this result :
<?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/holo_blue_light"/>
<corners android:topLeftRadius="100dp" android:topRightRadius="100dp"/>
</shape>
</item>
<item android:left="3dp" android:right="3dp" android:top="2dp">
<shape android:shape="rectangle">
<solid android:color="#color/white"/>
<corners android:topLeftRadius="100dp" android:topRightRadius="100dp"/>
</shape>
</item>
<item android:width="40dp" android:left="70dp" android:right="200dp">
<shape android:shape="rectangle">
<solid android:color="#color/colorPrimary"/>
<gradient android:endColor="#color/white"
android:startColor="#color/transparent"/>
</shape>
</item>
<item android:width="40dp" android:left="240dp" android:right="20dp">
<shape android:shape="rectangle">
<solid android:color="#color/white"/>
<gradient android:endColor="#color/transparent"
android:startColor="#color/white"/>
</shape>
</item>
<item android:left="110dp" android:right="120dp">
<shape android:shape="rectangle">
<solid android:color="#color/white"/>
</shape>
</item>
<item>
<shape android:shape="rectangle">
<gradient android:endColor="#color/white"
android:startColor="#color/transparent"
android:angle="-90" />
</shape>
</item>
</layer-list>
Create this rectangle.xml file inside the drawable folder.
Copy this code into it.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<gradient
android:angle="270"
android:endColor="#000000"
android:startColor="#FFFFFF" />
<corners android:radius="10dp" />
<padding
android:bottom="5dp"
android:left="5dp"
android:right="5dp"
android:top="5dp" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#af25e1" />
<corners android:radius="10dp" />
<size
android:width="250dp"
android:height="150dp" />
</shape>
</item>
</layer-list>
and set it as the background to your container.
You can change it according to your needs
Hope it works for you.
I would like to create the following background with a layer-list:
So basically a circle which has an outer stroke border.
I created the following XML:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<solid android:color="#fff"/>
<size
android:width="10dp"
android:height="10dp"/>
</shape>
</item>
<item>
<shape android:shape="oval">
<stroke android:color="#ff" android:width="2dp"/>
<size
android:width="25dp"
android:height="25dp"/>
</shape>
</item>
</layer-list>
But this shows only one solid oval. Any help is appreciated!
Try This Change Color as per your requirement
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:width="60dp"
android:height="60dp"
android:top="15dp"
android:right="15dp"
android:bottom="15dp"
android:left="15dp">
<shape
android:shape="oval">
<solid android:color="#ffffff" />
</shape>
</item>
<item>
<shape
android:shape="oval">
<stroke android:width="8dp"
android:color="#ffffff"/>
</shape>
</item>
</layer-list>
Try this .xml File
Tried to edit also you want to Exact
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:topLeftRadius="20dp"
android:topRightRadius="20dp"
android:bottomLeftRadius="20dp"
android:bottomRightRadius="20dp"
/>
<solid
android:color="#"
/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<size
android:width="100dp"
android:height="100dp"
/>
<stroke
android:width="3dp"
android:color="#33779C"
/>
android:shape="oval">>
<solid android:color="#FFFFFF" />
<size android:height="25dp"
android:width="25dp"/>
</shape>
The Result shape Like This...
I am trying to create a shape drawable like below.
where only the top left section is in different color ( here white ). Thought placing a rectangle with smaller size would let me achieve this but I was wrong. Am I even going in the right direction?
Here's my drawable.xml file.
<?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="15dp" android:height="15dp"/>
<solid android:color="#android:color/white" />
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#android:color/black" />
</shape>
</item>
</layer-list>
<?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="60dp" android:height="60dp"/>
<solid android:color="#android:color/white" />
</shape>
</item>
<item android:left="40dp">
<shape android:shape="rectangle">
<size android:width="30dp" android:height="30dp"/>
<solid android:color="#ff0000" />
</shape>
</item>
<item android:top="30dp" android:bottom="0dip">
<shape android:shape="rectangle">
<size android:width="10dp" android:height="10dp"/>
<solid android:color="#ff0000" />
</shape>
</item>
<item>
<shape android:shape="oval">
<stroke android:color="#android:color/black" android:width="1dp"/>
<size android:width="60dp" android:height="60dp"/>
<solid android:color="#ff0000" />
</shape>
</item>
</layer-list>
I am trying to figure out how I would stack shapes so I can create the following ribbon(Pink/White/Pink/White/Pink part). I will then be using this as a background for my textview.
I figured it out using a layer-list
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFe5887c" />
<size android:width="2dp" android:height="2dp"/>
</shape>
</item>
<item android:top="2dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFFFF" />
<size android:width="1dp" android:height="1dp"/>
</shape>
</item>
<item android:top="3dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFe5887c" />
<size android:width="20dp" android:height="20dp"/>
</shape>
</item>
<item android:top="23dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFFFF" />
<size android:width="1dp" android:height="1dp"/>
</shape>
</item>
<item android:top="24dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFe5887c" />
<size android:width="2dp" android:height="2dp"/>
</shape>
</item>
</layer-list>