XML : Layering two Shapes in Android

I'm trying to create a custom thumbnail for a seek bar, and I want it to look like an orange circle with a white "glowing" effect around the edges. I'm trying to achieve this by layering two circles on each other, one with a white-to-transparent gradient, and then the smaller orange circle on top like so:

  <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >        <item>          <shape>              <corners android:radius="30dp" />              <size                  android:height="30dp"                  android:width="30dp" />              <gradient                  android:startColor="@android:color/white"                  android:endColor="@android:color/transparent"                  android:gradientRadius="20dp"                  android:type="radial"                  />          </shape>      </item>        <item>          <shape>              <corners android:radius="20dp" />              <size                  android:height="20dp"                  android:width="20dp" />              <gradient                  android:startColor="@color/app_light_orange"                  android:endColor="@color/app_orange"                  android:gradientRadius="18dp"                  android:type="radial"                  />          </shape>      </item>    </layer-list>    

However, when I run my app, the thumbnail just turns out as an orange circle with a 30dp radius. How would I fix it to get my desired result?