title: Use viewpager as carousel (after the app start issue)
body: <p>Currently i am using <code>ViewPager</code> to do a carousel effect menu
  However i am facing some initialization issue</p>
  
  <p>This is how i want my carousel to look like <strong>after the app start</strong>, look at the 2nd tile which is the video tile, it is dimmer and smaller than the 1st tile which is the music tile</p>
  
  <p><a href="https://i.stack.imgur.com/O63E1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/O63E1.png" alt=""></a></p>
  
  <p>However what i get is like this <strong>after the app start</strong> (if i didnt move it or drag it)</p>
  
  <p><a href="https://i.stack.imgur.com/RqJOc.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RqJOc.jpg" alt=""></a></p>
  
  <p>To make the carousel to look like the first image, i need to manually move it or drag it first, then everything look what it should be </p>
  
  <p>Below is my code snippet for setting up the viewpage </p>
  
  <pre><code>    pageAdapter = new MyPageAdapter(getSupportFragmentManager(), fragments);
      pager = (ViewPager) findViewById(R.id.viewpager);
      pager.setPageMargin(-700);//so that it look like carousel
      pager.setOffscreenPageLimit(Menu.size());
      pager.setAdapter(pageAdapter);
      pager.setOnPageChangeListener(pageAdapter);
      pager.setPageTransformer(true, new ZoomOutPageTransformer());
  </code></pre>
  
  <p>Below is my code snippet for including the zoomoutpagetransformer for animation between pages</p>
  
  <pre><code>public class ZoomOutPageTransformer implements ViewPager.PageTransformer {
      private static final float MIN_SCALE = 0.85f;
      private static final float MIN_ALPHA = 0.5f;
  
  public void transformPage(View view, float position) {
      int pageWidth = view.getWidth();
      int pageHeight = view.getHeight();
  
      if (position &lt; -1) { // [-Infinity,-1)
          // This page is way off-screen to the left.
          view.setAlpha(0);
  
      } else if (position &lt;= 1) { // [-1,1]
          // Modify the default slide transition to shrink the page as well
          float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
          float vertMargin = pageHeight * (1 - scaleFactor) / 2;
          float horzMargin = pageWidth * (1 - scaleFactor) / 2;
          if (position &lt; 0) {
              view.setTranslationX(horzMargin - vertMargin / 2);// positive
          } else {
              view.setTranslationX(-horzMargin + vertMargin / 2);// negative
          }
  
          // Scale the page down (between MIN_SCALE and 1)
          view.setScaleX(scaleFactor);
          view.setScaleY(scaleFactor);
  
          // Fade the page relative to its size.
          view.setAlpha(MIN_ALPHA + (scaleFactor - MIN_SCALE) / (1 - MIN_SCALE) * (1 - MIN_ALPHA));
  
          textview.setText(String.valueOf(scaleFactor) + "\n" + String.valueOf(vertMargin) + "\n"
                  + String.valueOf(horzMargin));
  
      } else { // (1,+Infinity]
          // This page is way off-screen to the right.
              view.setAlpha(0);
          }
      }
  }
  </code></pre>
  
  <p>Anyone has any idea how to let it look like what it should be after the app start without i move or drag it first?</p>