Implement Listeners in View Pager

Question

Hi I'm making an app with a ViewPager using this tutorial http://mobile.tutsplus.com/tutorials/android/android-user-interface-design-horizontal-view-paging and the cool thing about the ViewPager used here is that every page has a different layout based on xml. Problem is I've tried different ways of making the buttons I create in the layout to work but I cant quite find a place to put the onClick listeners. Here's the Adapter for the ViewPager:

class UniversePagerAdapter extends PagerAdapter {

protected static final String[] CONTENT = new String[] { "One", "Two", "Three", "Four", };

public int getCount() {
    return 4;
}

Dashboard activity;
public UniversePagerAdapter(Dashboard activity){
    this.activity = activity;
}

public Object instantiateItem(final View collection, int position) {
    LayoutInflater inflater = (LayoutInflater) collection.getContext()
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    int resId = 0;
    switch (position) {
    case 0:
        resId = R.layout.one;
        break;
    case 1:
        resId = R.layout.two;
        break;
    case 2:
        resId = R.layout.three;
        break;
    case 3:
        resId = R.layout.four;
        break;
    }
    View view = inflater.inflate(resId, null);
    ((ViewPager) collection).addView(view, 0);
    return view;
}



@Override
public void destroyItem(View arg0, int arg1, Object arg2) {
    ((ViewPager) arg0).removeView((View) arg2);
}

@Override
public boolean isViewFromObject(View arg0, Object arg1) {
    return arg0 == ((View) arg1);
}

@Override
public Parcelable saveState() {
    return null;
}

@Override
public CharSequence getPageTitle(int position) {
  return UniversePagerAdapter.CONTENT[position % CONTENT.length];
}
}

And here's the part where it's bound:

public class Dashboard extends BaseActivity implements OnClickListener {

Button bNewButton;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.dashboard);

    setAdapter();

}

public void initPagerView(int position, View view) {

    bNewButton = (Button) view.findViewById(R.id.bNewUniverse);
    bNewButton.setOnClickListener(this);

}

private void setAdapter() {
    // TODO Auto-generated method stub
    mAdapter = new UniversePagerAdapter(Dashboard.this);

    mPager = (ViewPager) findViewById(R.id.pager);
    mPager.setAdapter(mAdapter);
    mPager.setCurrentItem(1);

    mIndicator = (TitlePageIndicator) findViewById(R.id.indicator);
    mIndicator.setViewPager(mPager);
}                   

@Override
public void onClick(View v) {
    // TODO Auto-generated method stub
    Toast.makeText(getApplicationContext(), "It Lives!!!!",
            Toast.LENGTH_LONG).show();
}
}

The problem I have is initializing and using objects created in the xml layouts, since they're all in the Adapter. Please help me out?

Answer 1

One of approaches is:

Make your custom view that extends ViewGroup(RelativeLayout,LinearLayout...) for every custom page. Pass context to your class that extend View

public class TestView extends RelativeLayout{


public enum Action{
   ACTION_TEST_BTN,
   ACTION_SOMETHING_ELSE
}

public interface MyTestViewActionListener{
      public void onAction(Action myAction);
}


private MyTestViewActionListener listener;

public TestView(Context context) {
    super(context);
    LayoutInflater mInflater = (LayoutInflater) context
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    mInflater.inflate(R.layout.left, this, true);
  }
public void setListener(MyTestViewActionListener listener){

   this.listener = listener;    

   Button btnTest = (Button)findViewById(this,R.id.btnTest);
   btnTest.setOnClickListener(
                new OnClickListener() {

                    @Override
                    public void onClick(View v) {
                                                listener.onAction(Action.ACTION_TEST_BTN);

                    }
                });
}
.
.
.
}

Next you can in your PageAdapter:

TestView testV = new TestView(activity);
testV.setListener(listener); 

Define constructor that look like this one

public MyPagerAdapter(<YourActivityClass> activity, MyTestViewActionListener listener){
        this.activity = activity;
        this.listener = listener;
    }

At the end you can in your activity/fragment implement interface MyTestViewActionListener and implement method:

onAction(Action action)
{
  switch(action)
   case(Action.ACTION_TEST_BTN):
    //do something
   break;
  .
  .
}

Answer 2

If you have buttons in your layout, after inflating the view in instantiateItem, you can call findViewById on the view you just inflated to obtain your buttons. Something like :

Button btn = (Button) view.findViewById(R.id.yourBtn);
btn.setOnClickListener( new OnClickListener() {
            });

Answer 3

you can have function called initPagerView in your activity as following:

public void initPagerView(int position,View view){
   //Here you can use view.findViewById();
}

And in adapter:

private class MyPagerAdapter extends PagerAdapter {
    public int getCount() {
        return 5;
    }
    <YourActivityClass> activity;
    public MyPagerAdapter(<YourActivityClass> activity){
        this.activity=activity;
    }
    public Object instantiateItem(View collection, int position) {
        LayoutInflater inflater = (LayoutInflater) collection.getContext()
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        int resId = 0;
        switch (position) {
        case 0:
            resId = R.layout.farleft;
            break;
        case 1:
            resId = R.layout.left;
            break;
        case 2:
            resId = R.layout.middle;
            break;
        case 3:
            resId = R.layout.right;
            break;
        case 4:
            resId = R.layout.farright;
            break;
        }
        View view = inflater.inflate(resId, null);
        ((ViewPager) collection).addView(view, 0);
        activity.initPagerView(position,view);
        return view;
    }
    @Override
    public void destroyItem(View arg0, int arg1, Object arg2) {
        ((ViewPager) arg0).removeView((View) arg2);
    }
    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {
        return arg0 == ((View) arg1);
    }
    @Override
    public Parcelable saveState() {
        return null;
    }
}

This is one way to do it. Now in initPagerView(int position,View view) which is in your activity you can initialize your views which are added in view pager from adapter.

You can also create an Interface like:

public Interface PagerViewInitialiser{
   public initPagerView(int position,View view);
} 

and make your activity implement this.

And in your pager adapter:

PagerViewInitialiser activity;
public MyPagerAdapter(PagerViewInitialiser  activity){
    this.activity=activity;
}