My goal is to have a drawable (shape) with this result:
What i tried so far:
triangle.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<rotate
android:fromDegrees="45"
android:toDegrees="45"
android:pivotX="87%"
android:pivotY="140%"
>
<shape
android:shape="rectangle">
<size
android:height="24dp"
android:width="24dp"
/>
<solid
android:color="#color/green" />
<corners android:radius="1dp" />
</shape>
</rotate>
</item>
</layer-list>
result_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/triangle" />
<item
android:left="24dp"
>
<shape
android:shape="rectangle">
<size
android:height="24dp"
android:width="40dp"
/>
<solid
android:color="#color/c_white" />
<corners android:radius="1dp" />
</shape>
</item>
</layer-list>
As result im getting the rectangle not aligned with the triangle and the triangle is now a rectangle with some rotation.
How can I represent this image as drawable using shapes and layer-list ?
You can try using vector to achieve what you want:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="150dp"
android:height="50dp"
android:viewportHeight="50"
android:viewportWidth="150">
<path
android:fillColor="#ff008800"
android:pathData="M0,25 50,50 50,0z" />
<path
android:fillColor="#ffbb0000"
android:pathData="M50,0 50,50 150,50 150,0z" />
</vector>
Here is the result using it as background for a TextView:
Related
i want to draw in xml with given exmaple like this.
i tried with this solution.
<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android"><item android:right="100dp">
<shape android:shape="rectangle">
<size android:height="100dp" android:width="100dp"/>
<solid android:color="#android:color/black"/>
</shape></item><item android:left="100dp"><shape android:shape="rectangle">
<size android:height="100dp" android:width="100dp"/>
<solid android:color="#android:color/holo_green_light"/>
</shape></item></layer-list>
but it doesnt have middle cut between 2 shapes.also given shape should work with any width .so dont want do define any width restrictions
result1
Try this...
use this style
<item >
<shape android:shape="rectangle">
<solid android:color="#FFCD80"/>
<corners android:radius="5dp"/>
</shape>
</item>
<item>
<rotate android:fromDegrees="45" android:toDegrees="0" android:pivotX="20%" android:pivotY="10%" >
<shape android:shape="rectangle" >
<solid android:color="#FF0000" />
<corners android:radius="5dp"/>
</shape>
</rotate>
</item>
layout
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
tools:context=".game.GameActionActivity" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button_style_twocolor_center_crossline" />
</RelativeLayout>
change color as you what.
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportHeight="24.0"
android:viewportWidth="24.0">
<path
android:fillColor="#fff8bb"
android:pathData="M0,0
L0,24
L24,24
L24,0 z" />
<path
android:fillColor="#ffc5bb"
android:pathData="M0,14
L8,24
L22,24
L8,0
L0,0z" />
</vector>
In xml file
<Button
android:layout_width="200dp"
android:layout_height="100dp"
android:background="#drawable/cust_rect"/>
I am using following XML as background to a Button in my app.
Can anyone guide me how to add 3D-effect(shadow) to it
XML:
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:pathData="M5.7,12.5l-5.7,11.5 12,0 12,0 -5.7,-11.5c-3.2,-6.3 -6,-11.5 -6.3,-11.5 -0.3,0 -3.1,5.2 -6.3,11.5z"
android:strokeColor="#00000000"
android:fillColor="#5F9999"/>
</vector>
here is a sample of gradient that you can experiment with to give the style or 3D effect .
<?xml version="1.0" encoding="utf-8"?>
<item android:state_focused="true">
<shape android:shape="rectangle" >
<corners android:radius="0dip" />
<stroke android:width="0dip" android:color="#cb1307" />
<solid android:color="#cb1307"/>
</shape>
</item>
<item >
<shape android:shape="rectangle" >
<corners android:radius="10dip" />
<gradient android:angle="270" android:startColor="#fff" android:endColor="#89F5D7" />
</shape>
</item>
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>
Hi I want to draw a slightly bend divider line between two horizontally placed textview. I don't want to put any type of image in background. I have tried using xml drawable but my code doesn't work .
<?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="100dp"
android:height="40dp" />
<solid android:color="#ff0000" />
</shape>
</item>
<item
android:right="100dp"
android:left="-180dp"
android:top="-25dp"
android:bottom="-42dp">
<rotate
android:fromDegrees="15">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</rotate>
</item>
I want to design the layout showing in image.
You could create VectorDrawable in this case. Note that in the pre-lollipop versions the images would be generated anyway, otherwise use srcCompat.
Your vector drawable could look like this:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="36dp"
android:height="24dp"
android:viewportWidth="36.0"
android:viewportHeight="24.0">
<path
android:fillColor="#FF0"
android:pathData="M0,0 L0,24 L20,24 L36,0 L0,0 Z"/>
To provide more accuracy according to your needs you should edit it yourself
More about vectors
Simple start
You can create that shape like this way
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
>
<TextView
android:id="#+id/banner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TADAA!!!"
android:gravity="center_vertical"
android:paddingLeft="5dp"
android:textColor="#android:color/black"
android:background="#drawable/myshape"
/>
</LinearLayout>
myshape.xml
<?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="100dp"
android:height="40dp" />
<solid android:color="#ff0" />
</shape>
</item>
<item
android:right="100dp"
android:left="100dp"
android:top="-100dp"
android:bottom="-100dp">
<rotate
android:fromDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</rotate>
</item>
<item
android:right="-100dp"
android:left="100dp"
android:top="-100dp"
android:bottom="-100dp">
<rotate
android:fromDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</rotate>
</item>
</layer-list>
OUTPUT
try this vector drawable in xml file
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportHeight="99.0"
android:viewportWidth="338.0">
<path
android:fillColor="#000000"
android:pathData="M0,45.5l0,40.5 163.5,0 163.5,0 0,-40.5 0,-40.5 -163.5,0 -163.5,0 0,40.5zM176,10.6c0,0.3 -10.6,16.3 -23.5,35.5l-23.6,34.9 -61.9,0 -62,0 0,-35.5 0,-35.5 85.5,0c47,0 85.5,0.3 85.5,0.6zM322,45.5l0,35.5 -93.5,0 -93.6,0 18.7,-27.8c10.3,-15.2 21.2,-31.2 24.1,-35.5l5.4,-7.7 69.5,0 69.4,0 0,35.5z"
android:strokeColor="#00000000" />
</vector>
This is how I create a rounded checkbox with boarder. But the boarder is in square shape,not circle.
CheckBox
<CheckBox
android:id="#+id/checkBox"
android:paddingTop="15dp"
android:paddingRight="25dp"
android:layout_width="25dp"
android:layout_marginLeft="320dp"
android:layout_height="25dp"
android:button="#drawable/xml_button"
android:background="#drawable/xml_background"/>
xml_button
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<shape android:shape="oval">
<solid android:color="#00FF00" />
<size
android:width="24dp"
android:height="24dp" />
</shape>
</item>
<item android:state_checked="false">
<shape android:shape="oval">
<solid android:color="#AAA" />
<size
android:width="24dp"
android:height="24dp" />
</shape>
</item>
</selector>
xml_background
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="3dp" />
<stroke
android:width="2dp"
android:color="#CCC" />
<padding
android:left="34dp"
android:top="5dp"
android:right="10dp"
android:bottom="5dp" />
</shape>
Output
Any help would be greatly appreciated. Thanks.
use this xml as background in your radio button .....
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<stroke android:color="#1E90FF" android:width="10dp" />
<solid android:color="#87CEEB"/>
</shape>
</item>
</selector>
Note:- I think your issue happened because of padding in round.xml
Output when unchecked ...
Output when checked ...