I am new to use Android XML drawables. I am trying to define a simple drawable layerlist that has a gray stroke outer rectangle with a white stroke inner rectangle. The two rectangles should all have stroke width = 1 and the inner rectangle should be just 1px smaller than the outer one. Here's my code:
<?xml version="1.0" encoding="utf-8"?>
<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" >
<stroke
android:width="1dp"
android:color="#android:color/darker_gray"/>
</shape>
</item>
<item android:bottom="1dp" android:top="1dp" android:right="1dp" android:left="1dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<stroke
android:width="1dp"
android:color="#android:color/white"/>
</shape>
</item>
</layer-list>
But this doesn't work. I got a solid gray box as result... How should I change the code to make it like I described?
Also, I am trying to put a drawable #drawable/image to the center of the rectangle with a margin 50dp to the borders. How should I do that?
Thank you!
Related
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>
Is there any way to prevent partial overlapping of the stroke on the shape drawable. I prefer to overlap the stroke completely on the borders of the shape.
Here is my xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<padding
android:bottom="0dp"
android:top="0dp"
android:left="0dp"
android:right="0dp" />
<solid android:color="#color/green" />
<stroke android:color="#color/red_50"
android:width="20dp"
android:dashGap="2dp"
android:dashWidth="10dp" />
</shape>
colors.xml
<color name="green">#0f0</color>
<color name="red_50">#8f00</color>
And here is what is achieved
As you can see that the stroke is overlapping the solid part by 50% but I want it to be 100%.
Try to divide it into two shapes - one for stroke and one for rectangle. In this solution I manipulate size of rectangle so that I can change its relation with borders.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="#dimen/offset"
android:left="#dimen/offset"
android:right="#dimen/offset"
android:top="#dimen/offset">
<shape android:shape="rectangle">
<solid android:color="#color/green" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<stroke
android:width="20dp"
android:color="#color/red_50"
android:dashGap="2dp"
android:dashWidth="10dp" />
</shape>
</item>
</layer-list>
You can adjust the offset to get outer or inner stroke.
These values come from difference of size of transparent rectangle (stroke layer) and the green one. In your case they will be 20dp or none.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:top="4dp"
android:right="4dp"
android:bottom="4dp"
android:left="4dp">
<shape
android:shape="oval">
<solid android:color="#ff0000" />
</shape>
</item>
<item>
<shape
android:shape="oval">
<stroke android:width="2dp"
android:color="#ff0000"/>
</shape>
</item>
</layer-list>
taken from here:
https://stackoverflow.com/a/36003935/6007737
How is it giving me a ring shape?
How layer-list works and What do top, right, bottom and left attributes of item tag do?
Cant we just use ring shape ?Why go for oval shape to make ring shape?
A layer list is drawable, called sequence of other drawables with <item> tag.
Here from your question the first <item> is inner oval shape & top, bottom, right & left are insets given to that item (just same as padding). Try to give width & height to first you can see inner oval shape with 4dp padding from outer oval.
Refer to this link for more detail about layer drawable http://developer.android.com/reference/android/graphics/drawable/LayerDrawable.html
Yes you can use ring shape to draw a ring like:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadius="15dp"
android:thickness="10dp"
android:useLevel="false">
<solid android:color="#ff0000" />
</shape>
As you can see on the screenshots, I have a icon on the left side of this.
How can I draw a grey circle on the front of that left icon in the layout xml, as in following screenshot?
Screenshot
You can try this;
<?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="#BCBCBC" />
</shape>
</item>
<item android:top="1dp" android:left="1dp" android:right="1dp" android:bottom="1dp" android:drawable="#drawable/your_cross_icon">
<shape android:shape="oval">
<solid android:color="#BCBCBC" />
</shape>
</item>
</layer-list>
create this drawable
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
android:color="#666"/>
</shape>
then put it as background of the image view, and put the X as the src of imageview
The circle is the drawable that is behind the image.
This way you can reutilize the drawable and put in several icons
I'm adding a couple of ImageView to a LinearLayout programmatically, those ImageView have its src set to R.drawable.rectangle.
I'm trying to create a rectangle with solid color that has a border only to the left.
R.drawable.rectangle looks like this:
<?xml version="1.0" encoding="UTF-8"?>
<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="#000000" />
<stroke android:width="1dp" android:color="#999" />
</shape>
</item>
<item
android:top="0dp" android:left="1dp" android:bottom="0dp" android:right="0dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<solid android:color="#283BCB"/>
<size android:width="100dp" android:height="8dp" />
</shape>
</item>
</layer-list>
In my activity, I'm inflating the layout that contains the LinearLayout and I'm adding ImageViews to it programatically, that is all working. The problem is that I don't manage to manipulate the rectangle width. If I do:
imageView.getLayoutParams().width = 10;
Rectangles need to be different sizes and colors. However if I do it this way, rectangles get deformed weirdly, this doesn't happen If I don't use a layer-list, but only a shape (but that way I cannot add a left border).
So I'm guessing I need to get LayerDrawable, then get GradientDrawable and change it. However I'm not having any luck achieving this.
LayerDrawable layer = (LayerDrawable)imageView.getDrawable();
GradientDrawable rectangle = (GradientDrawable)layer.getDrawable(1);
// rectangle.setBounds
// rectangle.setColor NOT working
Any hints? thanks