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.
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'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>
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
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 have a layer-list:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="oval"
>
<size android:height="50dp" android:width="50dp"/>
<solid android:color="#android:color/background_light"/>
</shape>
</item>
<item>
<shape android:shape="oval">
<size android:width="50dp" android:height="50dp"/>
<stroke android:width="1dp" android:color="#android:color/black"/>
</shape>
</item>
</layer-list>
On 4.2.2 and above it creates a white circle with a black border.
Below 4.2.2 it creates a black circle.
Is there any way to get it working below 4.2.2? Am I missing something?
My goal would be to get it work from api14.
Well eventually I found my own answer:
the trick is, you don't create a new item for the border, you add it to the solid shape, and it work's from api14. Like this:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<size android:height="50dp" android:width="50dp"/>
<solid android:color="#android:color/background_light"/>
<stroke android:width="1dp" android:color="#android:color/black"/>
</shape>
</item>
actually in this case you don't even need a layer-list, but I have some other shapes in there, so that's why I'm using it. This way you can change the background color, and it still has a nice border to it.