How to set OnClickListener in ViewPager

Question

I'm new to Android development and I'm studying to code & design an Android project. I have problem with ViewPager and can't find answer on this site or via a Google search.

Problem: I can't make a Button execute its action while it's in ViewPager.

You can see my project & apk file here: https://dl.dropbox.com/u/9820517/ForOneTimeDownload/TestPagerView.rar

Here is my PagerDemo.java:

 public class PagerDemo extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        this.requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_pager_demo);

        myPagerAdapter adapter = new myPagerAdapter();
        ViewPager myPager = (ViewPager) findViewById(R.id.myfivepanelpager);
        myPager.setAdapter(adapter);
        myPager.setCurrentItem(2);

        SetAllBtnFunc();
    }

    public void SetAllBtnFunc() {
        //all func
        View.OnTouchListener touch = new View.OnTouchListener() {

                public boolean onTouch(View v, MotionEvent event) {
                    // TODO Auto-generated method stub
                    Log.d("hlv_trinh", "Button be Touched!");
                    return false;
                }
            };

            View.OnClickListener click = new View.OnClickListener() {

                public void onClick(View v) {
                    // TODO Auto-generated method stub
                    Log.d("hlv_trinh", "Button be Clicked!");
                }
            };

        //Get view
        View v = getLayoutInflater().inflate(R.layout.middle, null);

        Button b = (Button) v.findViewById(R.id.myBtn);
        b.setOnClickListener(click);
        b.setOnTouchListener(touch);
        }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_pager_demo, menu);
        return true;
    }
    private class myPagerAdapter extends PagerAdapter {

        public int getCount() {
            return 5;
        }

        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);

            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;
        }
    }
    }

My layout content here:

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Middle"
        android:textSize="30dp" >
    </TextView>

    <Button
        android:id="@+id/myBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Test Click" />
</LinearLayout>

Answer 1

Here is an easy solution.
In your layout XML, in the button tag, set android:onClick="AnyName", then on your PagerDemo.java, place:

public void AnyName(View v) {
    // Do your stuff
}

That sets onClickListener in a ViewPager.

Answer 2

Although it is too late for this answer in 2021, I thought of sharing this as it seemed the easiest and the simplest one:

public class ViewPagerAdapter extends PagerAdapter {

    private Context context;
    private String[] imageUrls;

    public ViewPagerAdapter(Context context, String[] imageUrls) {
        this.context = context;
        this.imageUrls = imageUrls;
    }

    @Override
    public int getCount() {
        return imageUrls.length;
    }

    @Override
    public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
        return view == object;
    }

    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        ImageView imageView = new ImageView(context);
        imageView.setScaleType(ImageView.ScaleType.FIT_XY);
        Glide.with(context)
                .load(imageUrls[position])
                .thumbnail(Glide.with(context).load(R.drawable.loading))
                .dontAnimate()
                .centerCrop()
                .into(imageView);

        container.addView(imageView);

        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(position == 0) {
                    Toast.makeText(context, "One", Toast.LENGTH_SHORT).show();
                } else if(position == 1) {
                    Toast.makeText(context, "Two", Toast.LENGTH_SHORT).show();
                } else if(position == 2) {
                    Toast.makeText(context, "Three", Toast.LENGTH_SHORT).show();
                }
            }
        });

        return imageView;
    }

Here, we just need to access the position of the ImageView from the instantiated Adapter item.

Answer 3

i found something tricky solution for the view pager.As view pager is dont have any click event you can try click events on the child of the view pager.What i mean is to set the on Click listener on each page's root element.That will work surely.

Answer 4

I did this problem as follows

You must first implement the ClickableViewPager

package ai.units;

import android.content.Context;
import android.util.AttributeSet;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.View;

import androidx.viewpager.widget.ViewPager;

public class ClickableViewPager extends ViewPager {

  private OnItemClickListener mOnItemClickListener;

  public ClickableViewPager(Context context) {
    super(context);
    setup();
  }

  public ClickableViewPager(Context context, AttributeSet attrs) {
    super(context, attrs);
    setup();
  }

  private void setup() {
    final GestureDetector tapGestureDetector = new    GestureDetector(getContext(), new TapGestureListener());

    setOnTouchListener(new OnTouchListener() {
      @Override
      public boolean onTouch(View v, MotionEvent event) {
        tapGestureDetector.onTouchEvent(event);
        return false;
      }
    });
  }

  public void setOnItemClickListener(OnItemClickListener onItemClickListener) {
    mOnItemClickListener = onItemClickListener;
  }

  public interface OnItemClickListener {
    void onItemClick(int position);
  }

  private class TapGestureListener extends GestureDetector.SimpleOnGestureListener {

    @Override
    public boolean onSingleTapConfirmed(MotionEvent e) {
      if(mOnItemClickListener != null) {
        mOnItemClickListener.onItemClick(getCurrentItem());
      }
      return true;
    }
  }
}

and then in xml like this

  <ai.units.ClickableViewPager
   android:id="@+id/viewPager"
   android:layout_width="match_parent"
   android:layout_height="match_parent" />

You can now use the setOnItemClickListener method

viewPager.setOnItemClickListener(new ClickableViewPager.OnItemClickListener() {
     @Override
     public void onItemClick(int position) {
       Log.i(TAG, "onItemClick: position = "+position);
     }
   });

NOTE

ai.units. The name of my package is and you have to move it with your own package

The main link of the answer that has been take from there

Answer 5

viewpager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageSelected(int Position) {
            position=Position;
        }
 });

You will use any view for clicking without viewpager and go to details by using the selected position of viewpager

Answer 6

View Pager click to event position Like your side 3 fragment and click position event different different API or any call method then used my code.

viewPager = findViewById(R.id.viewPagerTab);
tabLayout = findViewById(R.id.tabLayout);

TabViewPagerAdapter viewPagerAdapter = new TabViewPagerAdapter(getSupportFragmentManager(), this);
    viewPagerAdapter.addFrag(HomeFragment.newInstance(), null, "Home", 0);
    viewPagerAdapter.addFrag(LiveCallsFragment.newInstance(), null, "Live Calls", 1);
    viewPagerAdapter.addFrag(CallDetailsFragment.newInstance(), null, "Call Details", 2);


viewPager.setAdapter(viewPagerAdapter);

viewPager.setOffscreenPageLimit(viewPagerAdapter.getCount() - 1);

tabLayout.setupWithViewPager(viewPager);

viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            if (position == 2){
                chePassWordApi();
               // Toast.makeText(HomeActivity.this, " Rahul call", Toast.LENGTH_SHORT).show();
            }
        }

        @Override
        public void onPageSelected(int position) {
            if (position == 0){
                chePassWordApi();
               // Toast.makeText(HomeActivity.this, " Rahul Home", Toast.LENGTH_SHORT).show();
            }else if (position == 1){
                chePassWordApi();
               // Toast.makeText(HomeActivity.this, "Rahul Live", Toast.LENGTH_SHORT).show();
            }
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    });