Shape with outer stroke only

Question

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval"
       xmlns:android="http://schemas.android.com/apk/res/android"
    >
    <solid android:color="#ffffff"/>

    <stroke android:width="30dp"
            android:color="#51000000"
        />
</shape>

It gives a "half-inner-half-outer" stroke. What I need is outer semitransparent stroke only. Can it be done?

What I have is

What I need is

Thanks

Please check this answer: https://stackoverflow.com/a/40219413/3998710 It really works for me. — Vensent Wang, Feb 26 '21 at 03:34

santosh kumar · Answer 1 · 2017-01-11T14:00:42.250

2

you can check this shape created using layer list with it's items.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item >
        <shape android:shape="oval" >
            <solid android:color="#fff" />
        </shape>
    </item>

    <item >
        <shape android:shape="oval">
            <solid android:color="@android:color/transparent" />
            <stroke
                android:width="50dp"
                android:color="#30000000" />
        </shape>
    </item>

</layer-list>

edited Jan 11 '17 at 14:00

answered Jan 11 '17 at 12:29

santosh kumar

2,952
1
15
27

That gives just a ring with no solid white color inside. – MobileX Jan 11 '17 at 12:34
can you add image how do you want ? – santosh kumar Jan 11 '17 at 12:40
It gives inner stroke, not outer. – MobileX Jan 11 '17 at 14:13
Just change the color there is no inner and outer stroke. – santosh kumar Jan 11 '17 at 14:14
change color to #80000000 and check. – santosh kumar Jan 11 '17 at 14:18
I have checked before writing the comment above. Also, I know how to get the result with the layer-list. The question is it possible to achieve that with just a single shape? – MobileX Jan 11 '17 at 14:27

score 1 · Accepted Answer · answered Jan 12 '17 at 16:45

I've found no way to do that other than the following:

<?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" />
            <stroke
                android:width="@dimen/stroke_width"
                android:color="#33000000" />
        </shape>
    </item>

    <item >
        <shape android:shape="oval" >
            <solid android:color="#fff" />
            <stroke
                android:width="@dimen/stroke_width"
                android:color="@android:color/transparent">
            </stroke>
        </shape>
    </item>
</layer-list>

score 0 · Answer 3 · answered Jan 11 '17 at 12:27

0

if you add alpha for stroke color the inner half is without transparent and outer is transparent.this is how stroke color works.if you don't want inner circle use color without Alpha and adjust Hexcode.

answered Jan 11 '17 at 12:27

Anjal Saneen

3,109
23
38

Can you provide a reference from where you get that? – Iulian Popescu Jan 11 '17 at 12:29
"the inner half is without transparent and outer is transparent" - can you see the attached image? The both halfs are transparent. Also, could you provide a markup, plz? – MobileX Jan 11 '17 at 12:31

score 0 · Answer 4 · answered Jan 11 '17 at 12:47

0

Try adding android:innerRadius="0dp" for shape attribute -

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval"
xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="0dp"
>
<solid android:color="#ffffff"/>

<stroke android:width="4dp"
    android:color="#51000000"
    />
</shape>

answered Jan 11 '17 at 12:47

Anindita Pani

544
3
6

nothing is changed. the result is exactly the same. – MobileX Jan 11 '17 at 12:52

score 0 · Answer 5 · answered Jan 11 '17 at 12:51

0

This is Android studio XML preview bug.look like The image you shown above from Android studio xml preview.actually there is no inner and outer layer.

answered Jan 11 '17 at 12:51

Anjal Saneen

3,109
23
38

what api level? – MobileX Jan 11 '17 at 13:06
I have no real device with me right now. However, the emulator shows exactly the same result as the preview does. So most likely the result will be the same on a real device as well. – MobileX Jan 11 '17 at 13:12
[Screen shot of my result.the circle in top have a stroke with Alpha value](http://imgur.com/a/X2XiK) – Anjal Saneen Jan 11 '17 at 13:17
It's just a screenshot. Show the corresponding markup, plz. – MobileX Jan 11 '17 at 13:19

score 0 · Answer 6 · answered Jan 30 '21 at 10:24

Try This: (Change dimens and colors to fit your needs)

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <stroke android:width="@dimen/default_stroke_size_small" android:color="@color/colorDimBlack"/>
        </shape>
    </item>

    <item>
        <shape android:shape="oval">
            <stroke android:width="@dimen/default_stroke_size_small" android:color="@android:color/transparent"/>
            <solid android:color="@color/colorWhite"/>
        </shape>
    </item>
</layer-list>

score -1 · Answer 7 · answered Jan 11 '17 at 12:14

-1

update your code to this:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#ffffff" />

    <stroke
        android:width="30dp"
        android:color="#000000" /> <--- this line you have to change
</shape>

answered Jan 11 '17 at 12:14

Anjali

1
1
13
20

Changing the output color isn't what OP wants! – Sadiq Md Asif Jan 11 '17 at 12:18
"this line you have to change" - No. I need a semitransparent stroke. – MobileX Jan 11 '17 at 12:19

score -2 · Answer 8 · answered Jan 11 '17 at 12:15

You are missing one f in your first color. Thus it's creating a half visible pattern

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval"
    xmlns:android="http://schemas.android.com/apk/res/android"
    >
    <solid android:color="#fffffff"/>

    <stroke android:width="30dp"
        android:color="#51000000"
        />
</shape>

Shape with outer stroke only

8 Answers8