Question

I am struggling with the concepts needed to properly implement a view pager. By following some tutorials and referencing developer.android.com, I am able to get a view pager almost fully functional. The pager will flip through several text views that have been setup to say “My Message 0” through “My Message 9”. The problem is that the view pager also flips the button on the bottom of the activity and the red block that is right above the button.

I would like to have the view pager only cycle through the text. Would you please help me understand what I’m doing wrong?

I have an activity that represents a dashboard:

public class DashBoard extends FragmentActivity
{
  private static final int NUMBER_OF_PAGES = 10;

  private ViewPager mViewPager;
  private MyFragmentPagerAdapter mMyFragmentPagerAdapter;

  public void onCreate(Bundle icicle){
  super.onCreate(icicle);
  setContentView(R.layout.dashboard);

  mViewPager = (ViewPager) findViewById(R.id.viewpager);
  mMyFragmentPagerAdapter = new    MyFragmentPagerAdapter(getSupportFragmentManager());
  mViewPager.setAdapter(mMyFragmentPagerAdapter);

  }

     private static class MyFragmentPagerAdapter extends FragmentPagerAdapter{
 public MyFragmentPagerAdapter(FragmentManager fm)
 {
     super(fm);
 }

 @Override
 public Fragment getItem(int index)
 {
     return PageFragment.newInstance("My Message " + index);
 }

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

and a class for the page fragment:

public class PageFragment extends Fragment {

public static PageFragment newInstance(String title){

  PageFragment pageFragment = new PageFragment();
  Bundle bundle = new Bundle();
  bundle.putString("title", title);
  pageFragment.setArguments(bundle);
  return pageFragment;
    }

    @Override
    public void onCreate(Bundle icicle){
  super.onCreate(icicle);

    }

    @Override
     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle icicle){
  View view = inflater.inflate(R.layout.dashboard, container, false);
  TextView textView = (TextView) view.findViewById(R.id.textViewPage);
  textView.setText(getArguments().getString("title"));
  return view;

     }

    }

and finally, my xml for the dashboard:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/dashbaordLabel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>

<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    />
<TextView
    android:id="@+id/textViewPage"
    android:layout_width = "match_parent"
    android:layout_height= "wrap_content"
    />  

<Button
    android:id="@+id/newGoalButton"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/stringNewGoal"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:onClick="createNewGoal"
    />

<RelativeLayout
    android:id="@+id/SpaceBottom"
    android:layout_width="match_parent"
    android:layout_height="75dp"
    android:layout_above="@id/newGoalButton"
    android:background="@color/red"
>

   </RelativeLayout>
     </RelativeLayout>

A note about my xml, I tried wrapping the text view in some view pager tags eg:

<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    >
<TextView
    android:id="@+id/textViewPage"
    android:layout_width = "match_parent"
    android:layout_height= "wrap_content"
    />  
</android.support.v4.view.ViewPager>

But all that did was make the text view disappear from the screen, while the button and red block still cycled as in the original issue.

Answer 1

It seems that you’re using the same XML layout for both the Activity and also for the View that is created by your PageFragment.

You need at least two layouts. The first layout required is what’s used by the hosting FragmentActivity. This layout would contain your ViewPager, plus other stuff that stays static on the screen alongside the ViewPager, such as the button, etc. This layout is pretty much what you’ve shown (your first XML listing).

The second layout is the one that would be inflated inside onCreateView() of your PageFragment. Assuming for starters you just want to be flipping between simple TextViews, then the layout that onCreateView() would inflate and return would be a dedicated XML layout that contains just a TextView.

In other words, the following part of your XML layout:

<TextView
android:id="@+id/textViewPage"
android:layout_width = "match_parent"
android:layout_height= "wrap_content"
/>  

…needs to be taken out of there and put into a separate layout, such as fragment_layout.xml, and it is that layout that you’d inflate in onCreateView().