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
Related
I'm trying to create a circle button with a yellow ring around it. I'm trying to use layer list as a drawable resource file and to have the circle button in the background and the ring on top.
However, no matter what I try, the ring isn't being drawn on top of the circle. Only the circle appears.
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<corners android:radius="16dp"/>
<solid android:color="#color/blue_button"/>
<size android:width="32dp" android:height="32dp"/>
</shape>
</item>
<item>
<shape android:shape="ring" android:innerRadius="50dp" android:useLevel="false" android:thickness="16dp">
<solid android:color="#color/black"/>
</shape>
</item>
</layer-list>
When I try to isolate the ring shape, I can see it. But when I combine it with the circle, all I see is the circle. Adjusting thickness or innerRadius didn't seem to help.
I'm not sure what I'm doing wrong here. The ring is being drawn last so it should be on top. Can anyone help?
Can you give this a try :
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:height="50dp" android:width="50dp" android:gravity="center">
<shape
android:shape="oval">
<solid
android:color="#2323ff"/>
</shape>
</item>
<item android:height="48dp" android:width="48dp" android:gravity="center">
<shape
android:shape="oval" >
<solid
android:color="#000000"/>
</shape>
</item>
</layer-list>
How can i create an android layerlist drawable which gives me something like this
I have managed to generate just the outer circle only with the below code.But can seem to find a way to add the solid one inside.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke
android:width="2dp"
android:color="#1582AF"/>
</shape>
Your layer list is look like below:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item> <!--Your outer blue border shape-->
<shape android:shape="oval">
<solid android:color="#android:color/white" />
<size
android:width="40dp"
android:height="40dp" />
<stroke
android:width="2dp"
android:color="#1582AF" />
</shape>
</item>
<!--Your inner blue Solid circle shape-->
<item android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp">
<shape android:shape="oval">
<solid android:color="#1582AF" />
</shape>
</item>
</layer-list>
Output:
Is there a way to make a drawable that draws a vertical line? So far I have a horizontal line that draws this:
current code is as follows:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/object_switcher_background" />
<item android:left="0dp"
android:right="250dp">
<shape android:shape="line">
<stroke android:color="#color/c19"
android:width="2dp"/>
<size android:width="40dp"/>
</shape>
</item>
<item android:left="50dp"
android:bottom="50dp"
android:top="75dp"
android:right="150dp">
<shape android:shape="line">
<stroke android:color="#color/c19"
android:width="2dp"
android:rotation="90"/>
<size android:width="40dp"/>
</shape>
</item>
</layer-list>
How can I manipulate this to make it look like this?
You could do this by nesting your second item inside a rotate item.
you can do that using rotate item: the below code defines a white background with a vertical divider using only xml drawable
<?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="#android:color/white" />
</shape>
</item>
<item>
<rotate android:fromDegrees="90">
<shape android:shape="line">
<stroke
android:width="1dp"
android:color="#android:color/darker_gray" />
</shape>
</rotate>
</item>
I'm not sure why you need a drawable for this.
This can also be done by using a simple view and adjusting its height, width and position according to your needs. For example:
<View
android:layout_width="1dp"
android:background="#color/grey_text_color"
android:layout_height="match_parent"/>
I am using a stroke to make a colored border to a shape in xml layout in android .
Can I make the stroke for only 3 edges ( left,top,bottom) the right NO ?
You can achieve this by using a layerlist and messing with the padding. You'll need 3 elements:
1: A border.xml shape, which is just a solid shape in the color of your border: border.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ff0000"/>
</shape>
2: The 'inner' shape, the shape where you want the border to appear around: inner.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#00ff00"/>
</shape>
3: A layer list, which will put these 2 on top of eachother. You create the border by setting the padding on the inner shape: layerlist.xml
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/border"/>
<item android:drawable="#drawable/inner"
android:top="3dp" android:right="0dp" android:bottom="3dp"
android:left="3dp" />
</layer-list>
Using #Mopper answer, you can like that too.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid android:color="#ff0000" />
</shape>
</item>
<item
android:bottom="3dp"
android:left="3dp"
android:right="0dp"
android:top="3dp">
<shape>
<solid android:color="#00ff00" />
</shape>
</item>
</layer-list>
Here's my solution, which works if you want transparent or semi-transparent background colors.
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetLeft="-1dp"
>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
android:color="#c45b5b5b"
android:width="1dp"/>
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="5dp"
android:topLeftRadius="0dp"
android:topRightRadius="5dp"
/>
</shape>
</inset>
</item>
<item
android:top="1dp"
android:right="1dp"
android:bottom="1dp"
android:left="0dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/infoBox_Background"/>
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="5dp"
android:topLeftRadius="0dp"
android:topRightRadius="5dp"
/>
</shape>
</item>
</layer-list>
Another approach would be to use a 9-Patch png file for your background. You do this by taking a normal png file and then using a tool like this to define:
The area where your content goes in the png.
The area of your png that stretches as the underlying control grows in either width or height.
Once you generate the 9-patch png file, add it to your drawables (define files for various resolutions). Then just set the drawable as your control background.
android:background="#drawable/my9_patch_file_name"
I’m attempting to create a layout border with corners that are square on the outside and round on the inside. I’ve gathered that I need to create an .xml drawable definition composed of two shapes: one with a stroke width and corner radius and another with a stroke width only:
The drawables
round_border.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="4dp" android:color="#FF000000" />
<padding android:left="7dp" android:top="7dp"
android:right="7dp" android:bottom="7dp" />
<corners android:radius="4dp" />
<solid android:color="#FFC0C0C0" />
</shape>
square_border.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="2dp" android:color="#FF000000" />
<solid android:color="#FFC0C0C0" />
</shape>
Each of these works independantly as a border when appliedby itself like so:
android:background="#drawable/round_border"
but when they either or both are added to an item-list drawable like so:
composite_border.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<layer-list>
<item android:drawable="#drawable/round_border"/>
<!-- <item android:drawable="#drawable/square_border"/> -->
</layer-list>
</shape>
and:
android:background="#drawable/composite_border"
The layout's background is completely black instead of just a black border.
Does anyone know how to make the layer list work for this task?
From Shape Drawable Doc you can see that shape can't have layer-list inside so you should define your composite_border.xml like this
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/square_border"/>
<item android:drawable="#drawable/round_border"/>
</layer-list>
note that I changed the order of your items inside the layer-list as stated in the documentation of layer-list
Each drawable in the list is drawn in the order of the list—the last drawable in the list is drawn on top and you want it to be squared from outside
Try this will work fine enough:
solid is background color
stroke is border
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#color/white"/>
<stroke android:width="1dp" android:color="#ffaaaaaa" />
<size
android:width="15dp"
android:height="15dp"/>
</shape>
Create a xml file like round_background.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
android:color="#CCCC33"/>
<size
android:width="35dp"
android:height="35dp"/>
</shape>
In the layout set as background
<LinearLayout
android:id="#+id/layout_wellbeing"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:background="#drawable/rounded_corner_leuvan"
android:orientation="horizontal" >
</LinearLayout>
square_border.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="2dp"
android:color="#FF000000"
/>
<solid android:color="#FFC0C0C0" />
</shape>
composite_border.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<layer-list>
<item android:drawable="#drawable/round_border"/>
<!-- <item android:drawable="#drawable/square_border"/> -->
</layer-list>
</shape>
watch out the comments and the quotation marks! =]