Show an Imageview inside in centre of other Imageview in Android

I want to show app intro indicator in this form Image

I have created layout as:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:visibility="visible">

    <LinearLayout
        android:id="@+id/indicatorLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        android:orientation="horizontal">

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <ImageView
                android:id="@+id/outerImage1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/rounded_rect_white" />

            <ImageView
                android:id="@+id/ierImage1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                android:src="@drawable/rounded_cell" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp">

            <ImageView
                android:id="@+id/outerImage2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/rounded_rect_white" />

            <ImageView
                android:id="@+id/ierImage2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                android:src="@drawable/rounded_cell"
                android:visibility="gone"/>
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp">


            <ImageView
                android:id="@+id/outerImage3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/rounded_rect_white" />


            <ImageView
                android:id="@+id/ierImage3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/rounded_cell"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                android:visibility="gone" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp">


            <ImageView
                android:id="@+id/outerImage4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/rounded_rect_white" />

            <ImageView
                android:id="@+id/ierImage4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                android:src="@drawable/rounded_cell"
                android:visibility="gone" />
        </RelativeLayout>
    </LinearLayout>

    <Button
        android:id="@+id/letStartedButton"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_below="@+id/indicatorLayout"
        android:layout_centerHorizontal="true"
        android:layout_margin="20dp"
        android:background="@drawable/login_button_background"
        android:text="Let's Get Started"
        android:textAllCaps="false"
        android:textColor="@android:color/white"
        android:textSize="16sp" />

</RelativeLayout>

In this layout for outer and ier Imageview, I am using two drawables

selected.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid
        android:color="@android:color/white"/>

    <size
        android:width="15dp"
        android:height="15dp"/>

    <stroke android:color="@android:color/black"
        android:width="2dp"/>
</shape>

and for unselected.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid
        android:color="@android:color/black"/>

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

But the problem is that on some device the ier Image is appearing in centre of outer image but on some device ier image is not appearing in centre. Please somebody tell me solution.