Circle pager indicator doesn't look round

user1940676 picture user1940676 · Oct 21, 2013 · Viewed 11.1k times · Source

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).

enter image description here

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):

enter image description here

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

alex picture alex · Oct 24, 2013

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