Android: Layer-List not working?

Question

I am trying to put two oval drawables on top of each other, the first has transparency. However with the way I have it, it displays the first oval's color at the size of the second oval.

<?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:width="15dp" android:height="15dp" />
        <solid android:color="#35000000"/>
    </shape>
</item>
<item>
    <shape android:shape="oval">
        <size android:width="5dp" android:height="5dp" />
        <solid android:color="#000000"/>
    </shape>
</item>
</layer-list>

How can I get this to work as intended?

EDIT: Here is the parent:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
    android:id="@+id/imageView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/my_layerlist" />
</LinearLayout>

Answer 1

After doing much research on the different types of XML drawables, it appears that your LayerDrawable (layer-list) is be scaling the ShapeDrawables independently. Then, the ImageView is scaling the LayerDrawable. According to this guide from Google, scaling for both ShapeDrawables and LayerDrawables is a concern. LayerDrawables will check for necessary scaling on each item you have. They have several solutions:

• Set the gravity to something that does not scale, such as "center".
• define the drawable as a bitmap.
• Set the ImageView to scaleType that does not scale.

There is two major problem with this, however... You can only use gravity for the bitmap. And you cannot use a ShapeDrawable for the bitmap in XML. I tried everything I could think of to get it right. Here's the only thing that fixed it for me.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
    android:id="@+id/imageView1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/oval1"
    android:scaleType="center"  />
<ImageView
    android:id="@+id/imageView2"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/oval2"
    android:scaleType="center"  />
</FrameLayout>

So: I removed the LayerDrawable, separated the Shapes into their own XMLs, made two ImageViews. (for ease I stuck them in a FrameLayout). This was the only way to stop the scaling.

---

Testing Procedure

Tested in Android 2.1, 3.0, 4.0

• Changed Image scaleType
• Changed Image width and height
• Separated ShapeDrawables
• Changed LayerList to just items with drawable attribute referencing separated shapes
• Changed LayerList to bitmaps referencing separated shapes.
• Changed order of shapes

---

Alternatively, you could do it in code.

---

• Reference: Drawable Resources