Circle pager indicator doesn't look round

Question

I am using the Sherlock pager indicator and the circles in the pager don't look round enough(I have tried different colors and you can still see they are not round).

Here is the style I have been using for the CircleIndicator

<style name="CustomCirclePageIndicator">
    <item name="fillColor">@color/light_blue</item>
    <item name="unselectedColor">@android:color/white</item>
    <item name="centered">true</item>
    <item name="strokeColor">@null</item>
    <item name="pageColor">@android:color/white</item>
</style>

I want to achieve the following result(but with different colors):

Here is the layout xml

<?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="match_parent"
    android:background="@color/brown"
    android:orientation="vertical" >

    <RelativeLayout
        android:id="@+id/top_layout"
        android:layout_width="fill_parent"
        android:layout_height="170.00dp"
        android:background="@color/light_blue" >

        <ImageView
            android:id="@+id/logo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="5dp"
            android:background="@drawable/login_logo" />

        <TextView
            android:id="@+id/logo_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/logo"
            android:layout_centerHorizontal="true"
            android:text="..."
            android:textSize="16sp" />
    </RelativeLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_marginTop="20dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/titles"
        android:layout_below="@id/top_layout"
        android:layout_centerHorizontal="true"
        android:overScrollMode="never" >
    </android.support.v4.view.ViewPager>

    <com.viewpagerindicator.CirclePageIndicator
        android:id="@+id/titles"
        style="@style/CustomCirclePageIndicator"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="20dp" />

</RelativeLayout>

Answer 1

Add PADDING

Have look at the manual example page for circle indicator:

https://github.com/JakeWharton/Android-ViewPagerIndicator/blob/master/sample/res/layout/simple_circles.xml

How does your indicator look, when you just use the basic properties provided in the example?

   <com.viewpagerindicator.CirclePageIndicator
    android:id="@+id/indicator"
    android:padding="10dip"
    android:layout_height="wrap_content"
    android:layout_width="fill_parent"
    />

Answer 2

add padding to this code snippet

<com.viewpagerindicator.CirclePageIndicator
    android:id="@+id/titles"
    style="@style/CustomCirclePageIndicator"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:padding="10dp"
    android:layout_marginBottom="20dp" />