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.
Related
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:
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.
I am using the following code to get rounded corners as well as a colored outline:
<?xml version="1.0" encoding="UTF-8"?>
<gradient
android:startColor="#color/white"
android:endColor="#color/white" />
<corners
android:bottomRightRadius="2dp"
android:bottomLeftRadius="2dp"
android:topLeftRadius="2dp"
android:topRightRadius="2dp"/>
<stroke
android:width="5dip"
android:color="#color/black" />
The image displays what I'm getting right now. Due to the stroke, the rounded corners only lie on the outer edge of the layout and the inner edge of the black outline makes a rectangle with sharp edges. How can I convert the sharp edges to rounded corners?
Use the <shape> tag to create a drawable in XML with rounded corners. (You can do other stuff with the shape tag like define a color gradient as well).
Following code may help you:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ffffffff"/>
<stroke android:width="3dp"
android:color="#ff000000"
/>
<padding android:left="1dp"
android:top="1dp"
android:right="1dp"
android:bottom="1dp"
/>
<corners android:bottomRightRadius="7dp"
android:bottomLeftRadius="7dp"
android:topLeftRadius="7dp"
android:topRightRadius="7dp"/>
</shape>
Use this customize according to your need.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#android:color/transparent" />
<stroke
android:width="4dp"
android:color="#android:color/holo_blue_light" />
<corners android:radius="6dp" />
</shape>
I had this drawable to have a rounded rectangle as a background:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/white" />
<stroke android:width="1dp" android:color="#color/light_gray" />
<padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" />
<corners android:radius="6dp" />
</shape>
This is working fine, as expected.
Now, I want to change this to only round the top corners, so I change it to this:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/white" />
<stroke android:width="1dp" android:color="#color/light_gray" />
<padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" />
<corners android:topLeftRadius="6dp" android:topRightRadius="6dp"
android:bottomLeftRadius="0dp" android:bottomRightRadius="0dp"/>
</shape>
But now none of the corners are rounded and I get a plain rectangle. What am I missing here?
Try giving these values:
<corners android:topLeftRadius="6dp" android:topRightRadius="6dp"
android:bottomLeftRadius="0.1dp" android:bottomRightRadius="0.1dp"/>
Note that I have changed 0dp to 0.1dp.
EDIT: See Aleks G comment below for a cleaner version
Try to do something like this:
<?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">
<shape android:shape="rectangle">
<solid android:color="#color/white" />
<corners android:radius="20dp" />
</shape>
</item>
</layer-list>
It seems does not suitable to set different corner radius of rectangle. So you can use this hack.
In my case below code
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="10dp" android:bottom="-10dp"
>
<shape android:shape="rectangle">
<solid android:color="#color/maincolor" />
<corners
android:topLeftRadius="10dp"
android:topRightRadius="10dp"
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"
/>
</shape>
</item>
</layer-list>
bg.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF"/>
<corners android:topLeftRadius="24dp" android:topRightRadius="24dp"
android:bottomLeftRadius="0dp" android:bottomRightRadius="0dp"/>
</shape>
add in your layout:
android:background="#drawable/bg"
Building upon busylee's answer, this is how you can make a drawable that only has one unrounded corner (top-left, in this example):
<?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="#color/white" />
<!-- A numeric value is specified in "radius" for demonstrative purposes only,
it should be #dimen/val_name -->
<corners android:radius="10dp" />
</shape>
</item>
<!-- To keep the TOP-LEFT corner UNROUNDED set both OPPOSITE offsets (bottom+right): -->
<item
android:bottom="10dp"
android:right="10dp">
<shape android:shape="rectangle">
<solid android:color="#color/white" />
</shape>
</item>
</layer-list>
Please note that the above drawable is not shown correctly in the Android Studio preview (2.0.0p7). To preview it anyway, create another view and use this as android:background="#drawable/...".
try to use MaterialShapeDrawable and configure it in kotlin/java code.
val backgroundShapeModel:ShapeAppearanceModel = ShapeAppearanceModel.builder()
.setTopLeftCorner(CornerFamily.ROUNDED, 16F.toPx)
.setTopRightCorner(CornerFamily.ROUNDED, 16F.toPx)
.build()
textView.background = MaterialShapeDrawable(backgroundShapeModel).apply {
fillColor = ColorStateList.valueOf(Color.GREEN)
}
P.S:
In addition to abilities that xml drawables provides (fillColor, stroke...), MaterialShapeDrawable supports:
cornerFamily in two category: rounded and cut
edgeTreatment with TriangleEdgeTreatment, OffsetEdgeTreatment, ...
doesn't need to context and getting resource
]
val backgroundShapeModel = ShapeAppearanceModel.builder()
.setTopLeftCorner(CornerFamily.ROUNDED, 16F.toPx)
.setTopRightCorner(CornerFamily.CUT, 16F.toPx)
.setAllEdges(TriangleEdgeTreatment(5f.toPx, true))
.build()
textView.background = MaterialShapeDrawable(backgroundShapeModel).apply {
fillColor = ColorStateList.valueOf(Color.GREEN)
setStroke(2f.toPx,Color.RED)
}
You may need read this https://developer.android.com/guide/topics/resources/drawable-resource.html#Shape
and below there is a Note.
Note Every corner must (initially) be provided a corner radius greater than 1, or else no corners are rounded. If you want specific corners to not be rounded, a work-around is to use android:radius to set a default corner radius greater than 1, but then override each and every corner with the values you really want, providing zero ("0dp") where you don't want rounded corners.
Create roung_top_corners.xml on drawable and copy the below code
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:topLeftRadius="22dp"
android:topRightRadius="22dp"
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"
/>
<gradient
android:angle="180"
android:startColor="#1d2b32"
android:centerColor="#465059"
android:endColor="#687079"
android:type="linear" />
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<size
android:width="270dp"
android:height="60dp"
/></shape>
I tried your code and got a top rounded corner button. I gave the colors as #ffffff and stroke I gave #C0C0C0.
try
Giving android : bottomLeftRadius="0.1dp" instead of 0. if its not working
Check in what drawable and the emulator's resolution. I created a drawable folder under res and using it. (hdpi, mdpi ldpi) the folder you have this XML.
this is my output.
Try removing these attributes altogether.
android:bottomLeftRadius="0dp" android:bottomRightRadius="0dp"
In My android xml layout i am applying the border by using the borderframe.xml as a background.
borderframe.xml file is looks like below:
<?xml version="1.0" encoding="UTF-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
android:width="1dip"
android:color="#ffffff"/>
<solid
android:color="#95865F"/>
<corners
android:radius="10px"/>
<padding
android:left="1dp"
android:right="1dp"
android:top="1dp"
android:bottom="1dp"/>
</shape>
Now, While there is a android:radius="10px" then it is works but while i am going to give round shape to specific corner only then it not works.
There is no any erro message in log cat but i found error in eclipse like:
The graphics preview in the layout editor may not be accurate:
* Different corner sizes are not supported in Path.addRoundRect.
Even if there is no padding in that xml file then also i am not able to see any border.
Now, what should i have to do for it ?
and whats the sollution of it if i want to create the rounded border for only topLeftcorner and bottomLeftCorner. ?
Thanks.
I am also facing the same problem. But for that I use layer-list. I post my answer here which may help you. Please check output screen
<?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="1dp" android:color="#c1c1c1" />
<solid android:color="#c1c1c1" />
<corners android:radius="20dp"/>
</shape>
</item>
<item android:right="20dp"
>
<shape
android:shape="rectangle">
<stroke android:width="1dp" android:color="#c1c1c1" />
<solid android:color="#c1c1c1" />
</shape>
</item>
</layer-list>
You'll have to do that, assuming you only want a rounded top left corner:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:radius="20sp"
android:topRightRadius="0dp"
android:bottomRightRadius="0dp"
android:bottomLeftRadius="0dp" />
<gradient
android:startColor="#color/logo_blue"
android:endColor="#color/blue"
android:angle="0"/>
</shape>
Explanation: Every corner must (initially) be provided a corner radius greater than 1, or else no corners are rounded. If you want specific corners to not be rounded, a work-around is to use android:radius to set a default corner radius greater than 1, but then override each and every corner with the values you really want, providing zero ("0dp") where you don't want rounded corners. [source]
As a consequence, you need to define your drawable as:
<?xml version="1.0" encoding="UTF-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
android:width="1dip"
android:color="#ffffff"/>
<solid
android:color="#95865F"/>
<corners
android:radius="10px"
android:topRightRadius="0dp"
android:bottomRightRadius="0dp" />
<padding
android:left="1dp"
android:right="1dp"
android:top="1dp"
android:bottom="1dp"/>
</shape>
Update
From The Shape Drawable Resource Android Documentation:
android:radius
Dimension. The radius for all corners, as a dimension
value or dimension resource. This is overridden for each corner by the
following attributes.
overridden is the keyword for your problem…
I'm using SDK tools 19, platform-tools 11 and running the app in Android 4.0.3. Using the following XML works for me:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#dd000000"/>
<padding
android:left="7dp"
android:top="7dp"
android:right="7dp"
android:bottom="7dp" />
<corners
android:bottomLeftRadius="25dp"
android:bottomRightRadius="25dp"
android:topLeftRadius="0dp"
android:topRightRadius="0dp" />
</shape>
The Eclipse warning is about not being able to show the preview. In het app it shows up correct.
I got the solution on one of the forums. I solved it by commenting each corner & adding to the xml in drawable. I have retained commented code below only for understanding.
XML Code-
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<solid android:color="#fd2149" />
<stroke android:width="1dip" android:color="#ffd102"/>
<!-- <corners
android:bottomLeftRadius="8dp"
android:bottomRightRadius="8dp"
android:topLeftRadius="8dp"
android:topRightRadius="8dp" />
-->
<corners android:radius="8dp" />
</shape>
---Edited-
The above code is my back.xml in drawable folder and if required you can add padding to the same back.xml. For those who are new developers, the back.xml is referenced from your layout file as follows
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tableLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="20sp"
android:scrollbars="vertical"
android:background="#drawable/back">
Hope this helps.