Create a ViewPager or equivalent WITH functionalit

Question

I know this may sound like a terrible question to ask but I have been researching as much as I could to figure this out. I have an application that requires a view pager to scroll horizontally to display different views. Within each view, it needs functionality, for one view it could be just pressing a button, another view is required to download data from a server (for example, retrieving the latest Twitter feed) as well as other functionality. The main point is that within the View Pager, each view requires functionality.

My original idea was to follow this tutorial:

http://mobile.tutsplus.com/tutorials/android/android-user-interface-design-horizontal-view-paging/

However, this is just providing views which have no interaction. I have managed to implement this and add my layouts, however this is only solving half of the problem. It shows how to add basic operations within a comment such as a single button. I want each view to have its own activity which is capable of doing its own unique thing.

Here is what I originally had:

public class DashboardContainerActivity extends Activity{

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    // TODO Auto-generated method stub
    super.onCreate(savedInstanceState);
    //Set content view to the dashboard container xml view
    setContentView(R.layout.dashboard_container);

    //Create a new instance of my page adapter from below
    MyPageAdapter adapter = new MyPageAdapter();
    //Reference the view pager used in the dashboard container xml view
    ViewPager myPager = (ViewPager) findViewById(R.id.dashboardpanelpager);
    //set an adapter to the view pager
    myPager.setAdapter(adapter);
    //First panel to be shown when opened
    myPager.setCurrentItem(3);
  }

}

/*------------------------------------------------------*/
class MyPageAdapter extends PagerAdapter {

  public int getCount() {
      //Return 7 as there will be 7 panes in the dashboard
      return 7;
  }

  public Object instantiateItem(View collection, int position) {

      LayoutInflater inflater = (LayoutInflater) collection.getContext()
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
      View v = null;
      switch (position) {
      case 0:
          v = inflater.inflate(R.layout.dashboard_social, null);
          break;
      case 1:
          v = inflater.inflate(R.layout.dashboard_info, null);
          //DISPLAY INFORMATION FROM SERVER AND DISPLAY HERE
          break;
      case 2:
          v = inflater.inflate(R.layout.dashboard_allcourses, null);
          //LIST OF COURSES

          break;
      case 3:
          v = inflater.inflate(R.layout.dashboard_news, null);
          //USE HTTP HERE FOR TWITTER FEED


          break;
      case 4:
          v = inflater.inflate(R.layout.dashboard_mycourse, null);
          //DOWNLOAD USER'S PERSONAL INFORMATION AND DISPLAY HERE

          break;
      case 5:
          v = inflater.inflate(R.layout.dashboard_media, null);
          //DISPLAY LATEST UPLOADED MULTIMEDIA
          break;
      case 6:
          v = inflater.inflate(R.layout.dashboard_extras, null);
          break;
      }

      ((ViewPager) collection).addView(v, 0);

       return v;
  }

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

I have separate activities for each layout added to the ViewPager but I am guessing that these activities cannot be added into the ViewPager instead of just the layouts.

I have read something about fragments, but I am not sure whether that's compatible with API level 8, apparently this is targeted at Honeycomb and Ice Cream Sandwich.

Answer 1

It's not possible to have an Activity as part of a ViewPager, however there is no reason why you can't add the functionality you describe to each page in your ViewPager. To assign interaction or events to components in each view just add the correct listeners in instantiateItem() in each case statement:

case 0:
      v = inflater.inflate(R.layout.dashboard_social, null);
      Button myButton = (Button) v.findViewById(R.id.name_of_button_in_social_dashboard);
      myButton.setOnClickListener(...);
      break;

For any other interactions, like getting the http requests for the twitter feed, just execute those as part of your main activity (something like http requests should be done in a background thread of course). When you want to update the UI in the twitter page, just use ViewPager.getChildAt(3) to fetch the child element. Think of your Activity as just a big layout with 7 children views that are all available at once (but the user will only see them as they swipe).

With all that said, a better design patter might be to use Fragments with a FragmentPagerAdapter backing your ViewPager. This allows better logical breakdown of the various pages into different classes - Fragments also provide other uses like being able to load multiple on-screen at once for larger screen layouts (tablets).

Like ViewPager, Fragments are available all the way back to API Level 4 via the support library (see Fragment). So you don't need to worry about backward compatibility.