I am trying to get a circle with a tick mark in the middle using a shape drawable.
This is what I would like:
Could you please suggest me how to approach it?
Try this:
<vector android:height="45dp"
android:viewportHeight="45" android:viewportWidth="45"
android:width="45dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#F2F2F2" android:fillType="evenOdd"
android:pathData="M22.5,22.5m-22.5,0a22.5,22.5 0,1 1,45 0a22.5,22.5 0,1 1,-45 0"
android:strokeColor="#00000000" android:strokeWidth="1"/>
<path android:fillColor="#F7286F" android:fillType="nonZero"
android:pathData="M21.7692,31.1334C20.5904,32.2889 18.6777,32.2889 17.4994,31.1334L10.8841,24.6492C9.7053,23.4943 9.7053,21.6195 10.8841,20.4646C12.0623,19.3092 13.975,19.3092 15.1538,20.4646L19.0952,24.3274C19.3928,24.6185 19.8758,24.6185 20.1739,24.3274L30.8462,13.8666C32.0244,12.7111 33.9371,12.7111 35.1159,13.8666C35.682,14.4214 36,15.1742 36,15.9589C36,16.7435 35.682,17.4963 35.1159,18.0511L21.7692,31.1334Z"
android:strokeColor="#00000000" android:strokeWidth="1"/>
That drawable is like below:
you can try this
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<size
android:width="32dp"
android:height="32dp" />
<solid android:color="#fff" />
</shape>
</item>
<item
android:width="18dp"
android:height="4dp"
android:gravity="center"
android:right="18dp"
android:top="15dp">
<rotate android:fromDegrees="40">
<shape android:shape="rectangle">
<gradient
android:angle="-180"
android:endColor="#FF0066"
android:startColor="#D6006C" />
</shape>
</rotate>
</item>
<item
android:width="64dp"
android:height="64dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/transparent" />
</shape>
</item>
<item
android:width="32dp"
android:height="4dp"
android:gravity="center"
android:left="12dp"
android:top="4dp">
<rotate android:fromDegrees="-50">
<shape android:shape="rectangle">
<gradient
android:angle="-90"
android:endColor="#FF0066"
android:startColor="#D6006C" />
</shape>
</rotate>
</item>
</layer-list>
This code should work :
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:ignore="UnusedResources">
<item>
<shape android:shape="oval">
<solid android:color="#android:color/black"/> //enter the color you want
<size
android:width="64dp"
android:height="64dp"/>
</shape>
</item>
<item>
<bitmap android:src="#drawable/ic_check_white_36dp"
android:gravity="center"/>
</item>
Try to go with a vector Drawable. If you have two or more different drawables you can make a layer out of them.
However the following code would do the work.
<?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="30dp"
android:height="30dp"/>
</shape>
</item>
<item
android:width="18dp"
android:height="3dp"
android:top="15dp"
android:right="17dp"
android:gravity="center">
<rotate
android:fromDegrees="40">
<shape android:shape="rectangle">
<solid android:color="#D6006C"/>
</shape>
</rotate>
</item>
<item
android:width="30dp"
android:height="3dp"
android:left="12dp"
android:top="4dp"
android:gravity="center"
>
<rotate
android:fromDegrees="-50">
<shape android:shape="rectangle">
<solid android:color="#D6006C"/>
</shape>
</rotate>
</item>
<item
android:width="60dp"
android:height="60dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/transparent"/>
</shape>
</item>
</layer-list>
This will create a tick with a gradient tick mark.
<?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="30dp"
android:height="30dp"/>
</shape>
</item>
<item
android:width="18dp"
android:height="3dp"
android:top="15dp"
android:right="17dp"
android:gravity="center">
<rotate
android:fromDegrees="40">
<shape android:shape="rectangle">
<solid android:color="#D6006C"/>
</shape>
</rotate>
</item>
<item
android:width="30dp"
android:height="3dp"
android:left="12dp"
android:top="4dp"
android:gravity="center"
>
<rotate
android:fromDegrees="-50">
<shape android:shape="rectangle">
<gradient android:startColor="#D6006C"
android:endColor="#491F2B"/>
</shape>
</rotate>
</item>
<item
android:width="60dp"
android:height="60dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/transparent"/>
</shape>
</item>
</layer-list>
First create a vector with tick icon with gradient "ic_tick_vector" Requires api lvl 21 or above
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:pathData="M9,16.17L4.83,12l-1.42,1.41L9,19 21,7l-1.41,-1.41z"
android:strokeColor="?android:attr/colorAccent"
android:strokeWidth="0">
<aapt:attr name="android:fillColor">
<gradient
android:endX="10"
android:endY="20"
android:startX="1"
android:startY="20"
android:type="linear">
<item
android:color="?android:attr/colorAccent"
android:offset="0.0" />
<item
android:color="?android:attr/colorPrimaryDark"
android:offset="1.0" />
</gradient>
</aapt:attr>
</path>
<path android:strokeWidth="0.1"
android:strokeColor="#color/colorAccent"
android:pathData="M0,80 H100" />
</vector>
then create a drawable with circle background "round_background"
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:shape="oval">
<stroke android:color="#557C7373" android:width="10dp"/>
<solid android:color="#color/lightBlue"/>
<size android:width="150dp" android:height="150dp"/>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#color/white"/>
<size android:width="100dp" android:height="100dp"/>
</shape>
</item>
</selector>
Use this in your imageview now u will have rounded background with tick item at center (gradient)
<ImageView
android:background="#drawable/round_background"
android:layout_gravity="center"
android:src="#drawable/ic_tick_vector" />
Related
I am new to android and I wish to achieve a tooltip with border. Tooltip pointing to left.
i.e: like below with text of choice.
please help me with this, stuck with this for quite sometime now.
I was able to create a tooltip at top righ but how to get it in left ceter_verticle like the diagram.
my code looks like.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:gravity="top|right" android:right="10dp">
<rotate android:fromDegrees="45" android:toDegrees="0"
android:pivotX="50%" android:pivotY="0%" >
<shape android:shape="rectangle">
<size android:width="24dp" android:height="24dp" />
<stroke android:color="#android:color/holo_blue_bright" android:width="1dp"/>
</shape>
</rotate>
</item>
<item>
<shape android:shape="rectangle">
<size android:width="206dp" android:height="76dp" />
<solid android:color="#color/white"/>
<stroke android:color="#android:color/holo_blue_bright" android:width="1dp"/>
<corners android:radius="2dp" />
</shape>
</item>
<item android:gravity="top|right" android:right="10dp" android:top="1dp">
<rotate android:fromDegrees="45" android:toDegrees="0"
android:pivotX="50%" android:pivotY="0%" >
<shape android:shape="rectangle">
<size android:width="24dp" android:height="24dp" />
<solid android:color="#color/white"/>
</shape>
</rotate>
</item>
</layer-list>
Try the below code:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:left="16dp"
android:right="16dp"
android:top="17dp"
android:bottom="17dp">
<shape android:shape="rectangle">
<solid android:color="#FFFFFF" />
<corners android:radius="15dp" />
</shape>
</item>
<item
android:bottom="345dp"
android:right="360dp"
android:top="345dp">
<rotate
android:fromDegrees="-45"
android:pivotX="10%"
android:pivotY="10%"
android:toDegrees="0">
<shape android:shape="rectangle">
<solid android:color="#FFFFFF" />
</shape>
</rotate>
</item>
<item
android:bottom="350dp"
android:right="350dp"
android:top="350dp">
<rotate
android:fromDegrees="-45"
android:pivotX="1%"
android:pivotY="-5%"
android:toDegrees="0">
<shape android:shape="rectangle">
<solid android:color="#000000" />
</shape>
</rotate>
</item>
<item
android:bottom="19dp"
android:left="19dp"
android:right="19dp"
android:top="19dp">
<shape android:shape="rectangle">
<solid android:color="#000000" />
<corners android:radius="15dp" />
</shape>
</item>
</layer-list>
Hi anyone please suggest me how to create android xml drawable like below image?
Now I am using below code
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<rotate
android:fromDegrees="45"
android:pivotX="-40%"
android:pivotY="87%"
android:toDegrees="45">
<shape android:shape="rectangle">
<stroke
android:width="10dp"
android:color="#color/colorAccent" />
<solid android:color="#color/colorAccent" />
</shape>
</rotate>
</item>
</layer-list>
but its result is triangle but I need above shape.
Check this,
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="43dp"
android:top="43dp"
android:right="43dp"
android:bottom="43dp">
<rotate android:fromDegrees="45">
<shape>
<size
android:width="200dp"
android:height="200dp" />
<gradient
android:startColor="#0fdcc9"
android:endColor="#0fdcc9" />
<stroke
android:width="5dp"
android:color="#2DACA0" />
</shape>
</rotate>
</item>
</layer-list>
This is my drawable file for diamond shape ic_diamond.xml file.
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="372.7dp"
android:height="367.4dp"
android:viewportWidth="372.7"
android:viewportHeight="367.4">
<path
android:fillColor="#50AE89"
android:strokeColor="#266D4F"
android:strokeWidth="5"
android:strokeMiterLimit="10"
android:pathData="M188.706,51.8702 L318.105,181.269 L183.968,315.406 L54.5691,186.007
L188.706,51.8702 Z" />
</vector>
I include this in simple view:
<View
android:layout_width="100dp"
android:layout_height="40dp"
android:layout_centerInParent="true"
android:background="#drawable/ic_diamond"
/>
Here, is the result:
i fixed with this tutorial
here
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="43dp"
android:left="43dp"
android:right="43dp"
android:state_pressed="true"
android:top="43dp">
<rotate android:fromDegrees="45">
<shape>
<size
android:width="200dp"
android:height="200dp" />
<gradient
android:endColor="#color/colorPrimaryDark"
android:startColor="#color/colorPrimaryDark" />
<stroke
android:width="5dp"
android:color="#color/colorPrimary" />
<corners android:radius="7dp" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
</shape>
</rotate>
</item>
</layer-list>
Here is a drawable resource which creates a 200dp square and rotates it 45° to form a diamond shape:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="50dp"
android:left="50dp"
android:right="50dp"
android:top="50dp">
<rotate android:fromDegrees="45">
<shape>
<size
android:width="200dp"
android:height="200dp"/>
<stroke
android:width="10dp"
android:color="#358165"/>
<solid android:color="#69BE9E"/>
</shape>
</rotate>
</item>
</layer-list>
I'm having an issue with my custom checkbox in that the selector does not show the white rounded rectangle with a yellow stroke when unchecked?
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<layer-list>
<item>
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
<stroke android:width="4px" android:color="#color/colourAccent" />
<size android:width="36dp" android:height="36dp" />
<corners android:radius="2dp" />
</shape>
</item>
<item>
<vector
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="#color/colourAccent"
android:pathData="M9,16.17L4.83,12l-1.42,1.41L9,19 21,7l-1.41,-1.41z"/>
</vector>
</item>
</layer-list>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
<stroke android:width="4px" android:color="#color/colourAccent" />
<corners android:radius="2dp" />
<size android:width="36dp" android:height="36dp" />
</shape>
</item>
</selector>
For the life of me I am unable to figure out the issue nor discover the fix
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>