CODEWITHSUNDEEP
androidviewpagerindicator
user1940676
user1940676

Reputation: 4448

Circle pager indicator doesn't look round

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>

Upvotes: 13

Views: 11240

Answers (2)

alex
alex

Reputation: 5684

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

Upvotes: 39

DSS
DSS

Reputation: 7259

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

Upvotes: 4

Related Questions