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:
Related
Am trying to achieve this without using image as background, wanted to be done in xlm drawable
Use this
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FFFFFF" />
</shape>
</item>
<item
android:bottom="0dp"
android:left="-200dp"
android:right="-200dp"
android:top="-340dp">
<shape
android:shape="oval">
<solid android:color="#color/dark_orange" />
</shape>
</item>
Change left-right margin as per your requirements. That will change curve.
I (finally) have a pretty nice drawable that I am using as a thumb for my SeekBar. It's, essentially a 20dp dark blue circle inside a 40dp light blue circle inside a 60 dp transparent circle.
However, when I touch the thumb, a "halo" (I'm sure there is a better/real word for this) expands the circle for as long as I'm touching the thumb. It's pretty big -- maybe up to 80dp -- and in a grayish color.
My question is: how do I control the size of the halo and its color. (It would be nice to be able to do it in the xml layout rather than programatically with code.)
Here's my drawable ...
<?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="#android:color/transparent"/>
<size android:width="60dp" android:height="60dp"/>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#color/colorPrimary50"/>
<stroke android:color="#android:color/transparent" android:width="20dp"/>
<size android:width="40dp" android:height="40dp"/>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#color/colorPrimary"/>
<stroke android:color="#android:color/transparent" android:width="40dp"/>
<size android:width="20dp" android:height="20dp"/>
</shape>
</item>
</layer-list>
Here's my seekbar layout
<SeekBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:thumb="#drawable/thumb"
android:splitTrack="false"
/>
Here's what I'm seeing...
Thanks in advance.
I have made a button drawable that consists of a gradient shape and a solid shape, both in a layer-list like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:height="25dp">
<shape android:shape="rectangle" >
<gradient
android:angle="90"
android:startColor="#color/greyDark1"
android:endColor="#color/greyDark2"/>
</shape>
</item>
<item android:top="25dp" android:height="25dp">
<shape android:shape="rectangle" >
<solid android:color="#color/black" />
</shape>
</item>
</layer-list>
But I can't get the corners right.
I need rounded corners around the entire shape, but not on the inside (so topRight and topLeft op the top half and bottomRight and bottomLeft for the bottom half).
If I set both halves with <corners android:radius="8dp"> the bottom corners of the top half and the top corners of the bottom half are rounded too, and that's not what I want.
If I set <corners android:topRightRadius="8dp" android:topLeftRadius"8dp"> for the top half and <corners android:bottomRightRadius="8dp" android:bottomLeftRadius"8dp"> for the bottom half the top half would be the full size of the drawable making the gradient not working properly and the bottom corners are that same color too.
Here is an image of what I'm trying to accomplish:
Does someone know a solution to this?
EDIT:
I have gotten some answers and I'm thankful for that, but sadly enough they don't seem to work.
The answers I got from bofredo and Bhuvnesh Chasta resulted in something like this:
And the answer I got from curiousMind looks pretty nice, but isn't what I'm aiming for:
FINAL EDIT:
I have discussed this problem with someone I was working with and we both agree that it isn't that important to have it look like this, so we went with a solid color.
I still want to thank everybody who helped, all the current answers will get an upvote and I will accept the answer from waqaslam because he came very close to what I wanted.
I think that's the closest you can reach to your desired drawable using xml.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<corners android:radius="2dp"/>
<gradient android:startColor="#4e4e4e" android:centerColor="#626262" android:endColor="#android:color/transparent" android:angle="270" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<corners android:radius="2dp"/>
<gradient android:startColor="#android:color/transparent" android:centerColor="#4c4c4c" android:endColor="#1c1c1c" android:angle="270" />
</shape>
</item>
Perhaps you should use 9-patch drawable to get the exact effect.
I had this problem quite some time ago aswell. You can find that question HERE
This is from the working answer:
<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="#color/cocus_orange"/>
<corners android:radius="15px"/>
<padding android:left="1dp" android:top="1dp" android:right="1dp" android:bottom="1dp" />
</shape>
</item>
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient android:angle="90"
android:startColor="#880f0f10"
android:centerColor="#880d0d0f"
android:endColor="#885d5d5e"/>
<corners
android:radius="15px" />
</shape>
</item>
</layer-list>
try like this
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="270"
android:endColor="#000"
android:startColor="#787575" />
<corners android:radius="8dip" />
Try this one. You should use to corners in shape for round to corner.
<?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="#b2d1d1ef" />
<corners android:radius="1dp"/>
</shape>
</item>
<item android:right="1dp" android:left="1dp" android:bottom="2dp" android:top="1dp">
<shape
android:shape="rectangle">
<solid android:color="#FFFFFF"/>
<corners android:radius="5dp"/>
</shape>
</item>
Found this question today and solved, I'm sharing it in case anyone else will find it unsolved as the OP wanted, and wants to know the right way as I'm sure the OP doesn't need it anymore.
I made starting point/ending point for each item's draw, the gradient for the top starts where the button starts, ends after 20dp, for the bottom starts after 20dp and it ends in the end of the button. You can even see from the attachment that it is the same as the OP's wanted result! :)
(I don't have 10 reputation to post images.)
Button Preview from Android Studio
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="20dp">
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="270"
android:startColor="#4e4e4e"
android:endColor="#626262"
android:type="linear"/>
</shape>
</item>
<item android:top="20dp">
<shape
android:shape="rectangle" >
<gradient
android:angle="270"
android:startColor="#4c4c4c"
android:endColor="#1c1c1c"
android:type="linear"/>
<corners android:bottomLeftRadius="8dp" android:bottomRightRadius="8dp"/>
</shape>
</item>
</layer-list>
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 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.