I'm trying to create a drawable to act as the background for one of my layouts, and can't get it to display two solid colours divided in the middle.
Currently I'm attempting to use a layer-list with the background being solid, and an overlay of a semi transparent white rectangle to tint the original solid background colour along the top half of the rectangle. It doesn't need to be done like this though.
Gradient will not work unless you can find a way to make the transition immediate.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<size android:height="#dimen/basic_runners_height"></size>
<solid android:color="#color/brb_orange"
android:gravity="bottom"></solid>
</shape>
</item>
<item>
<shape android:shape="rectangle">
<size android:height="#dimen/basic_runners_height_halved"></size>
<solid android:color="#color/md_white_1000"
android:alpha="127"
android:gravity="top"></solid>
</shape>
</item>
So, my understanding of this is that there should be two shapes, one half the size of the other. The first shape covers the whole drawable in orange and the other is white, and ~50% transparent (alpha = 127), takes up half the drawable and gravitates toward the top.
The preview of the drawable is fully white, without a hint of orange. What am I doing wrong?
Edit:
Right, to make this even simpler, I've added the tinted colour to my #color so that I don't even need to bother with transparency. The XML is as shown below:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top="#dimen/basic_runners_height_halved">
<shape android:shape="rectangle" >
<size android:height="#dimen/basic_runners_height_halved" />
<solid android:color="#color/brb_orange_tint" />
</shape>
</item>
<item android:top="#dimen/basic_runners_height">
<shape android:shape="rectangle" >
<size android:height="#dimen/basic_runners_height" />
<solid android:color="#color/brb_orange" />
</shape>
</item>
But this doesn't even do the trick... runners_height_halved is half the dp of runners_height but this doesn't split it down the middle. Maybe 10% of the drawable is the tinted colour, and for some reason they are reversed so that the tinted colour is at the bottom. This should be the most simple thing...
Try to use padding(top,left, right, bottom) in the <item> tag. Hope it helps
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<size android:height="#dimen/basic_runners_height"></size>
<solid android:color="#color/brb_orange"
android:gravity="bottom"></solid>
</shape>
</item>
<item android:top="10dp"
android:left="10dp"
android:right="10dp"
android:bottom="10dp">
<shape android:shape="rectangle">
<size android:height="#dimen/basic_runners_height_halved"></size>
<solid android:color="#color/md_white_1000"
android:alpha="127"
android:gravity="top"></solid>
</shape>
</item>
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 know the solid color and also the corner section but
I want to know how can I fill color of the corner
Try using stroke in your layout file. stroke can give you the border colour and width.
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<stroke android:color="#color/yourcolour"
android:width="4dp"
/>
//Other adjustments
</shape>
Let me know if this is what you were looking for
Or if you want something like in your image try the below
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item >
<shape android:shape="rectangle">
<solid android:color="#android:color/holo_red_dark"/>
<stroke android:color="#android:color/black"
android:width="10dp"
/>
</shape>
</item>
<item >
<shape android:shape="rectangle">
<solid android:color="#android:color/holo_blue_bright"/>
<stroke android:color="#android:color/black"
android:width="10dp"
/>
<corners android:bottomLeftRadius="150dp"/>
</shape>
</item>
</layer-list>
It seems you talking about that red colour on above image.
In that case, there is no property which give you such result.
You need to make it logically., Like take 2 views with diff background,
Red background with black colour stroke.
Sky background overlaping on 1st red view.
And simply make top view background as rounded with black color stroke. It will provide you the desired design layout.
Make sure you give same stroke to both view so that itlook to be same.
Happy coding.
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>
I don't understand what is going on with this code.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:bottom="10dp">
<shape android:shape="rectangle" >
<solid android:color="#ff8898A4" />
</shape>
</item>
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="90"
android:endColor="#ffD6DDD8"
android:startColor="#ffB1BBC3" />
</shape>
</item>
</layer-list>
If I move the solid below the gradient the gradient doesn't show. But the way it is now the solid won't show. I didn't have any trouble with two solid. What am I doing wrong?
You are placing the solid shape item over the gradient shape item.
You need to add some padding to the gradient shape. You are doing the opposite adding the padding to the solid shape versus the gradient shape, try this:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<solid android:color="#ff8898A4" />
</shape>
</item>
<item android:bottom="10dp">
<shape android:shape="rectangle" >
<gradient
android:angle="90"
android:endColor="#ffD6DDD8"
android:startColor="#ffB1BBC3" />
</shape>
</item>
</layer-list>
The second rectangle covers the first completely. Items in a layer-list are drawn on top of each other beginning with the first. If the don't have any offset, they all have the same size.
What I wanted was while background with red part on the left. Something like this.
I tried many things (is there any WYSIWIG editor? I think I ran this hundreds of times.) Specifying width like in the following article did not work.
how to specify width and height of a drawable item
The following article only tells me that I cannot use percentage, now how to apply width.
Android Drawable: Specifying shape width in percent in the XML file?
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid
android:color="#FFFFFFFF"/>
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#55FF0000" />
<size android:width="100px" />
</shape>
</item>
</layer-list>
Rather than specify the size of the red box, you would define a red layer and then set the left margin of the white layer equal to the amount of red to show.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid android:color="#55FF0000" />
</shape>
</item>
<item android:left="100px">
<shape android:shape="rectangle">
<solid android:color="#FFFFFFFF"/>
</shape>
</item>
</layer-list>
If you know the desired negative space, you could even swap the two and set the right margin of the red (now top) layer to the amount of white that should be visible.