Android ShapeDrawable stroke is blurred

Question

I created a rather simple shapedrawable with semi-transparent borders, and used it as a background for two adjacent view.

Either if the srtoke color is partially transparent, I'm expecting a solid stroke (like the image on the right), but what I get is a blurred stroke (image on the left).

What I'm doing wrong?

actual vs expected

(images are taken from the ADT preview, in the emulator the effect is even more visible)

This is the ShapeDrawable (theme_base_bg_framed.xml):

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid
        android:color="@color/base_frame_solid_color"
        />
    <stroke
        android:width="@dimen/frame_border_size"
        android:color="@color/base_frame_border_color"
        />
    <padding
        android:left="@dimen/frame_padding_size"
        android:top="@dimen/frame_padding_size"
        android:right="@dimen/frame_padding_size"
        android:bottom="@dimen/frame_padding_size"
        />
</shape>

It uses these color and dimen definitions:

<color name="base_frame_solid_color">#20ffffff</color>
<color name="base_frame_border_color">#40ffffff</color>

<dimen name="frame_border_size">2dp</dimen>
<dimen name="frame_padding_size">2dp</dimen>

Both drawables are assigned to the Views background

<style name="ViewWithBorder">
    <item name="android:background">@drawable/theme_base_bg_framed</item>
</style>

Edit:

The colors used in the ShapeDrawable are alphaed for a reason. The view in the background is going to contain other views and/or images. This is a better example of what I get (left) and what I'm expecting to get (right).

enter image description here

@FrankN.Stein: I mean "sharp" stroke with semi transparent color — Ohmnibus, Jul 12 '14 at 09:30

score 1 · Answer 1 · answered Jul 12 '14 at 09:51

1

I use this values to get the result you wanted: colors.xml:

<color name="base_frame_solid_color">#20000000</color>
<color name="base_frame_border_color">#40ffffff</color>

shape:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid
        android:color="@color/base_frame_solid_color"
        />
    <stroke
        android:width="@dimen/frame_border_size"
        android:color="@color/base_frame_border_color"
        />
</shape>

Hope this helps!

answered Jul 12 '14 at 09:51

Mike

2,547
3
16
30

for other backgrounds just make solid color fully transparent - #00000000 or solid. – Mike Jul 12 '14 at 10:04
I'm sorry my question wasn't clear, I edited it to add a better example. Paddings didn't affect the stroke sharpness. Setting solid color to #20000000 indeed make the stroke sharp, but it's not the color I'm looking for – Ohmnibus Jul 12 '14 at 10:52

score 0 · Answer 2 · answered Jul 12 '14 at 11:17

Ok, I found what's happening and how to fix it.

It seems that Android, when filling a ShapeDrawable with a border, doesn't fill it to it's full size but just to the middle of the stroke. So, with a stroke of 2dp, it leave a space of 1dp all around. This can be noticed only when using alphaed borders, like I'm doing, because normally the border cover it.

Tho fix this behaviour, I used a LayerList drawable containing two ShapeDrawables, one for the solid color (with no borders) and one for the stroke (with no solid color):

<?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="@color/base_frame_solid_color"
                />
        </shape>
    </item>
    <item>
        <shape
            android:shape="rectangle">
            <stroke
                android:width="@dimen/frame_border_size"
                android:color="@color/base_frame_border_color"
                />
            <padding
                android:left="@dimen/frame_padding_size"
                android:top="@dimen/frame_padding_size"
                android:right="@dimen/frame_padding_size"
                android:bottom="@dimen/frame_padding_size"
                />
        </shape>
    </item>
</layer-list>

It works, but being the border superimposed to the "solid" background, it's color need some adjustment.

Android ShapeDrawable stroke is blurred

2 Answers2