How to draw a circle inside a circle using Android xml shapes?
34
I'm trying to make a thumb for a seekbar for my app, and I want to have an inner circle surrounded by a different, larger (semi-transparent) outer circle. I'm trying to use layer-list, but I'm having issues. Below is my code...
<?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="#00f" />
<size
android:height="15dp"
android:width="15dp" />
</shape>
</item>
<item>
<shape
android:shape="oval" >
<solid android:color="#f00" />
<size
android:height="10dp"
android:width="10dp" />
</shape>
</item>
</layer-list>
I would expect to see a small red circle on top of a larger blue circle, but all I'm seeing is the small red circle. Does anyone have any ideas?
java
android xml asked Feb 6 '14 at 20:26
jas7457
79931738
add a comment |
34
I'm trying to make a thumb for a seekbar for my app, and I want to have an inner circle surrounded by a different, larger (semi-transparent) outer circle. I'm trying to use layer-list, but I'm having issues. Below is my code...
<?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="#00f" />
<size
android:height="15dp"
android:width="15dp" />
</shape>
</item>
<item>
<shape
android:shape="oval" >
<solid android:color="#f00" />
<size
android:height="10dp"
android:width="10dp" />
</shape>
</item>
</layer-list>
I would expect to see a small red circle on top of a larger blue circle, but all I'm seeing is the small red circle. Does anyone have any ideas?
java
android xml asked Feb 6 '14 at 20:26
jas7457
79931738
1
You probably want to draw a RING instead of OVAL?
– Stan
Feb 6 '14 at 20:32
What I want is something similar to the seekbar that Google Play Music app uses... they have a orange circle in the middle with a transparent orange circle surrounding it. Do you have any code that could mimic this? I'm new to using Android XML drawables, so I'm kind of in the dark with the ring method.
– jas7457
Feb 6 '14 at 20:35
Have you seen/tried this?: stackoverflow.com/questions/4413652/…
– turbo
Feb 6 '14 at 20:38
2
That is just using the layer-list, like I'm doing. I noticed if I set theandroid:top="3dp" android:left="3dp"on the second item, I now see two circles. What's weird is that both circles are set to the same height and width, even if I declared them differently in the<size>attributes above. They both seem to default to whichever size is larger.
– jas7457
Feb 6 '14 at 20:47
add a comment |
34
34
34
10
I'm trying to make a thumb for a seekbar for my app, and I want to have an inner circle surrounded by a different, larger (semi-transparent) outer circle. I'm trying to use layer-list, but I'm having issues. Below is my code...
<?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="#00f" />
<size
android:height="15dp"
android:width="15dp" />
</shape>
</item>
<item>
<shape
android:shape="oval" >
<solid android:color="#f00" />
<size
android:height="10dp"
android:width="10dp" />
</shape>
</item>
</layer-list>
I would expect to see a small red circle on top of a larger blue circle, but all I'm seeing is the small red circle. Does anyone have any ideas?
java
android xml asked Feb 6 '14 at 20:26
jas7457
79931738
I'm trying to make a thumb for a seekbar for my app, and I want to have an inner circle surrounded by a different, larger (semi-transparent) outer circle. I'm trying to use layer-list, but I'm having issues. Below is my code...
<?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="#00f" />
<size
android:height="15dp"
android:width="15dp" />
</shape>
</item>
<item>
<shape
android:shape="oval" >
<solid android:color="#f00" />
<size
android:height="10dp"
android:width="10dp" />
</shape>
</item>
</layer-list>
I would expect to see a small red circle on top of a larger blue circle, but all I'm seeing is the small red circle. Does anyone have any ideas?
java
android xml java
android xml asked Feb 6 '14 at 20:26
jas7457
79931738
asked Feb 6 '14 at 20:26
jas7457
79931738
asked Feb 6 '14 at 20:26
jas7457
79931738
asked Feb 6 '14 at 20:26
jas7457
79931738
asked Feb 6 '14 at 20:26
jas7457
79931738
79931738
1
You probably want to draw a RING instead of OVAL?
– Stan
Feb 6 '14 at 20:32
What I want is something similar to the seekbar that Google Play Music app uses... they have a orange circle in the middle with a transparent orange circle surrounding it. Do you have any code that could mimic this? I'm new to using Android XML drawables, so I'm kind of in the dark with the ring method.
– jas7457
Feb 6 '14 at 20:35
Have you seen/tried this?: stackoverflow.com/questions/4413652/…
– turbo
Feb 6 '14 at 20:38
2
That is just using the layer-list, like I'm doing. I noticed if I set theandroid:top="3dp" android:left="3dp"on the second item, I now see two circles. What's weird is that both circles are set to the same height and width, even if I declared them differently in the<size>attributes above. They both seem to default to whichever size is larger.
– jas7457
Feb 6 '14 at 20:47
add a comment |
1
You probably want to draw a RING instead of OVAL?
– Stan
Feb 6 '14 at 20:32
What I want is something similar to the seekbar that Google Play Music app uses... they have a orange circle in the middle with a transparent orange circle surrounding it. Do you have any code that could mimic this? I'm new to using Android XML drawables, so I'm kind of in the dark with the ring method.
– jas7457
Feb 6 '14 at 20:35
Have you seen/tried this?: stackoverflow.com/questions/4413652/…
– turbo
Feb 6 '14 at 20:38
2
That is just using the layer-list, like I'm doing. I noticed if I set theandroid:top="3dp" android:left="3dp"on the second item, I now see two circles. What's weird is that both circles are set to the same height and width, even if I declared them differently in the<size>attributes above. They both seem to default to whichever size is larger.
– jas7457
Feb 6 '14 at 20:47
1
1
You probably want to draw a RING instead of OVAL?
– Stan
Feb 6 '14 at 20:32
You probably want to draw a RING instead of OVAL?
– Stan
Feb 6 '14 at 20:32
What I want is something similar to the seekbar that Google Play Music app uses... they have a orange circle in the middle with a transparent orange circle surrounding it. Do you have any code that could mimic this? I'm new to using Android XML drawables, so I'm kind of in the dark with the ring method.
– jas7457
Feb 6 '14 at 20:35
What I want is something similar to the seekbar that Google Play Music app uses... they have a orange circle in the middle with a transparent orange circle surrounding it. Do you have any code that could mimic this? I'm new to using Android XML drawables, so I'm kind of in the dark with the ring method.
– jas7457
Feb 6 '14 at 20:35
Have you seen/tried this?: stackoverflow.com/questions/4413652/…
– turbo
Feb 6 '14 at 20:38
Have you seen/tried this?: stackoverflow.com/questions/4413652/…
– turbo
Feb 6 '14 at 20:38
2
2
That is just using the layer-list, like I'm doing. I noticed if I set the
android:top="3dp" android:left="3dp" on the second item, I now see two circles. What's weird is that both circles are set to the same height and width, even if I declared them differently in the <size> attributes above. They both seem to default to whichever size is larger.– jas7457
Feb 6 '14 at 20:47
That is just using the layer-list, like I'm doing. I noticed if I set the
android:top="3dp" android:left="3dp" on the second item, I now see two circles. What's weird is that both circles are set to the same height and width, even if I declared them differently in the <size> attributes above. They both seem to default to whichever size is larger.– jas7457
Feb 6 '14 at 20:47
add a comment |
7 Answers
7
active
oldest
votes
63
The only way I've gotten this to work is to define a transparent stroke for the inner (i.e., top) circle that's the difference between the size of the larger and smaller circle.
For example, this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Larger blue circle in back -->
<item>
<shape android:shape="oval">
<solid android:color="#00f"/>
<size
android:width="15dp"
android:height="15dp"/>
</shape>
</item>
<!-- Smaller red circle in front -->
<item>
<shape android:shape="oval">
<!-- transparent stroke = larger_circle_size - smaller_circle_size -->
<stroke android:color="@android:color/transparent"
android:width="5dp"/>
<solid android:color="#f00"/>
<size
android:width="10dp"
android:height="10dp"/>
</shape>
</item>
</layer-list>
...looks like this:
answered Dec 19 '14 at 15:56
Sean Barbeau
8,58754194
2
Inside circle is not appearing at center... Is that need any modification in the code...?
– Abhishek
Jun 17 '16 at 3:55
add a comment |
10
hope it will help. This is drawable *.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="oval">
<padding
android:bottom="1dp"
android:left="1dip"
android:right="1dp"
android:top="1dp" />
<solid android:color="#000" />
</shape>
</item>
<item>
<shape android:shape="oval">
<padding
android:bottom="1dp"
android:left="1dip"
android:right="1dp"
android:top="1dp" />
<solid android:color="#EEE" />
</shape>
</item>
</layer-list>
edited Jun 6 '15 at 13:42
Community♦
11
answered Oct 11 '14 at 15:14
Евгений Дюндин
10913
add a comment |
8
It's late but maybe helpful,
you can use padding for center circle.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="oval">
<solid
android:color="#00fff"/>
<padding
android:bottom="30dp"
android:left="30dp"
android:right="30dp"
android:top="30dp"/>
<stroke
android:width="1dp"
android:color="@color/holo_red_light"/>
</shape>
</item>
<item>
<shape
android:shape="oval">
<solid
android:color="#00666666"/>
<size
android:width="120dp"
android:height="120dp"/>
<stroke
android:width="1dp"
android:color="@color/holo_red_light"/>
</shape>
</item>
</layer-list>
answered Jul 26 '15 at 11:35
Amir
313314
add a comment |
6
I managed to solve this by setting the width and height of the <item> in the <layer-list>. Probably not as best practise, but seem ok as was for background of icon in list view that had fixed dimensions.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- larger circle at the back -->
<item android:height="54dp" android:width="54dp" android:gravity="center">
<shape
android:shape="oval">
<solid
android:color="#0000FF"/>
<!-- thicker outer boarder -->
<stroke
android:width="2dp"
android:color="#000000"/>
</shape>
</item>
<!-- inner circle -->
<item android:height="40dp" android:width="40dp" android:gravity="center">
<shape
android:shape="oval" >
<solid
android:color="#00FF00"/>
<stroke
android:width="1dp"
android:color="#000000"/>
</shape>
</item>
</layer-list>
answered Oct 26 '15 at 17:12
scottyab
17.7k98195
3
android:heightandandroid:widthrequire API 23+ for shapes. Use the<size>tag instead for older devices.
– Testing Here
Oct 19 '16 at 15:46
add a comment |
1
I ended up here in search of drawing concentric circle found only answers with layer list approach so adding my answer with only using the shape, I hope it will help someone.
<Shape android:shape="oval">
<solid android:color="#FFF" />
<size
android:width="15dp"
android:height="15dp" />
<stroke
android:width="6dp"
android:color="#000" />
</Shape>
And this is the outcome.
answered Nov 20 at 9:31
war_Hero
5,17823044
add a comment |
0
Hope below code snippet helps :)
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- larger circle at the back -->
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="0dp"
android:shape="ring"
android:thicknessRatio="2"
android:useLevel="false" >
<solid android:color="#FFFFFF" />
<stroke
android:width="1dp"
android:color="#000000" /></shape>
</item>
<!-- inner circle -->
<item >
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="0dp"
android:shape="ring"
android:thicknessRatio="2.1"
android:useLevel="false" >
<solid android:color="#000000" />
<stroke
android:width="1dp"
android:color="#FFFFFF" /></shape>
</item>
</layer-list>
answered Mar 20 at 9:13
Niranjan
1,12121420
add a comment |
0
this is a short version of Sean Barbeau's answer
<stroke
android:width="1dp"
android:color="@color/white" />
<solid android:color="@color/dark_blue" />
<size
android:width="14dp"
android:height="14dp" />
answered Jun 13 at 9:47
Ankit Pandey
496
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f21613308%2fhow-to-draw-a-circle-inside-a-circle-using-android-xml-shapes%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
7 Answers
7
active
oldest
votes
7 Answers
7
active
oldest
votes
active
oldest
votes
active
oldest
votes
63
The only way I've gotten this to work is to define a transparent stroke for the inner (i.e., top) circle that's the difference between the size of the larger and smaller circle.
For example, this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Larger blue circle in back -->
<item>
<shape android:shape="oval">
<solid android:color="#00f"/>
<size
android:width="15dp"
android:height="15dp"/>
</shape>
</item>
<!-- Smaller red circle in front -->
<item>
<shape android:shape="oval">
<!-- transparent stroke = larger_circle_size - smaller_circle_size -->
<stroke android:color="@android:color/transparent"
android:width="5dp"/>
<solid android:color="#f00"/>
<size
android:width="10dp"
android:height="10dp"/>
</shape>
</item>
</layer-list>
...looks like this:
answered Dec 19 '14 at 15:56
Sean Barbeau
8,58754194
2
Inside circle is not appearing at center... Is that need any modification in the code...?
– Abhishek
Jun 17 '16 at 3:55
add a comment |
63
The only way I've gotten this to work is to define a transparent stroke for the inner (i.e., top) circle that's the difference between the size of the larger and smaller circle.
For example, this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Larger blue circle in back -->
<item>
<shape android:shape="oval">
<solid android:color="#00f"/>
<size
android:width="15dp"
android:height="15dp"/>
</shape>
</item>
<!-- Smaller red circle in front -->
<item>
<shape android:shape="oval">
<!-- transparent stroke = larger_circle_size - smaller_circle_size -->
<stroke android:color="@android:color/transparent"
android:width="5dp"/>
<solid android:color="#f00"/>
<size
android:width="10dp"
android:height="10dp"/>
</shape>
</item>
</layer-list>
...looks like this:
answered Dec 19 '14 at 15:56
Sean Barbeau
8,58754194
2
Inside circle is not appearing at center... Is that need any modification in the code...?
– Abhishek
Jun 17 '16 at 3:55
add a comment |
63
63
63
The only way I've gotten this to work is to define a transparent stroke for the inner (i.e., top) circle that's the difference between the size of the larger and smaller circle.
For example, this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Larger blue circle in back -->
<item>
<shape android:shape="oval">
<solid android:color="#00f"/>
<size
android:width="15dp"
android:height="15dp"/>
</shape>
</item>
<!-- Smaller red circle in front -->
<item>
<shape android:shape="oval">
<!-- transparent stroke = larger_circle_size - smaller_circle_size -->
<stroke android:color="@android:color/transparent"
android:width="5dp"/>
<solid android:color="#f00"/>
<size
android:width="10dp"
android:height="10dp"/>
</shape>
</item>
</layer-list>
...looks like this:
answered Dec 19 '14 at 15:56
Sean Barbeau
8,58754194
The only way I've gotten this to work is to define a transparent stroke for the inner (i.e., top) circle that's the difference between the size of the larger and smaller circle.
For example, this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Larger blue circle in back -->
<item>
<shape android:shape="oval">
<solid android:color="#00f"/>
<size
android:width="15dp"
android:height="15dp"/>
</shape>
</item>
<!-- Smaller red circle in front -->
<item>
<shape android:shape="oval">
<!-- transparent stroke = larger_circle_size - smaller_circle_size -->
<stroke android:color="@android:color/transparent"
android:width="5dp"/>
<solid android:color="#f00"/>
<size
android:width="10dp"
android:height="10dp"/>
</shape>
</item>
</layer-list>
...looks like this:
answered Dec 19 '14 at 15:56
Sean Barbeau
8,58754194
edited Aug 19 '15 at 21:52
answered Dec 19 '14 at 15:56
Sean Barbeau
8,58754194
answered Dec 19 '14 at 15:56
Sean Barbeau
8,58754194
answered Dec 19 '14 at 15:56
Sean Barbeau
8,58754194
8,58754194
2
Inside circle is not appearing at center... Is that need any modification in the code...?
– Abhishek
Jun 17 '16 at 3:55
add a comment |
2
Inside circle is not appearing at center... Is that need any modification in the code...?
– Abhishek
Jun 17 '16 at 3:55
2
2
Inside circle is not appearing at center... Is that need any modification in the code...?
– Abhishek
Jun 17 '16 at 3:55
Inside circle is not appearing at center... Is that need any modification in the code...?
– Abhishek
Jun 17 '16 at 3:55
add a comment |
10
hope it will help. This is drawable *.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="oval">
<padding
android:bottom="1dp"
android:left="1dip"
android:right="1dp"
android:top="1dp" />
<solid android:color="#000" />
</shape>
</item>
<item>
<shape android:shape="oval">
<padding
android:bottom="1dp"
android:left="1dip"
android:right="1dp"
android:top="1dp" />
<solid android:color="#EEE" />
</shape>
</item>
</layer-list>
edited Jun 6 '15 at 13:42
Community♦
11
answered Oct 11 '14 at 15:14
Евгений Дюндин
10913
add a comment |
10
hope it will help. This is drawable *.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="oval">
<padding
android:bottom="1dp"
android:left="1dip"
android:right="1dp"
android:top="1dp" />
<solid android:color="#000" />
</shape>
</item>
<item>
<shape android:shape="oval">
<padding
android:bottom="1dp"
android:left="1dip"
android:right="1dp"
android:top="1dp" />
<solid android:color="#EEE" />
</shape>
</item>
</layer-list>
edited Jun 6 '15 at 13:42
Community♦
11
answered Oct 11 '14 at 15:14
Евгений Дюндин
10913
add a comment |
10
10
10
hope it will help. This is drawable *.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="oval">
<padding
android:bottom="1dp"
android:left="1dip"
android:right="1dp"
android:top="1dp" />
<solid android:color="#000" />
</shape>
</item>
<item>
<shape android:shape="oval">
<padding
android:bottom="1dp"
android:left="1dip"
android:right="1dp"
android:top="1dp" />
<solid android:color="#EEE" />
</shape>
</item>
</layer-list>
edited Jun 6 '15 at 13:42
Community♦
11
answered Oct 11 '14 at 15:14
Евгений Дюндин
10913
hope it will help. This is drawable *.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="oval">
<padding
android:bottom="1dp"
android:left="1dip"
android:right="1dp"
android:top="1dp" />
<solid android:color="#000" />
</shape>
</item>
<item>
<shape android:shape="oval">
<padding
android:bottom="1dp"
android:left="1dip"
android:right="1dp"
android:top="1dp" />
<solid android:color="#EEE" />
</shape>
</item>
</layer-list>
edited Jun 6 '15 at 13:42
Community♦
11
answered Oct 11 '14 at 15:14
Евгений Дюндин
10913
edited Jun 6 '15 at 13:42
Community♦
11
edited Jun 6 '15 at 13:42
Community♦
11
edited Jun 6 '15 at 13:42
Community♦
11
11
answered Oct 11 '14 at 15:14
Евгений Дюндин
10913
answered Oct 11 '14 at 15:14
Евгений Дюндин
10913
answered Oct 11 '14 at 15:14
Евгений Дюндин
10913
10913
add a comment |
add a comment |
8
It's late but maybe helpful,
you can use padding for center circle.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="oval">
<solid
android:color="#00fff"/>
<padding
android:bottom="30dp"
android:left="30dp"
android:right="30dp"
android:top="30dp"/>
<stroke
android:width="1dp"
android:color="@color/holo_red_light"/>
</shape>
</item>
<item>
<shape
android:shape="oval">
<solid
android:color="#00666666"/>
<size
android:width="120dp"
android:height="120dp"/>
<stroke
android:width="1dp"
android:color="@color/holo_red_light"/>
</shape>
</item>
</layer-list>
answered Jul 26 '15 at 11:35
Amir
313314
add a comment |
8
It's late but maybe helpful,
you can use padding for center circle.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="oval">
<solid
android:color="#00fff"/>
<padding
android:bottom="30dp"
android:left="30dp"
android:right="30dp"
android:top="30dp"/>
<stroke
android:width="1dp"
android:color="@color/holo_red_light"/>
</shape>
</item>
<item>
<shape
android:shape="oval">
<solid
android:color="#00666666"/>
<size
android:width="120dp"
android:height="120dp"/>
<stroke
android:width="1dp"
android:color="@color/holo_red_light"/>
</shape>
</item>
</layer-list>
answered Jul 26 '15 at 11:35
Amir
313314
add a comment |
8
8
8
It's late but maybe helpful,
you can use padding for center circle.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="oval">
<solid
android:color="#00fff"/>
<padding
android:bottom="30dp"
android:left="30dp"
android:right="30dp"
android:top="30dp"/>
<stroke
android:width="1dp"
android:color="@color/holo_red_light"/>
</shape>
</item>
<item>
<shape
android:shape="oval">
<solid
android:color="#00666666"/>
<size
android:width="120dp"
android:height="120dp"/>
<stroke
android:width="1dp"
android:color="@color/holo_red_light"/>
</shape>
</item>
</layer-list>
answered Jul 26 '15 at 11:35
Amir
313314
It's late but maybe helpful,
you can use padding for center circle.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="oval">
<solid
android:color="#00fff"/>
<padding
android:bottom="30dp"
android:left="30dp"
android:right="30dp"
android:top="30dp"/>
<stroke
android:width="1dp"
android:color="@color/holo_red_light"/>
</shape>
</item>
<item>
<shape
android:shape="oval">
<solid
android:color="#00666666"/>
<size
android:width="120dp"
android:height="120dp"/>
<stroke
android:width="1dp"
android:color="@color/holo_red_light"/>
</shape>
</item>
</layer-list>
answered Jul 26 '15 at 11:35
Amir
313314
answered Jul 26 '15 at 11:35
Amir
313314
answered Jul 26 '15 at 11:35
Amir
313314
answered Jul 26 '15 at 11:35
Amir
313314
313314
add a comment |
add a comment |
6
I managed to solve this by setting the width and height of the <item> in the <layer-list>. Probably not as best practise, but seem ok as was for background of icon in list view that had fixed dimensions.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- larger circle at the back -->
<item android:height="54dp" android:width="54dp" android:gravity="center">
<shape
android:shape="oval">
<solid
android:color="#0000FF"/>
<!-- thicker outer boarder -->
<stroke
android:width="2dp"
android:color="#000000"/>
</shape>
</item>
<!-- inner circle -->
<item android:height="40dp" android:width="40dp" android:gravity="center">
<shape
android:shape="oval" >
<solid
android:color="#00FF00"/>
<stroke
android:width="1dp"
android:color="#000000"/>
</shape>
</item>
</layer-list>
answered Oct 26 '15 at 17:12
scottyab
17.7k98195
3
android:heightandandroid:widthrequire API 23+ for shapes. Use the<size>tag instead for older devices.
– Testing Here
Oct 19 '16 at 15:46
add a comment |
6
I managed to solve this by setting the width and height of the <item> in the <layer-list>. Probably not as best practise, but seem ok as was for background of icon in list view that had fixed dimensions.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- larger circle at the back -->
<item android:height="54dp" android:width="54dp" android:gravity="center">
<shape
android:shape="oval">
<solid
android:color="#0000FF"/>
<!-- thicker outer boarder -->
<stroke
android:width="2dp"
android:color="#000000"/>
</shape>
</item>
<!-- inner circle -->
<item android:height="40dp" android:width="40dp" android:gravity="center">
<shape
android:shape="oval" >
<solid
android:color="#00FF00"/>
<stroke
android:width="1dp"
android:color="#000000"/>
</shape>
</item>
</layer-list>
answered Oct 26 '15 at 17:12
scottyab
17.7k98195
3
android:heightandandroid:widthrequire API 23+ for shapes. Use the<size>tag instead for older devices.
– Testing Here
Oct 19 '16 at 15:46
add a comment |
6
6
6
I managed to solve this by setting the width and height of the <item> in the <layer-list>. Probably not as best practise, but seem ok as was for background of icon in list view that had fixed dimensions.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- larger circle at the back -->
<item android:height="54dp" android:width="54dp" android:gravity="center">
<shape
android:shape="oval">
<solid
android:color="#0000FF"/>
<!-- thicker outer boarder -->
<stroke
android:width="2dp"
android:color="#000000"/>
</shape>
</item>
<!-- inner circle -->
<item android:height="40dp" android:width="40dp" android:gravity="center">
<shape
android:shape="oval" >
<solid
android:color="#00FF00"/>
<stroke
android:width="1dp"
android:color="#000000"/>
</shape>
</item>
</layer-list>
answered Oct 26 '15 at 17:12
scottyab
17.7k98195
I managed to solve this by setting the width and height of the <item> in the <layer-list>. Probably not as best practise, but seem ok as was for background of icon in list view that had fixed dimensions.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- larger circle at the back -->
<item android:height="54dp" android:width="54dp" android:gravity="center">
<shape
android:shape="oval">
<solid
android:color="#0000FF"/>
<!-- thicker outer boarder -->
<stroke
android:width="2dp"
android:color="#000000"/>
</shape>
</item>
<!-- inner circle -->
<item android:height="40dp" android:width="40dp" android:gravity="center">
<shape
android:shape="oval" >
<solid
android:color="#00FF00"/>
<stroke
android:width="1dp"
android:color="#000000"/>
</shape>
</item>
</layer-list>
answered Oct 26 '15 at 17:12
scottyab
17.7k98195
edited Oct 26 '15 at 17:56
answered Oct 26 '15 at 17:12
scottyab
17.7k98195
answered Oct 26 '15 at 17:12
scottyab
17.7k98195
answered Oct 26 '15 at 17:12
scottyab
17.7k98195
17.7k98195
3
android:heightandandroid:widthrequire API 23+ for shapes. Use the<size>tag instead for older devices.
– Testing Here
Oct 19 '16 at 15:46
add a comment |
3
android:heightandandroid:widthrequire API 23+ for shapes. Use the<size>tag instead for older devices.
– Testing Here
Oct 19 '16 at 15:46
3
3
android:height and android:width require API 23+ for shapes. Use the <size> tag instead for older devices.– Testing Here
Oct 19 '16 at 15:46
android:height and android:width require API 23+ for shapes. Use the <size> tag instead for older devices.– Testing Here
Oct 19 '16 at 15:46
add a comment |
1
I ended up here in search of drawing concentric circle found only answers with layer list approach so adding my answer with only using the shape, I hope it will help someone.
<Shape android:shape="oval">
<solid android:color="#FFF" />
<size
android:width="15dp"
android:height="15dp" />
<stroke
android:width="6dp"
android:color="#000" />
</Shape>
And this is the outcome.
answered Nov 20 at 9:31
war_Hero
5,17823044
add a comment |
1
I ended up here in search of drawing concentric circle found only answers with layer list approach so adding my answer with only using the shape, I hope it will help someone.
<Shape android:shape="oval">
<solid android:color="#FFF" />
<size
android:width="15dp"
android:height="15dp" />
<stroke
android:width="6dp"
android:color="#000" />
</Shape>
And this is the outcome.
answered Nov 20 at 9:31
war_Hero
5,17823044
add a comment |
1
1
1
I ended up here in search of drawing concentric circle found only answers with layer list approach so adding my answer with only using the shape, I hope it will help someone.
<Shape android:shape="oval">
<solid android:color="#FFF" />
<size
android:width="15dp"
android:height="15dp" />
<stroke
android:width="6dp"
android:color="#000" />
</Shape>
And this is the outcome.
answered Nov 20 at 9:31
war_Hero
5,17823044
I ended up here in search of drawing concentric circle found only answers with layer list approach so adding my answer with only using the shape, I hope it will help someone.
<Shape android:shape="oval">
<solid android:color="#FFF" />
<size
android:width="15dp"
android:height="15dp" />
<stroke
android:width="6dp"
android:color="#000" />
</Shape>
And this is the outcome.
answered Nov 20 at 9:31
war_Hero
5,17823044
edited Nov 20 at 9:50
answered Nov 20 at 9:31
war_Hero
5,17823044
answered Nov 20 at 9:31
war_Hero
5,17823044
answered Nov 20 at 9:31
war_Hero
5,17823044
5,17823044
add a comment |
add a comment |
0
Hope below code snippet helps :)
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- larger circle at the back -->
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="0dp"
android:shape="ring"
android:thicknessRatio="2"
android:useLevel="false" >
<solid android:color="#FFFFFF" />
<stroke
android:width="1dp"
android:color="#000000" /></shape>
</item>
<!-- inner circle -->
<item >
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="0dp"
android:shape="ring"
android:thicknessRatio="2.1"
android:useLevel="false" >
<solid android:color="#000000" />
<stroke
android:width="1dp"
android:color="#FFFFFF" /></shape>
</item>
</layer-list>
answered Mar 20 at 9:13
Niranjan
1,12121420
add a comment |
0
Hope below code snippet helps :)
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- larger circle at the back -->
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="0dp"
android:shape="ring"
android:thicknessRatio="2"
android:useLevel="false" >
<solid android:color="#FFFFFF" />
<stroke
android:width="1dp"
android:color="#000000" /></shape>
</item>
<!-- inner circle -->
<item >
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="0dp"
android:shape="ring"
android:thicknessRatio="2.1"
android:useLevel="false" >
<solid android:color="#000000" />
<stroke
android:width="1dp"
android:color="#FFFFFF" /></shape>
</item>
</layer-list>
answered Mar 20 at 9:13
Niranjan
1,12121420
add a comment |
0
0
0
Hope below code snippet helps :)
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- larger circle at the back -->
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="0dp"
android:shape="ring"
android:thicknessRatio="2"
android:useLevel="false" >
<solid android:color="#FFFFFF" />
<stroke
android:width="1dp"
android:color="#000000" /></shape>
</item>
<!-- inner circle -->
<item >
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="0dp"
android:shape="ring"
android:thicknessRatio="2.1"
android:useLevel="false" >
<solid android:color="#000000" />
<stroke
android:width="1dp"
android:color="#FFFFFF" /></shape>
</item>
</layer-list>
answered Mar 20 at 9:13
Niranjan
1,12121420
Hope below code snippet helps :)
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- larger circle at the back -->
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="0dp"
android:shape="ring"
android:thicknessRatio="2"
android:useLevel="false" >
<solid android:color="#FFFFFF" />
<stroke
android:width="1dp"
android:color="#000000" /></shape>
</item>
<!-- inner circle -->
<item >
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="0dp"
android:shape="ring"
android:thicknessRatio="2.1"
android:useLevel="false" >
<solid android:color="#000000" />
<stroke
android:width="1dp"
android:color="#FFFFFF" /></shape>
</item>
</layer-list>
answered Mar 20 at 9:13
Niranjan
1,12121420
answered Mar 20 at 9:13
Niranjan
1,12121420
answered Mar 20 at 9:13
Niranjan
1,12121420
answered Mar 20 at 9:13
Niranjan
1,12121420
1,12121420
add a comment |
add a comment |
0
this is a short version of Sean Barbeau's answer
<stroke
android:width="1dp"
android:color="@color/white" />
<solid android:color="@color/dark_blue" />
<size
android:width="14dp"
android:height="14dp" />
answered Jun 13 at 9:47
Ankit Pandey
496
add a comment |
0
this is a short version of Sean Barbeau's answer
<stroke
android:width="1dp"
android:color="@color/white" />
<solid android:color="@color/dark_blue" />
<size
android:width="14dp"
android:height="14dp" />
answered Jun 13 at 9:47
Ankit Pandey
496
add a comment |
0
0
0
this is a short version of Sean Barbeau's answer
<stroke
android:width="1dp"
android:color="@color/white" />
<solid android:color="@color/dark_blue" />
<size
android:width="14dp"
android:height="14dp" />
answered Jun 13 at 9:47
Ankit Pandey
496
this is a short version of Sean Barbeau's answer
<stroke
android:width="1dp"
android:color="@color/white" />
<solid android:color="@color/dark_blue" />
<size
android:width="14dp"
android:height="14dp" />
answered Jun 13 at 9:47
Ankit Pandey
496
answered Jun 13 at 9:47
Ankit Pandey
496
answered Jun 13 at 9:47
Ankit Pandey
496
answered Jun 13 at 9:47
Ankit Pandey
496
496
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f21613308%2fhow-to-draw-a-circle-inside-a-circle-using-android-xml-shapes%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
You probably want to draw a RING instead of OVAL?
– Stan
Feb 6 '14 at 20:32
What I want is something similar to the seekbar that Google Play Music app uses... they have a orange circle in the middle with a transparent orange circle surrounding it. Do you have any code that could mimic this? I'm new to using Android XML drawables, so I'm kind of in the dark with the ring method.
– jas7457
Feb 6 '14 at 20:35
Have you seen/tried this?: stackoverflow.com/questions/4413652/…
– turbo
Feb 6 '14 at 20:38
2
That is just using the layer-list, like I'm doing. I noticed if I set the
android:top="3dp" android:left="3dp"on the second item, I now see two circles. What's weird is that both circles are set to the same height and width, even if I declared them differently in the<size>attributes above. They both seem to default to whichever size is larger.– jas7457
Feb 6 '14 at 20:47