Oval drawables displaying as vertical lines

Issue

I'm having trouble with shape drawables displaying incorrectly on some older devices (<4.2). I've created two circle drawables with different colours to act as indicators on an image slider. On older devices, however, these circles show up as vertical lines. The colour of the drawable changes as pages are scrolled, as expected, and the height grows and shrinks if I change the drawable's size, but it only displays as a vertical line. The circles are both drawn like this:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="oval">
    <size android:width="10dp"/>
    <size android:height="10dp"/>
    <solid android:color="@color/transparant_grey_light"/>

</shape>

and I'm inserting them programatically into an empty LinearLayout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                  xmlns:tools="http://schemas.android.com/tools"
                  android:orientation="vertical"
                  android:layout_width="match_parent"
                  android:layout_height="match_parent"
                  android:layout_marginBottom="50dp"
                  android:paddingTop="10dp"
                  android:paddingBottom="10dp"
                  android:id="@+id/fragment_container">

    <android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
                                       android:id="@+id/pager"
                                       android:layout_width="match_parent"
                                       android:layout_height="0dp"
                                       android:layout_weight="1" >

    </android.support.v4.view.ViewPager>

    <LinearLayout
        android:orientation="horizontal"
        android:id="@+id/imgslider_circle_layout"
        android:gravity="center"
        android:layout_marginTop="5dp"
        android:layout_width="match_parent"
        android:layout_height="20dp">
    </LinearLayout>

    <LinearLayout
        android:id="@+id/button_layout_linear"
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:layout_width="150dp"
            android:layout_height="wrap_content"
            android:text="@string/cancel"
            android:id="@+id/cancel_button"
            android:layout_gravity="center"/>

        <Button
            android:text="@string/select_background"
            android:layout_width="150dp"
            android:layout_height="wrap_content"
            android:id="@+id/set_background_button"
            android:layout_gravity="center"/>



       </LinearLayout>

</LinearLayout>

...

private void changeSliderCircles(int position) {
    sliderCirclesLayout.removeAllViews();

    for (int i = 0, a = adapter.getCount(); i < a; i++) {
        ImageView temp = new ImageView(ImageGalleryActivity.this);
        if (i == position) {
            temp.setImageDrawable(getResources().getDrawable(R.drawable.slider_circle_dark));
        } else {
            temp.setImageDrawable(getResources().getDrawable(R.drawable.slider_circle_light));
        }
        temp.setId(i);
        sliderCirclesLayout.addView(temp);
    }
}

On my Galaxy s4...

and on an old Lenovo tablet running 4.1

Thanks for putting in the pictures for me Jonathan727!

Solution

Use only one size tag:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <size android:width="10dp" android:height="10dp"/>
    <solid android:color="@color/transparant_grey_light"/>
</shape>

Answered By - tachyonflux