View pager With Fragments and Indicator

Question

I am developing an app in which I have implemented ViewPager I want the user to swipe and get the next screen. I am implementing fragments. All is well but I want one more thing. I want to indicate which screen is active now, just like tabs. I searched over the internet but did not find any thing helpful. If there is an idea that would be appriciated.

---

Here is my view pager adapter and fragment activity and xml layout

import java.util.ArrayList;
import java.util.List;

import com.viewpagerindicator.TitlePageIndicator;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.widget.Toast;

public class MainActivity extends FragmentActivity implements OnPageChangeListener {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        List<Fragment> list = new ArrayList<Fragment>();
        list.add(MyFragment.newInstance("fragment 1"));
        list.add(MyFragment.newInstance("fragment 2"));
        list.add(MyFragment.newInstance("fragment 3"));
        MyPagerAdapter a = new MyPagerAdapter(getSupportFragmentManager(), list);
        ViewPager pager = (ViewPager) findViewById(R.id.viewpager);
        pager.setAdapter(a);
        
    }

    @Override
    public void onPageScrollStateChanged(int arg0) {
        // TODO Auto-generated method stub
        
    }

    @Override
    public void onPageScrolled(int arg0, float arg1, int arg2) {
        // TODO Auto-generated method stub
    }

    @Override
    public void onPageSelected(int arg0) {
        // TODO Auto-generated method stub
        
    }


}

adapter.java

package com.example.fragments;

import java.util.List;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.PagerAdapter;
import android.view.View;

public class MyPagerAdapter extends FragmentPagerAdapter {
    List<Fragment> fragments;
    public MyPagerAdapter(FragmentManager fm,List<Fragment> f) {
        super(fm);
        this.fragments = f;
    }
    
    @Override
    public Fragment getItem(int arg0) {
        
        return fragments.get(arg0);
    }
    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return fragments.size();
    }
}

main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >


    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_below="@+id/titles"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

</RelativeLayout>

Answer 1

I created a library to address the need for a page indicator in a ViewPager. My library contains a View called DotIndicator. To use my library, add compile 'com.matthew-tamlin:sliding-intro-screen:3.2.0' to your gradle build file.

The View can be added to your layout by adding the following:

    <com.matthewtamlin.sliding_intro_screen_library.indicators.DotIndicator
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:numberOfDots=YOUR_INT_HERE
            app:selectedDotIndex=YOUR_INT_HERE/>

The above code perfectly replicates the functionality of the dots on the Google Launcher homescreen, however if you want to further customise it then the following attributes can be added:

• app:unselectedDotDiameter and app:selectedDotDiameter to set the diameters of the dots
• app:unselectedDotColor and app:selectedDotColor to set the colors of the dots
• app:spacingBetweenDots to change the distance between the dots
• app:dotTransitionDuration to set the time for animating the change from small to big (and back)

Additionally, the view can be created programatically using:

DotIndicator indicator = new DotIndicator(context);

Methods exist to modify the properties, similar to the attributes. To update the indicator to show a different page as selected, just call method indicator.setSelectedItem(int, true) from inside ViewPager.OnPageChangeListener.onPageSelected(int).

Here's an example of it in use:

If you're interested, the library was actually designed to make intro screens like the one shown in the above gif.

Github source available here: https://github.com/MatthewTamlin/SlidingIntroScreen

Answer 2

You basically have three options:

1. Use the android native PagerTitleStrip

It's very easy to implement, simply add it as a child item to your ViewPager in the xml and define the gravity as TOP or BOTTOM like this:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">

        <android.support.v4.view.PagerTitleStrip
            android:id="@+id/pager_title_strip"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom" />

    </android.support.v4.view.ViewPager>
</RelativeLayout>

But to be honest it doesn't look very great and I can't say anything about backwards or forwards compatibility. The above was tested in API 17

2. Use a 3rd party library

Like the insanely good ViewPagerIndictor from Jake Wharton

3. Code an implementation of your own

Like suggested in the answer from shruti. Even in this case though I would recommend you to code alongside Jake Whartons example, it's really that amazing!

Answer 3

see for this I have created a class to create page indicator

public class DotsScrollBar
{
    LinearLayout main_image_holder;
    public static void createDotScrollBar(Context context, LinearLayout main_holder,int selectedPage,int count)
    {
        for(int i=0;i<count;i++)
        {
            ImageView dot = null;
            dot= new ImageView(context);
            LinearLayout.LayoutParams vp = 
                new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, 
                                LayoutParams.WRAP_CONTENT);
            dot.setLayoutParams(vp);    
            if(i==selectedPage)
            {
                try {
                    dot.setImageResource(R.drawable.paging_h);
                } catch (Exception e) 
                {
                    Log.d("inside DotsScrollBar.java","could not locate identifier");
                }
            }else
            {
                dot.setImageResource(R.drawable.paging_n);
            }
            main_holder.addView(dot);
        }
        main_holder.invalidate();
    }
}

now in your activity class call the function createDotScrollBar as below:

public void updateIndicator(int currentPage) {
        dots_scrollbar_holder.removeAllViews();
        DotsScrollBar.createDotScrollBar(this, mDotsScrollbarHolder,
                mCurrentPage, totalNumberOfPages);
    }

and call updateIndicator function inside onPageScrollStateChanged

like this :

    @Override
        public void onPageScrollStateChanged(int state) {
            // TODO Auto-generated method stub
switch (state) {

        case 0:
    updateIndicator(mCurrentPage);
break;
        }

hope this will do the trick.