How to create Rectangle Shape with inside round corners - android

I want to create Drawable like the White Shape shown in above Image.
I tries it using following code
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" >
<corners android:radius="40dp" />
<solid android:color="#android:color/transparent" />
<stroke
android:width="3dp"
android:color="#android:color/white" />
<size
android:height="150dp"
android:width="150dp" /></shape>
But I'm getting Output like this..
I also tried layer-list with multiple Shapes but not able to get the desired output..
Also my ImageView's height and width are calculated in code..so I also don't want to pass size in drawable. Is it possible??

You can draw the shape with 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="rectangle">
<solid android:color="#fff" ></solid>
<size
android:width="100dp"
android:height="100dp"/>
</shape>
</item>
<item android:top="5dp" android:bottom="5dp" android:left="5dp" android:right="5dp">
<shape android:shape="rectangle">
<corners android:radius="10dp" />
<solid android:color="#000" ></solid>
<size
android:width="90dp"
android:height="90dp"/>
</shape>
</item>
</layer-list>
We draw two items upon each other. A white square on first layer and put another black square with 10dp radius and 5dp padding inside white square.
Also you can control width and height of the imageView which your drawable assigned, it scales accordingly.

Related

Vertical Drawable Line on Left Border of Drawable Rectangle?

I have been looking for similar questions and I cannot find anything that is exactly what I am looking for. I have also been messing around with this XML for quite some time, and I do not want to have to import any libraries or use Drawing code to make this square border.
As you can see, there is an orange line that is behind the white border.
This is as close as I have gotten:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<rotate android:fromDegrees="90">
<shape android:shape="line" android:thickness="3dp">
<padding android:left="120dp"/>
<stroke android:width="3dp" android:color="#F4900A"/>
</shape>
</rotate>
</item>
<item>
<shape
android:shape="rectangle">
<stroke android:width="1dp" android:color="#color/white"/>
<solid android:color="#00FF0000"/>
<corners android:radius="16dp"/>
</shape>
</item>
<!-- Background is transparent -->
<item>
<shape
android:shape="rectangle">
<stroke android:width="1dp" android:color="#00000000" />
<solid android:color="#00000000" />
</shape>
</item>
</layer-list>
Any help would be greatly appreciated, I feel like I am close but I am not sure how to move this line to the left without having it scale down in size? I have been messing around with the padding and it just seems jank.
Note: I have also tried setting the white border to have a orange gradient left side, and it didn't look right - so I don't think that gradient is an option.
This can be achieved with:
A normal rectangle as the outer white border
An orange solid rectangle to represent the left line that has android:gravity="left" to position it to the left and the paddings adjusted to displace the left line to the right, top, and bottom as you need
<?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:width="2dp"
android:color="#color/white" />
<corners android:radius="20dp" />
</shape>
</item>
<item
android:bottom="15dp"
android:gravity="left"
android:left="1dp"
android:top="15dp">
<rotate android:fromDegrees="180">
<shape android:shape="rectangle">
<solid android:color="#FF9800" />
<size android:width="3dp" />
</shape>
</rotate>
</item>
</layer-list>
Previews with different TextView sizes:

Android - Drawable XML containing image on left and solid color to fill width

I'm trying to create an XML drawable which will have an image on the left, and then a solid background which will fill the rest of the width where ever the drawable is used. The background color is the same color I have in the image itself, and the purpose is to continue the color for the full width.
I've tried this, but this just gives me the image in the center of the View which I apply it to. What I want is the image on the left, and then to the right of the image the background color to fill whatever remaining space is left.
<?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="#00355f"/>
</shape>
</item>
<item
android:drawable="#drawable/bg_navbar"
android:gravity="center_vertical|start"/>
</layer-list>
The obvious solution is to make a LinearLayout with my background color and then drop the image into it, but since this is used throughout my app, I was hoping to be able to create an XML drawable resource instead.
Try the below code snippet. I hope it will help you.
<?xml version="1.0"
encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item>
<shape>
<gradient android:angle="90"
android:endColor="#ffffff"
android:startColor="#ffffff"
android:type="linear" />
<stroke android:width="1dp"
android:color="#dddbda" />
<corners android:radius="5dp" />
<padding android:bottom="10dp"
android:left="3dp"
android:right="10dp"
android:top="3dp" />
</shape>
</item>
<item>
<bitmap android:gravity="bottom|left"
android:src="#drawable/drdw" />
</item>
</layer-list>
</item>
</selector>

Shape with multiple circles

I want to draw a circle of color 1 inside a circle of color 2. Both of them have stroke and its inside is transparent. This should be used as a background of a button.
Something like this (but green and red are next to each other - no gap in between. Sorry, I don't have any graphical program where I could draw them so they're next to each other.)
Is there a way how to do it in XML ?
I was thinking of doing it using shape XML but layers are scaled so layers would be on top of each other so only 1 color would be visible.
You use a layer list with insets in order to avoid the inner circle to lurk out from the outer circle, like this:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<stroke
android:width="4dp"
android:color="#android:color/holo_red_dark" />
</shape>
</item>
<item>
<inset android:inset="4dp">
<shape android:shape="oval">
<stroke
android:width="4dp"
android:color="#android:color/holo_green_dark" />
</shape>
</inset>
</item>
</layer-list>
You set the size and background of the button like this:
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#drawable/red_green" />
It then looks like this:
Try something like 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:height="10dp" android:width="10dp"/>
<stroke
android:width="2dp"
android:color="#FF0000"
/>
</shape>
</item>
<item>
<shape android:shape="oval">
<stroke
android:width="1dp"
android:color="#00FF00"
/>
</shape>
</item>
</layer-list>
You can change the width and height of the size element to get a different ring width.
You can achieve this by defining two drawable resources both circle with different stroke colors and puting them in a layer-list drawable one on top of the other, with different ofsets which give then the effect you need:
Inner circle inner.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke android:color="#color/colorRed"
android:width="2dp"/>
</shape>
Outer circle outer.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke android:color="#color/colorGreen"
android:width="2dp"/>
</shape>
Button background background.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/outer"
android:right="0dp"
android:top="0dp"
android:bottom="0dp"
android:left="0dp"
android:gravity="center"/>
<item android:drawable="#drawable/inner"
android:right="4dp"
android:top="4dp"
android:bottom="4dp"
android:left="4dp"
android:gravity="center"/>
</layer-list>
And this is final result

Rounded rectangle with stroke on top android drawable XML

I was trying to make a drawable using XML in android. The requirement is I need to have a rounded rectangle(all 4 corners rounded) with a stroke of 7dp height only on the top edge. I am using the following XML for that:
<?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:width="5dp" android:color="#color/theme_color" />
<solid android:color="#color/theme_color" />
<corners
android:radius="7dp"/>
<padding android:top="7dp"/>
</shape>
</item>
<item>
<shape
android:shape="rectangle">
<stroke android:width="1dp" android:color="#color/designer_cell_background" />
<solid android:color="#color/designer_cell_background" />
<corners
android:radius="7dp"
android:topRightRadius="0dp"
android:topLeftRadius="0dp"/>
<padding android:bottom="1dp"/>
</shape>
</item>
</layer-list>
I am getting this working almost OK, except that the bottomRight and bottomLeft corners are not rounded.
Question - 1 : How to get the bottom corners rounded?
Question - 2 : Is this the correct way to achieve what I actually want? Is there a better way? I am asking this because, I understand what I do here is actually making two rectangles, one on top of another, the second one is being slightly lowered from the top edge of the first rectangle so that the color of the first rectangle appears as a line on top of the second one. And then adding corner radius to each rectangle individually. I don't think it is the right solution. But I failed when I tried to add a stroke of 7dp width to the top of a rounded rectangle. The stroke I gave was appearing on all the edges.
EDIT
Here is what I want:
And this is what I currently get:
<stroke
android:width="1dp"
android:color="#FFFFFF" />
<solid android:color="#ffffff" />
<padding
android:left="0dp"
android:right="0dp"
android:top="0dp" />
<corners android:radius="12dp" />
</shape>
ur using the radius value increased curve shape wil increase
try this is works let me know
this tool is helps me you can also get help from it
http://angrytools.com/android/button/
<?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:width="5dp" android:color="#color/theme_color" />
<solid android:color="#color/theme_color" />
<corners
android:radius="7dp"/>
<padding android:top="7dp"/>
</shape>
</item>
<item>
<shape
android:shape="rectangle">
<stroke android:width="1dp" android:color="#color/designer_cell_background" />
<solid android:color="#color/designer_cell_background" />
<corners
android:topLeftRadius="0dp"
android:topRightRadius="0dp"
android:bottomLeftRadius="7dp"
android:bottomRightRadius="7dp"/>
<padding android:bottom="1dp"/>
</shape>
</item>
i think you should create 2 shapes the black one and the red one, just overlay the other shape to become the image you're looking for. you can't accomplish that with one shape in android.

Android xml shape drawable - how to draw a u-form?

I need to create a xml shape drawable that draws a rectangle without the top-line (a "u-form"). What I am able to do is draw a rectangle, like so:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#color/detailrow_bg_normal" />
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"
android:radius="1dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp" />
<padding
android:bottom="2dip"
android:left="1.5dip"
android:right="1.5dip"
android:top="8dip" />
<stroke
android:width="1dip"
android:color="#color/detailtable_border" />
But how - if possible, can I define the same shape without the top (or bottom) line?
You could try using a layer-list. See if something like this would work:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<solid android:color="#color/detailtable_border" />
</shape>
</item>
<item android:left="1.5dp" android:right="1.5dp" android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="#color/detailrow_bg_normal" />
</shape>
</item>
</layer-list>
This (should) fill the rectangle with the border color, then overlay it with the default background color, leaving the appropriate amount of the right/left/bottom border color showing.
try this code and also refer this link:::
I achieved a good solution with this one:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- This is the line -->
<item android:top="-1dp" android:right="-1dp" android:left="-1dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke android:width="1dp" android:color="#ffffff" />
</shape>
</item>
</layer-list>
This works well in case you need a transparent color but still an open stroke color (In my case i only needed a bottom line). If you need a background color you can add a solid shape color as in above answer.
You might be able to achieve this using two shapes and a LayerList, but I think it is both a better solution and easier to use a NinePatch-drawable.

Categories

Resources