Usman Riaz Usman Riaz - 6 months ago 100
Android Question

View pager With Fragments and Indicator

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

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.