title: Why does my ViewPager always display the second image instead of the first?
body: <p>I am using a ViewPager in my FragmentActivity. Now, whenever my Activity fires up I pass in the <code>position</code> value into the <code>newinstance</code> method of my fragment. From there my fragment will now select the resource id of the drawable and set it as its background.</p>
  
  <p>My Fragment Activity</p>
  
  <pre><code>import android.os.Bundle;
  import android.support.v4.app.Fragment;
  import android.support.v4.app.FragmentActivity;
  import android.support.v4.app.FragmentManager;
  import android.support.v4.app.FragmentStatePagerAdapter;
  import android.support.v4.view.ViewPager;
  import android.support.v4.view.ViewPager.LayoutParams;
  import android.view.ViewGroup;
  import android.view.Window;
  
  public class HowToActivity extends FragmentActivity {
  
      @Override
      public void onBackPressed() {
          super.onBackPressed();
          overridePendingTransition(R.anim.slide_out_bottom, R.anim.slide_in_top);
  
      }
  
  
      private ViewPager mViewPager;
  
  
      @Override
      protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          requestWindowFeature(Window.FEATURE_NO_TITLE);  // remove title
  
          mViewPager = new ViewPager(this);
          mViewPager.setId(R.id.viewPager_howto);
  
          setContentView(mViewPager);
  
          getWindow().setLayout(LayoutParams.MATCH_PARENT /* width */ , LayoutParams.MATCH_PARENT /* height */);
  
          FragmentManager fm = this.getSupportFragmentManager();
          mViewPager.setAdapter(new FragmentStatePagerAdapter(fm){
  
              @Override
              public void setPrimaryItem(ViewGroup container, int position,
                      Object object) {
                  super.setPrimaryItem(container, position, object);
              }
  
              @Override
              public int getCount() {
                  return 3;
  
              }
              @Override
              public Fragment getItem(int position) {
                   return HowToFragment.newInstance(position);
              }
  
          });
      }
  
  }
  </code></pre>
  
  <p>My Fragment</p>
  
  <pre><code>import android.os.AsyncTask;
  import android.os.Bundle;
  import android.support.v4.app.Fragment;
  import android.support.v4.app.FragmentManager;
  import android.support.v4.app.FragmentStatePagerAdapter;
  import android.support.v4.app.FragmentTransaction;
  import android.support.v4.view.ViewPager;
  import android.view.LayoutInflater;
  import android.view.View;
  import android.view.ViewGroup;
  
  public class HowToFragment extends Fragment {
  
      private static int image_pos;
      private int[] image_id = {R.drawable.image_1, R.drawable.image_2, R.drawable.image_3};
  
      public static Fragment newInstance(int pos){
          image_pos = pos;
          return new HowToFragment();
      }
  
      @Override
      public View onCreateView(LayoutInflater inflater, ViewGroup container,
              Bundle savedInstanceState) {
          View v = inflater.inflate(R.layout.fragment_how_to_image, container, false);
          v.setBackgroundResource(image_id[image_pos]);
          return v;
      }
  
  }
  </code></pre>
  
  <p>It always shows the <code>image_2.png</code> instead of the <code>image_1</code> on start up. Then you need to swipe all the way to <code>image_3</code> or the <code>2</code> position for it to fix the <code>image_1</code> on the <code>0</code> position. Swiping back and forth from <code>0</code> and <code>1</code> will just show <code>image_2</code> in each fragment.</p>
  
  <p>Any ideas what I did wrong?</p>