0

I'm using a viewpager with 5 fragments to enable horizontal scrolling. I have put an icon that corresponds with each page so the user can know on which page he is. I also programmed that if an icon is pressed the corresponding icon to the page highlights. But the icons highlight if it is pressed and the user is on that page. But if I swipe to another page, how am I able to change the icon?

MainActivity

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.SimpleOnPageChangeListener;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageButton;

public class MainActivity extends FragmentActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        /** Getting a reference to the ViewPager defined the layout file */
        final ViewPager pager = (ViewPager) findViewById(R.id.pager);
        PageListener pagelistener = new PageListener();
        pager.setOnPageChangeListener(pagelistener);

        /** Getting fragment manager */
        FragmentManager fm = getSupportFragmentManager();

        /** Instantiating FragmentPagerAdapter */
        MyFragmentPagerAdapter pagerAdapter = new MyFragmentPagerAdapter(fm);

        /** Setting the pagerAdapter to the pager object */
        pager.setAdapter(pagerAdapter);

        pager.setPageTransformer(true, new ZoomOutPageTransformer());

        final ImageButton vpOne = (ImageButton) findViewById(R.id.vpOne);
        final ImageButton vpTwo = (ImageButton) findViewById(R.id.vpTwo);
        final ImageButton vpThree = (ImageButton) findViewById(R.id.vpThree);
        final ImageButton vpFour = (ImageButton) findViewById(R.id.vpFour);
        final ImageButton vpFive = (ImageButton) findViewById(R.id.vpFive);
        final ImageButton vpSix = (ImageButton) findViewById(R.id.vpSix);

        OnClickListener One = new OnClickListener() {
            @Override
            public void onClick(View v) {
                pager.setCurrentItem(0, true);
                vpOne.setImageResource(R.drawable.vp_One);
                vpTwo.setImageResource(R.drawable.vp_Two_bw);
                vpThree.setImageResource(R.drawable.vp_Three_bw);
                vpFour.setImageResource(R.drawable.vp_Four_bw);
                vpFive.setImageResource(R.drawable.vp_Five_bw);
                vpSix.setImageResource(R.drawable.vp_Six_bw);
            }
        };

        OnClickListener Two = new OnClickListener() {
            @Override
            public void onClick(View v) {
                pager.setCurrentItem(1, true);
                vpOne.setImageResource(R.drawable.vp_One_bw);
                vpTwo.setImageResource(R.drawable.vp_Two);
                vpThree.setImageResource(R.drawable.vp_Three_bw);
                vpFour.setImageResource(R.drawable.vp_Four_bw);
                vpFive.setImageResource(R.drawable.vp_Five_bw);
                vpSix.setImageResource(R.drawable.vp_Six_bw);
            }
        };

        OnClickListener Three = new OnClickListener() {
            @Override
            public void onClick(View v) {
                pager.setCurrentItem(2, true);
                vpOne.setImageResource(R.drawable.vp_One_bw);
                vpTwo.setImageResource(R.drawable.vp_Two_bw);
                vpThree.setImageResource(R.drawable.vp_Three);
                vpFour.setImageResource(R.drawable.vp_Four_bw);
                vpFive.setImageResource(R.drawable.vp_Five_bw);
                vpSix.setImageResource(R.drawable.vp_Six_bw);
            }
        };

        OnClickListener Four = new OnClickListener() {
            @Override
            public void onClick(View v) {
                pager.setCurrentItem(3, true);
                vpOne.setImageResource(R.drawable.vp_One_bw);
                vpTwo.setImageResource(R.drawable.vp_Two_bw);
                vpThree.setImageResource(R.drawable.vp_Three_bw);
                vpFour.setImageResource(R.drawable.vp_Four);
                vpFive.setImageResource(R.drawable.vp_Five_bw);
                vpSix.setImageResource(R.drawable.vp_Six_bw);
            }

        };

        OnClickListener Five = new OnClickListener() {
            @Override
            public void onClick(View v) {
                pager.setCurrentItem(4, true);
                vpOne.setImageResource(R.drawable.vp_One_bw);
                vpTwo.setImageResource(R.drawable.vp_Two_bw);
                vpThree.setImageResource(R.drawable.vp_Three_bw);
                vpFour.setImageResource(R.drawable.vp_Four_bw);
                vpFive.setImageResource(R.drawable.vp_Five);
                vpSix.setImageResource(R.drawable.vp_Six_bw);
            }
        };

        OnClickListener Six = new OnClickListener() {
            @Override
            public void onClick(View v) {
                pager.setCurrentItem(5, true);
                vpOne.setImageResource(R.drawable.vp_One_bw);
                vpTwo.setImageResource(R.drawable.vp_Two_bw);
                vpThree.setImageResource(R.drawable.vp_Three_bw);
                vpFour.setImageResource(R.drawable.vp_Four_bw);
                vpFive.setImageResource(R.drawable.vp_Five_bw);
                vpSix.setImageResource(R.drawable.vp_Six);
            }
        };

        vpOne.setOnClickListener(One);
        vpTwo.setOnClickListener(Two);
        vpThree.setOnClickListener(Three);
        vpFour.setOnClickListener(Four);
        vpFive.setOnClickListener(Five);
        vpSix.setOnClickListener(Six);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }
}

class PageListener extends SimpleOnPageChangeListener {

    final ImageButton vpOne = (ImageButton) findViewById(R.id.vpOne);
    final ImageButton vpTwo = (ImageButton) findViewById(R.id.vpTwo);
    final ImageButton vpThree = (ImageButton) findViewById(R.id.vpThree);
    final ImageButton vpFour = (ImageButton) findViewById(R.id.vpFour);
    final ImageButton vpFive = (ImageButton) findViewById(R.id.vpFive);
    final ImageButton vpSix = (ImageButton) findViewById(R.id.vpSix);

    public void onPageSelected(int position) {
        int noOfPages = 5;
        int currentPage = position;
        if (currentPage % noOfPages == 0) {
            vpOne.setImageResource(R.drawable.vp_One);
            vpTwo.setImageResource(R.drawable.vp_Two_bw);
            vpThree.setImageResource(R.drawable.vp_Three_bw);
            vpFour.setImageResource(R.drawable.vp_Four_bw);
            vpFive.setImageResource(R.drawable.vp_Five_bw);
            vpSix.setImageResource(R.drawable.vp_Six_bw);
        }

        else if (currentPage % noOfPages == 1) {
            // add like the above
        }

        else if (currentPage % noOfPages == 2) {
            // add like the above
        }

        else if (currentPage % noOfPages == 3) {
            // add like the above
        }

        else if (currentPage % noOfPages == 4) {
            // add like the above
        }
    }
}

MyFragmentPagerAdapter

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class MyFragmentPagerAdapter extends FragmentPagerAdapter{

    final int PAGE_COUNT = 6;

    /** Constructor of the class */
    public MyFragmentPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    /** This method will be invoked when a page is requested to create */
    @Override
    public Fragment getItem(int arg0) {

        switch(arg0){

        case 0:

            return new OneFragment();           

        case 1:
            return new TwoFragment();

        case 2:
            return new ThreeFragment();

        case 3:
            return new FourFragment();

        case 4:
            return new FiveFragment();

        case 5:
            return new SixFragment();           

        default:
            return null;

        }       
    }

    /** Returns the number of pages */
    @Override
    public int getCount() {
        return PAGE_COUNT;
    }    
}

I tried the following in each fragment, but didn't work:

A fragment

import android.content.Intent;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.ImageButton;

public class OneFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
             View v = inflater.inflate(R.layout.one, container, false);

             ImageButton vpOne = (ImageButton) v.findViewById(R.id.vpOne);
             ImageButton vpTwo = (ImageButton) v.findViewById(R.id.vpTwo);
             ImageButton vpThree = (ImageButton) v.findViewById(R.id.vpThree);
             ImageButton vpFour = (ImageButton) v.findViewById(R.id.vpFour);
             ImageButton vpFive = (ImageButton) v.findViewById(R.id.vpFive);
             ImageButton vpSix = (ImageButton) v.findViewById(R.id.vpSix);

             vpOne.setImageResource(R.drawable.vp_One);
             vpTwo.setImageResource(R.drawable.vp_Two_bw);
             vpThree.setImageResource(R.drawable.vp_Three_bw);
             vpFour.setImageResource(R.drawable.vp_Four_bw);
             vpFive.setImageResource(R.drawable.vp_Five_bw);
             vpSix.setImageResource(R.drawable.vp_Six_bw);

             return v;
    }
}

2 Answers 2

3

first you have to figure it out your current page when you are swiping. for that you have to implement a page-listener by implementing SimpleOnPageChangeListeneras a inner class inside your MainActivity the class should be like this

private static class PageListener extends SimpleOnPageChangeListener{
        public void onPageSelected(int position) {
            int noOfPages =5;
            currentPage = position;
            if(currentPage % noOfPages == 0){
        vpOne.setImageResource(R.drawable.vp_One);
            vpTwo.setImageResource(R.drawable.vp_Two_bw);
            vpThree.setImageResource(R.drawable.vp_Three_bw);
            vpFour.setImageResource(R.drawable.vp_Four_bw);
            vpFive.setImageResource(R.drawable.vp_Five_bw);
            vpSix.setImageResource(R.drawable.vp_Six_bw);
            }

            else if(currentPage % noOfPages == 1){
                //add like the above
            }

            else if(currentPage % noOfPages == 2){
            //add like the above
            }

            else if(currentPage % noOfPages == 3){
                //add like the above
            }

            else if(currentPage % noOfPages == 4){
                //add like the above
            }
        }
    }

register your listener in MainActivity of onCreate()and inside just do like this

   pagelistener=new PageListener();
pager.setOnPageChangeListener(pagelistener);
1
  • This doesn't work I'm getting The method findViewById(int) is undefined for the type PageListener error. I can't find the id inside that class. I also had to change the class to class PageListener extends SimpleOnPageChangeListener instead of private static class PageListener extends SimpleOnPageChangeListener I have updated the code in my first post, so you can check it.
    – mXX
    May 29, 2013 at 15:26
1

viewPagerSpecialist's answer should take care of your initial problem but your other issue is trying to access your Views inside of the newly created inner class. You need to declare your Views outside of onCreate() so your inner class will have access to them like

public class MainActivity extends FragmentActivity {

    ImageButton vpOne;  //declare them here
    ImageButton vpTwo;

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

    vpOne = (ImageButton) findViewById(R.id.vpOne);  //initialize them here
    vpTwo = (ImageButton) findViewById(R.id.vpTwo);

and take them out of the new class. Now you will have access to them in your inner class. Notice I also removed the final modifier.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.