在viewpager布局上的不同视图中添加按钮/功能？

Question

I'm a little desperate with viewpagers / different layouts shown in them.

Summarized: Switching through different layouts works perfectly. Now I want to implement buttons / functionality on the different layouts, which doesn't work.

I have the following viewpager which functions well. It iterates through the layouts-list and shows the different layouts.

My Activity

public static final String LOG_TAG = MainActivity.class.getSimpleName();

private ViewPager viewPager;
private ViewPagerAdapter viewPagerAdapter;
private LinearLayout dotsLayout;
private TextView[] dots;
private int[] layouts;
private Button btnSkip, btnNext;

@
Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);


    requestWindowFeature(Window.FEATURE_NO_TITLE);
    getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

    setContentView(R.layout.activity_swipe);

    viewPager = (ViewPager) findViewById(R.id.view_pager);
    dotsLayout = (LinearLayout) findViewById(R.id.layoutDots);
    //btnSkip = (Button) findViewById(R.id.btn_skip);
    btnNext = (Button) findViewById(R.id.btn_next);

    layouts = new int[] {
        R.layout.activity_mmg_description_start,
            R.layout.activity_mmg_question_1,
            R.layout.activity_mmg_question_2,
            R.layout.activity_mmg_question_3,
            R.layout.activity_mmg_question_4,
            R.layout.activity_mmg_question_5,
            R.layout.activity_mmg_question_6,
            R.layout.activity_mmg_question_7,
            R.layout.activity_mmg_question_8,
            R.layout.activity_mmg_question_9,
            R.layout.activity_mmg_question_10,
            R.layout.activity_mmg_question_11,
            R.layout.activity_mmg_question_12,
            R.layout.activity_mmg_question_13,
            R.layout.activity_mmg_question_14
    };

    // adding bottom dots
    addBottomDots(0);

    viewPagerAdapter = new ViewPagerAdapter();
    viewPager.setAdapter(viewPagerAdapter);
    viewPager.addOnPageChangeListener(viewPagerPageChangeListener);


}

@
Override
public void onBackPressed() {}

public void btnNextClick(View v) {
    // checking for last page
    // if last page home screen will be launched
    int current = getItem(1);
    if (current < layouts.length) {
        // move to next screen
        viewPager.setCurrentItem(current);
    } else {
        launchHomeScreen();
    }
}

ViewPager.OnPageChangeListener viewPagerPageChangeListener = new ViewPager.OnPageChangeListener() {

    @
    Override
    public void onPageSelected(int position) {
        addBottomDots(position);

        // changing the next button text 'NEXT' / 'GOT IT'
        if (position == layouts.length - 1) {
            // last page. make button text to GOT IT
            btnNext.setText(getString(R.string.start_measurement_manual));
            //btnSkip.setVisibility(View.GONE);
        } else {
            // still pages are left
            btnNext.setText(getString(R.string.next));
            //btnSkip.setVisibility(View.VISIBLE);
        }
    }

    @
    Override
    public void onPageScrolled(int arg0, float arg1, int arg2) {

    }

    @
    Override
    public void onPageScrollStateChanged(int arg0) {

    }
};


private void addBottomDots(int currentPage) {
    dots = new TextView[layouts.length];

    dotsLayout.removeAllViews();
    for (int i = 0; i < dots.length; i++) {
        dots[i] = new TextView(this);
        dots[i].setText(Html.fromHtml("&#8226;"));
        dots[i].setTextSize(35);
        dots[i].setTextColor(getResources().getColor(R.color.dot_inactive));
        dotsLayout.addView(dots[i]);
    }

    if (dots.length > 0)
        dots[currentPage].setTextColor(getResources().getColor(R.color.dot_active));
}


private int getItem(int i) {
    return viewPager.getCurrentItem() + i;
}

private void launchHomeScreen() {
    startActivity(new Intent(this, ManualActivity.class));
    finish();
}

public class ViewPagerAdapter extends PagerAdapter {
    private LayoutInflater layoutInflater;


    public ViewPagerAdapter() {

    }

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


        //Inflate the correct layout
        layoutInflater = (LayoutInflater) getSystemServ**Option 1: starting with layout activity_mmg_question_1**ice(Context.LAYOUT_INFLATER_SERVICE);

        //layouts[] is an int[] that points to resources such as R.layout.start_page
        View inflatedView = layoutInflater.inflate(layouts[position], container, false);

        ((ViewPager) container).addView(inflatedView, 0);

        switch (position) {
            case R.layout.activity_mmg_description_start:
                Log.d(LOG_TAG, "QD " + "Firstviewcame");

            case R.layout.activity_mmg_question_1:
                //LinearLayout linearLayout_mmg_1 = (LinearLayout)inflatedView.findViewById(R.id.linearlayout_mmg_1);

                Button testButton = (Button) findViewById(R.id.testbutton);

                testButton.setOnClickListener(new View.OnClickListener() {

                    @
                    Override
                    public void onClick(View v) {
                        Log.d(LOG_TAG, "QD " + "Swipebuttonclicked");
                    }
                });


        }

        return inflatedView;
    }

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

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


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

I want to add functionality to the different layouts. On layout: activity_mmg_question_1 is a button (R.id.testbutton) which should write a log message.

I've tried a few options.

Option 1: starting with layout activity_mmg_question_1

Outcommenting the R.layout.activity_mmg_description_start at the beginning:

    layouts = new int[]{
            //R.layout.activity_mmg_description_start,
            R.layout.activity_mmg_question_1,

The following code works:

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


        //Inflate the correct layout
        layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        //layouts[] is an int[] that points to resources such as R.layout.start_page
        View inflatedView = layoutInflater.inflate(layouts[position], container, false);

        ((ViewPager)container).addView(inflatedView,0);

        LinearLayout linearLayout_mmg_1 = (LinearLayout)inflatedView.findViewById(R.id.linearlayout_mmg_1);

        Button testButton = (Button)findViewById(R.id.testbutton);

        testButton.setOnClickListener(new View.OnClickListener() {

                    @Override
                    public void onClick(View v) {
                        Log.d (LOG_TAG, "QD " + "Swipebuttonclicked");
                    }
                });

        return inflatedView;
    }

Quite understandable: It inflates the layout, finds the button, works.

Option 2: starting with layout activity_mmg_description_start

Starting with R.layout.activity_mmg_description_start at the beginning:

    layouts = new int[]{
            R.layout.activity_mmg_description_start,
            R.layout.activity_mmg_question_1,

It ends up with a

FATAL EXCEPTION: main
[...]
java.lang.NullPointerException: Attempt to invoke virtual method 'void android.widget.Button.setOnClickListener(android.view.View$OnClickListener)' on a null object reference

I think I also got this: on the first layout (R.layout.activity_mmg_description_start) it doesn't find the button, so it points to null, and the error shows up.

How to prevent this? That led me to the idea of:

Option 3: switch-case

Displaying of the different layouts works, but the log-message from the button doesn't work.

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


    //Inflate the correct layout
    layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);

    //layouts[] is an int[] that points to resources such as R.layout.start_page
    View inflatedView = layoutInflater.inflate(layouts[position], container, false);

    ((ViewPager)container).addView(inflatedView,0);

    switch (position){
    case R.layout.activity_mmg_description_start:
        Log.d (LOG_TAG, "QD " + "Firstviewcame");

    case R.layout.activity_mmg_question_1:
        //LinearLayout linearLayout_mmg_1 = (LinearLayout)inflatedView.findViewById(R.id.linearlayout_mmg_1);

        Button testButton = (Button)findViewById(R.id.testbutton);

        testButton.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View v) {
            Log.d (LOG_TAG, "QD " + "Swipebuttonclicked");
        }
        });


    }

    return inflatedView;
}

Does anybody have an idea or solution?

Best and thanks in advance,

tigercode

Answer 1

I think you should use Fragments .

Try to setOnClickListener before call ((ViewPager)container).addView(inflatedView,0);

public Object instantiateItem(ViewGroup container, int position) {


//Inflate the correct layout
layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);

//layouts[] is an int[] that points to resources such as R.layout.start_page
View inflatedView = layoutInflater.inflate(layouts[position], container, false);


switch (position){
case R.layout.activity_mmg_description_start:
    Log.d (LOG_TAG, "QD " + "Firstviewcame");

case R.layout.activity_mmg_question_1:
    //LinearLayout linearLayout_mmg_1 = (LinearLayout)inflatedView.findViewById(R.id.linearlayout_mmg_1);

    Button testButton = (Button)findViewById(R.id.testbutton);

    testButton.setOnClickListener(new View.OnClickListener() {

    @Override
    public void onClick(View v) {
        Log.d (LOG_TAG, "QD " + "Swipebuttonclicked");
    }
    });


}

((ViewPager)container).addView(inflatedView,0);

return inflatedView;

}