Andrei
Andrei

Reputation: 63

Android scroller paging with page indicator

I am about finishing my first android app, and i have some questions to which i could not find an answer.

I would like to use a horizontal scroller in which to display several pictures. For that i need two things:

  1. Paging enabled, so that the user can see the pictures one by one in the scroller.
  2. Some kind of indicator to show me the index of the picture currently displayed.

If i manage to do the paging, i could probably display a text like 1/4 (2/4 and so on) if i had 4 pictures, but it is not very nice. I would like to have something more like the iPhone has with the gray/white dots. Is there anything like that, or would i have to implement it by adding content at runtime? (adding imageviews according to the number of the pictures and then changing images for them as the user scrolls to show progress)

Thank you.

Upvotes: 3

Views: 12222

Answers (3)

sleep
sleep

Reputation: 4944

Because I was already using ViewPager for the swiping UI, I used the excellent ViewPagerIndicator. It took about 5 minutes to integrate.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#000000">

    <include android:id="@+id/titlebar_include" layout="@layout/titlebar"/>
    <include layout="@layout/menu"/>

    <android.support.v4.view.ViewPager
        android:layout_width="fill_parent" 
        android:id="@+id/product_viewpager"
        android:layout_height="0dp"
        android:layout_weight="1"
        />

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

Upvotes: 5

Paresh Mayani
Paresh Mayani

Reputation: 128428

Here is the solution you can try: PageViews and PageIndicator by GreenDroid.

You can also have a look at sample market app: https://market.android.com/details?id=com.cyrilmottier.android.gdcatalog

Upvotes: 1

Andrei
Andrei

Reputation: 63

I found the answer i was looking for: i used the Gallery widget and for the indicator dots i used ImageViews and wrote a couple of lines of code to update the selected image dot.

Upvotes: 1

Related Questions