Android on click listener on the particular item of a page which is in ViewPager

Question

I have seen how to get the position of the page from view pager here but I want to know is there any way to get the click action on the particular item in a page of the view pager.

Ex: I have a view pager contains 3 pages say Page1, Page2, and Page3. And in Page1 there are two items, 1 image 1 text view, I want to do the click action image.

This is what I tried:

Adapter:

public class CustomPagerAdapter extends PagerAdapter {

    private Context mContext;

    public CustomPagerAdapter(Context context) {
        mContext = context;
    }

    @Override
    public Object instantiateItem(ViewGroup collection, int position) {

        BottomNavigationModel modelObject = BottomNavigationModel.values()[position];
        LayoutInflater inflater = LayoutInflater.from(mContext);
        ViewGroup layout = (ViewGroup) inflater.inflate(modelObject.getLayoutResId(), collection, false);
        collection.addView(layout);

        return layout;
    }

    @Override
    public void destroyItem(ViewGroup collection, int position, Object view) {
        collection.removeView((View) view);
    }

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

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

    @Override
    public CharSequence getPageTitle(int position) {
        BottomNavigationModel customPagerEnum = BottomNavigationModel.values()[position];
        return mContext.getString(customPagerEnum.getTitleResId());
    }

}

Activity:

viewPager.setAdapter(new CustomPagerAdapter(this));

viewPager.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
            // Not calling this one TODO here
            }
        });

Model:

public enum BottomNavigationModel {

    ONE(R.string.page_one, R.layout.view_row_one),
    TWO(R.string.page_two, R.layout.view_row_two),
    THREE(R.string.page_three, R.layout.view_row_three);

    private int mTitleResId;
    private int mLayoutResId;

    BottomNavigationModel(int titleResId, int layoutResId) {
        mTitleResId = titleResId;
        mLayoutResId = layoutResId;
    }

    public int getTitleResId() {
        return mTitleResId;
    }

    public int getLayoutResId() {
        return mLayoutResId;
    }

}

layout view_row_one:

<?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="wrap_content"
    android:layout_gravity="bottom"
    android:gravity="center_horizontal"
    android:orientation="horizontal">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/dashboard_iv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/nav_dashboard_blue" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginBottom="5dp"
            android:text="Dashboard"
            android:textSize="12sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/messenger_iv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/nav_messenger_white" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginBottom="5dp"
            android:text="Messenger"
            android:textSize="12sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/merlin_iv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/nav_custom_white" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginBottom="5dp"
            android:text="Custom"
            android:textSize="12sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/score_iv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/nav_score_white" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginBottom="5dp"
            android:text="Score"
            android:textSize="12sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/tasks_iv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/nav_tasks_white" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginBottom="5dp"
            android:text="Tasks"
            android:textSize="12sp" />
    </LinearLayout>

</LinearLayout>

Here I wanna click on any image view from my Activity.

I expect that every page is a fragment. So why not to simply handle the onClick on the fragment's class where the button is defined? or am I missing something? — Lino, Aug 10 '18 at 13:41

score 0 · Answer 1 · answered Aug 10 '18 at 13:49

You should override the getItem() method of the FragmentPagerAdapter or FRagmentStatePagerAdapter class like this:

@Override
public Fragment getItem(int position) {
    switch (position) {
        case 0:
            return new DescriptionFragment();
        case 1:
            return new ReviewFragment();
        case 3:
            return new OrderFragment();
        default:
            return null;
    }
}

As you can see, depending on the tab position you clicked, a given fragment is inflated. So you should implement the required button click action in these separate fragments as you would in any activity.

score 0 · Answer 2 · answered Aug 10 '18 at 14:55

I think this can works for you:

In your instantiateItem() method you can get the image and set the click listener on it like below:

@Override
public Object instantiateItem(ViewGroup collection, int position) {

    BottomNavigationModel modelObject = BottomNavigationModel.values()[position];
    LayoutInflater inflater = LayoutInflater.from(mContext);
    ViewGroup layout = (ViewGroup) inflater.inflate(modelObject.getLayoutResId(), collection, false);
    ImageView dashboardImage = (ImageView) layout.findViewById(R.id.dashboard_iv);
    dashboardImage.setOnClickListener(myClickListener);
    //you cann add all wanted click on images here. 
    collection.addView(layout);

    return layout;
}

But I can reckon, this design is not the perfect one here.

Android on click listener on the particular item of a page which is in ViewPager

2 Answers2