Layerlist not showing items correctly Android

Question

I've got two shape drawable xml files that I am using on imagebuttons. One contains a ring, the other contains an oval small enough to fit into the larger ring, similar to a radiobutton. In this image https://i.stack.imgur.com/Uj3aj.jpg you can see (from left to right) the ring, the smaller middle oval, and the combined image showing the layerlist view of both together. This doesn't work and instead shows a complete filled in oval.

Here is the ring xml:

<?xml version="1.0" encoding="utf-8"?>

<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadiusRatio="3"
android:thickness="1dp"
android:useLevel="false">

<solid android:color="#1976D2" />

<size
    android:height="20dp"
    android:width="20dp" />
</shape>

Here is the oval xml:

<?xml version="1.0" encoding="utf-8"?>

<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">


<solid android:color="#1976D2" />

<size
    android:height="7dp"
    android:width="7dp" />
</shape>

Here is the layerlist xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/ring_select" />
<item android:drawable="@drawable/ring_center" />

</layer-list>

I'm not familiar with layerlists as I am new to android. What am I doing wrong?

Answer 1

I finally found the answer. Basically, the oval in front needs to have this added to it's line:

<item android:top="10dp" android:bottom="10dp" android:left="10dp" android:right="10dp">

The dimensions need to be the same since this is an oval. I'm still not sure why the oval stretched to the entire size of the ring, especially since the size was defined. If anyone has any idea why the top oval stretched like that, please let me know.

Answer 2

In case another person descends upon this page by the guiding of the knowledegable Google...

I have a workaround that may or may not work for you: instead of using <scale> , try <inset>. You can use a combination of the <item>'s android:top / android:bottom / android:left / android:right and the <inset>'s android:insetXXX to size the image

You can do things like set the sides of each inset value relative to your source image's dimensions. For example, if you have a 64 pixel-wide image and want to cut it down by 50%, you can do (64 / 4 = 16) for each side