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?

(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).

Answer 1

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.

Answer 2

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!