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>

Mondrian

can you post your XML.It seems padding in XML – Right

@Indiandroid done, but I'm quite sure it is not a problem with the xml layout. – Mondrian

fix the height of CirclePageIndicator and check it. – Right

@Indiandroid what is wrong with wrap content? – Mondrian

I can't say ..i have to make demo and use the library and it is long process....but for testing purpose fixed it's size and check it. – Right

did u try removing the margin bottom tag and seeing the if the dot structure is maintained ? – Merrymerryandrew

set everything programmatically ! set stroke black, set fill white ! – Yahoo

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"
    />

Thermionic

Summarize: ADD PADDING! – Accomplishment

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" />

Merrymerryandrew