I wish to make a diamond as a resource file so I am rotating a square in order to do so. The problem is that the corners seem to be getting cut off, making a hexagon instead. Also as a side note, I'd like to stretch it vertically if that's possible.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<rotate
android:fromDegrees="45"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="45"
>
<shape android:shape="rectangle">
<size
android:height="40dp"
android:width="40dp" />
<solid
android:color="#color/level_1_color" />
</shape>
</rotate>
</item>
Heres how:
**<item android:left="5dp" android:right="5dp" android:top="5dp" android:bottom="5dp">**
<rotate
android:fromDegrees="45"
android:toDegrees="45" >
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#color/sym_orange_bdfm"/>
<size
android:width="23dp"
android:height="23dp"/>
</shape>
</rotate>
</item>
Adjust Left/Right/Top/Bottom as needed.
This was already solved here: Diamond shape xml background for android view
Just change fill color and stroke width according to your needs.
I am searching for rotate the square this help
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="20dp"
android:left="20dp"
android:right="20dp"
android:top="20dp">
<rotate
android:drawable="#color/colorAccent"
android:fromDegrees="-135"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="-45"
android:visible="true">
<shape android:shape="rectangle">
<solid android:color="#color/colorPrimaryDark" />
<corners android:radius="15dp" />
<size
android:width="90dp"
android:height="90dp" />
<solid
android:angle="45"
android:endColor="#color/colorAccent"
android:gradientRadius="34"
android:startColor="#color/colorPrimary" />
</shape>
</rotate>
</item>
</layer-list>
But I follow some ratio relationship for height and width 90dp and item top ,bottom,left ,right are 20dpenter image description here
Related
Well, I want to do a drawable or a custom view like this. Does anyone know if there is a way to do this? I could not find. Ignore the "12:00", i just want to do an background with this diagonal line.
<?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="6dp" />
<solid android:color="#f5f5f5" />
</shape>
</item>
<item>
<rotate
android:fromDegrees="25"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="25">
<shape android:shape="line">
<stroke
android:width="1dp"
android:color="#e0e0e0" />
</shape>
</rotate>
</item>
</layer-list>
how to achieve rounded corner and a diagonal shape as shown in figure in android shape xml? Thanks
You can use rotate element with 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">
<stroke
android:dashGap="5dp"
android:dashWidth="8dp"
android:width="8dp"
android:color="#989898"/>
<corners android:radius="10dp"/>
</shape>
</item>
<item>
<rotate
android:fromDegrees="60"
android:toDegrees="45"
android:pivotX="50%"
android:pivotY="50%">
<shape
android:shape="line">
<stroke
android:dashGap="5dp"
android:dashWidth="8dp"
android:width="8dp"
android:color="#989898"/>
</shape>
</rotate>
</item>
</layer-list>
I am trying to achieve an a bordered tooltip like this (well not exactly, just the part where I want to have a smooth border):
So far, this is what I have tried:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:gravity="top|right">
<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">
<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>
Here's my output:
I got something working, though it's not perfect. Here's the output:
Notice the edges are not very smooth. Here's the modified code:
<?xml version="1.0" encoding="utf-8"?>
<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>
You should just use 9-patch. On Android Studio, choose "create 9-patch file" :
Then, have the left and top marking for the parts you wish to duplicate the larger/smaller you have the image.
And have the right and bottom markings for the parts you wish to have the content.
On many cases, those are the same areas. but on your case, I think it won't be as such.
I also suggest to make the image as small as possible, so that it will take minimal size that you allow it to be. This would save a bit of space.
You can read more about those on the docs:
https://developer.android.com/guide/topics/graphics/drawables#nine-patch
https://developer.android.com/studio/write/draw9patch
I am trying to design a layout using xml. it's a chat bubble layout. I just need a shape to be place after a shape. basically i am using 2 rectangles 1 rectangle rotated by 45 degree. i need tilted rectangle to placed after a normal rectangle.
<?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="0%"
android:pivotY="0%"
android:toDegrees="0" >
<shape android:shape="rectangle" >
<solid android:color="#color/chat_incoming_color" />
</shape>
</rotate>
</item>
<item android:left="16dp">
<shape android:shape="rectangle" >
<solid android:color="#color/chat_incoming_color" />
<corners android:radius="4dp" />
</shape>
</item>
</layer-list>
http://imgur.com/j556772
image is shown in the link in that image first part is ok but second layout's background should be made accordingly..
Try this I hope it will help you to understand your problem.
<?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="-35%"
android:pivotY="91%"
android:toDegrees="0">
<shape>
<solid android:color="#android:color/darker_gray"/>
</shape>
</rotate>
</item>
<item android:left="16dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/darker_gray"/>
<corners android:radius="4dp"/>
</shape>
</item>
</layer-list>
I wish to use a button of this shape,pointing to right or left in my app.
Two corners of the button are rounded, and the other side is triangular.
I was able to accomplish this somewhat using a png image as background, but I would prefer to know how to do it in xml.
Not sure about the exact way to do that, but you could always increase the radius of the topLeft and bottomLeft or Right to maximum, to get a semicircular pointing end.
This is how I tried to do it
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:topLeftRadius="100dp"
android:topRightRadius="31dp"
android:bottomLeftRadius="100dp"
android:bottomRightRadius="31dp"
/>
<gradient
android:angle="45"
android:centerX="35%"
android:centerColor="#7995A8"
android:startColor="#E8E8E8"
android:endColor="#000000"
android:type="linear"
/>
<size
android:width="172dp"
android:height="60dp"
/>
<stroke
android:width="3dp"
android:color="#878787"
/>
</shape>
This is how it looks..
The usual practice is to use images for complex shapes. In case you a trying to control the app size, you could use one image that points in one direction and rotate it in drawable xml to point the other way.
However, if you really want implement this in xml, I have got a triangle pointing left/ right below. You can try improving on this to suit your requirement.
Right Pointing,
<?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="0%"
android:pivotY="0%"
android:toDegrees="0">
<shape android:shape="rectangle">
<solid android:color="#color/colorAccent" />
</shape>
</rotate>
</item>
</layer-list>
Left Pointing,
<?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="100%"
android:pivotY="0%"
android:toDegrees="0">
<shape android:shape="rectangle">
<solid android:color="#color/colorAccent" />
</shape>
</rotate>
</item>
</layer-list>
You can make a shape like that using layer list, read more about layer list here. This should give you the desired output :
<?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="#5e88b8" />
<corners android:topRightRadius="3dp" android:bottomRightRadius="3dp" android:radius="0dp"/>
</shape>
</item>
<item
android:top="-40dp"
android:bottom="65dp"
android:left="-30dp">
<rotate
android:fromDegrees="-45">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</rotate>
</item>
<item
android:top="65dp"
android:bottom="-40dp"
android:left="-30dp">
<rotate
android:fromDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</rotate>
</item>
</layer-list>
and then set it as the button background :
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button_background"
android:text="button" />
OUTPUT :
UPDATE
Change the corner radius to get the desired corner look.
You can use a MaterialButton with the shapeAppearanceOverlay attribute:
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="BUTTON"
app:shapeAppearanceOverlay="#style/ShapeAppearanceOverlay.App.CutAndRound"
/>
with:
<style name="ShapeAppearanceOverlay.App.CutAndRound" parent="">
<item name="cornerFamilyBottomLeft">cut</item>
<item name="cornerFamilyTopLeft">cut</item>
<item name="cornerSizeBottomLeft">50%</item>
<item name="cornerSizeTopLeft">50%</item>
</style>