Button of a Fragment inside ViewPager trigger onClickListener on wrong reference

Question

Sorry about my dumb title, I will describe it clearly below:

Situation

I have a ViewPager with 4 OnBoardingFragments inside. Each Fragment have exactly same layout which was inflatedfrom same xml file. This layout contain a Button which I called btnNext and I set the OnClickListener for it.

Function getItem of my PagerAdapter

@Override
public Fragment getItem(int position) {
    String title, description, button;
    int resource;
    boolean end = false;
    switch (position) {
        case 0:
            title = context.getString(R.string.on_boarding_title_1);
            description = context.getString(R.string.on_boarding_description_1);
            resource = R.drawable.on_boarding_bg_0;
            button = context.getString(R.string.on_boarding_button_1);
            break;
        case 1:
            title = context.getString(R.string.on_boarding_title_2);
            description = context.getString(R.string.on_boarding_description_2);
            resource = R.drawable.on_boarding_bg_1;
            button = context.getString(R.string.on_boarding_button_2);
            break;
        case 2:
            title = context.getString(R.string.on_boarding_title_3);
            description = context.getString(R.string.on_boarding_description_3);
            resource = R.drawable.on_boarding_bg_2;
            button = context.getString(R.string.on_boarding_button_3);
            break;
        default:
            title = context.getString(R.string.on_boarding_title_4);
            description = context.getString(R.string.on_boarding_description_4);
            resource = R.drawable.on_boarding_bg_3;
            button = context.getString(R.string.on_boarding_button_4);
            end = true;
    }
    return OnBoardingFragment.newInstance(title, description, resource, button, end);
}

@Override
public int getCount() {
    return 4;
}

Functions of OnBoardingFragment:

public static OnBoardingFragment newInstance(String title, String description, int resource,
                                             String button, boolean end) {
    Bundle bundle = new Bundle();
    bundle.putString(EXTRA_TITLE, title);
    bundle.putString(EXTRA_DESCRIPTION, description);
    bundle.putInt(EXTRA_IMAGE, resource);
    bundle.putString(EXTRA_BUTTON, button);
    bundle.putBoolean(EXTRA_END, end);
    OnBoardingFragment fragment = new OnBoardingFragment();
    fragment.setArguments(bundle);
    return fragment;
}

@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    Bundle bundle = getArguments();
    if (bundle != null) {
        title = bundle.getString(EXTRA_TITLE);
        description = bundle.getString(EXTRA_DESCRIPTION);
        button = bundle.getString(EXTRA_BUTTON);
        end = bundle.getBoolean(EXTRA_END);
        imageResource = bundle.getInt(EXTRA_IMAGE);
        show log ---> Log.e(this.toString() + "/" + end + "/" + title);
    }
}

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    View rootView = inflater.inflate(R.layout.on_boarding_fragment, container, false);
    TextView tvTitle = (TextView) rootView.findViewById(R.id.tv_title);
    TextView tvDescription = (TextView) rootView.findViewById(R.id.tv_description);
    TextView btnDiscovery = (TextView) rootView.findViewById(R.id.tv_discovery);
    imageView = (ImageView) rootView.findViewById(R.id.iv_image);
    final Button btnNext = (Button) rootView.findViewById(R.id.btn_next);
    if (end) {
        btnDiscovery.setVisibility(View.VISIBLE);
        btnDiscovery.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                startRegionActivity();
            }
        });
    }
    btnNext.setText(button);
    btnNext.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            show log ---> Log.e(OnBoardingFragment.this.toString() + "/" + end + "/" + title + "/" + ((Button)v).getText());
            if (end) {
                ((SplashActivity) getActivity()).gotoNextPage();
            } else {
                startLoginActivity();
            }
        }
    });
    tvTitle.setText(title);
    tvDescription.setText(description);
    ImageUtils.loadBitmap(getActivity(), imageResource, imageView, 0.8f, new ImageUtils.LoadBitmapCallback() {
        @Override
        public void onLoadComplete(ImageView imageView) {

        }

        @Override
        public void onLoadFail() {

        }
    });

    return rootView;
}

The problem is

When my app started it show the first Fragment, then I pressed the Button and trigger onItemClick() method, and the method was referenced to the last Fragment.

Log when create Fragment

OnBoardingFragment{a8ede47 id=0x7f10013b}/false/XIN CHÀO!
OnBoardingFragment{8787674 #0 id=0x7f10013b}/false/BÁN LIỀN TAY, KIẾM TIỀN NGAY
OnBoardingFragment{119f79d #1 id=0x7f10013b}/false/CHAT MIỄN PHÍ
OnBoardingFragment{1ee7412 #2 id=0x7f10013b}/true/NGƯỜI THẬT, HÀNG THẬT

Log when onClickListener() was triggered

OnBoardingFragment{1ee7412 #2 id=0x7f10013b}/true/NGƯỜI THẬT, HÀNG THẬT/Đi chợ ngay nào!

Log when the btnNext was initialized:

button: android.support.v7.widget.AppCompatButton{17c69e97 VFED..C. ......I. 0,0-0,0 #7f1002c8 app:id/btn_next}
button: android.support.v7.widget.AppCompatButton{31941c VFED..C. ......I. 0,0-0,0 #7f1002c8 app:id/btn_next}
button: android.support.v7.widget.AppCompatButton{30765b87 VFED..C. ......I. 0,0-0,0 #7f1002c8 app:id/btn_next}
button: android.support.v7.widget.AppCompatButton{9cf19e VFED..C. ......I. 0,0-0,0 #7f1002c8 app:id/btn_next}

Question

Why it happen and how to resolve?

Answer 1

Please refer the sample in the below link for using view pager with multiple fragments: https://guides.codepath.com/android/ViewPager-with-FragmentPagerAdapter