title: Custom ViewPager rendering issue on certain devices
body: <p>I have developed a kind of rolling mechanism for choosing staff in the application. It's Custom View Pager that allows to present more then one item on screen at each time (3 in my case) and surrounded with shadow from both sides.</p>
  
  <p>Here is how it should look and works like this on devices like the <strong>Nexus 5</strong>, <strong>Nexus 4</strong>, <strong>Galaxy S3</strong>:</p>
  
  <p><img src="https://i.stack.imgur.com/QGWVH.png" alt="enter image description here"></p>
  
  <p>But on some devices like (<strong>Sony Xperia</strong>, and different kinds of <strong>Motorola</strong>) the rendering looks bad, here is the result:</p>
  
  <p><img src="https://i.stack.imgur.com/KQ8mj.png" alt="enter image description here"></p>
  
  <p>Regarding the code I refereed to this blog post by <strong>@Commonsware</strong>:</p>
  
  <p><a href="http://commonsware.com/blog/2012/08/20/multiple-view-viewpager-options.html" rel="nofollow noreferrer">http://commonsware.com/blog/2012/08/20/multiple-view-viewpager-options.html</a></p>
  
  <p>And the third option there which code you could find <a href="https://gist.github.com/devunwired/8cbe094bb7a783e37ad1" rel="nofollow noreferrer">here</a>.</p>
  
  <p>Here is my relevant code:</p>
  
  <p><strong>PagerContainer:</strong></p>
  
  <pre><code>    public class PagerContainer extends FrameLayout implements ViewPager.OnPageChangeListener {
  
      private ViewPager mPager;
      boolean mNeedsRedraw = false;
  
      public PagerContainer(Context context) {
          super(context);
          init();
      }
  
      public PagerContainer(Context context, AttributeSet attrs) {
          super(context, attrs);
          init();
      }
  
      public PagerContainer(Context context, AttributeSet attrs, int defStyle) {
          super(context, attrs, defStyle);
          init();
      }
  
      private void init() {
          //Disable clipping of children so non-selected pages are visible
          setClipChildren(false);
  
          //Child clipping doesn't work with hardware acceleration in Android 3.x/4.x
          //You need to set this value here if using hardware acceleration in an
          // application targeted at these releases.
          if (Build.VERSION.SDK_INT &gt;= 11 &amp;&amp; Build.VERSION.SDK_INT &lt; 19)
          {
              setLayerType(View.LAYER_TYPE_SOFTWARE, null);
          }
      }
  
      @Override
      protected void onFinishInflate() {
          try {
              mPager = (ViewPager) getChildAt(0);
              mPager.setOnPageChangeListener(this);
          } catch (Exception e) {
              throw new IllegalStateException("The root child of PagerContainer must be a ViewPager");
          }
      }
  
      public ViewPager getViewPager() {
          return mPager;
      }
  
      private Point mCenter = new Point();
      private Point mInitialTouch = new Point();
  
      @Override
      protected void onSizeChanged(int w, int h, int oldw, int oldh) {
          mCenter.x = w / 2;
          mCenter.y = h / 2;
      }
  
      @Override
      public boolean onTouchEvent(MotionEvent ev) {
          //We capture any touches not already handled by the ViewPager
          // to implement scrolling from a touch outside the pager bounds.
          switch (ev.getAction()) {
              case MotionEvent.ACTION_DOWN:
                  mInitialTouch.x = (int)ev.getX();
                  mInitialTouch.y = (int)ev.getY();
              default:
                  ev.offsetLocation(mCenter.x - mInitialTouch.x, mCenter.y - mInitialTouch.y);
                  break;
          }
  
          return mPager.dispatchTouchEvent(ev);
      }
  
      @Override
      public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
          //Force the container to redraw on scrolling.
          //Without this the outer pages render initially and then stay static
          if (mNeedsRedraw) invalidate();
      }
  
      @Override
      public void onPageSelected(int position) { 
          invalidate();
      }
  
      @Override
      public void onPageScrollStateChanged(int state) {
          mNeedsRedraw = (state != ViewPager.SCROLL_STATE_IDLE);
      }
  }
  </code></pre>
  
  <p><strong>Init part:</strong></p>
  
  <pre><code>  //Size View Pager:
      //========================================
      pagerSize = mContainerSize.getViewPager();
      adapter = new MySizePagerAdapter();
      pagerSize.setAdapter(adapter);
      //Necessary or the pager will only have one extra page to show  make this at least however many pages you can see
      pagerSize.setOffscreenPageLimit(adapter.getCount());
      //A little space between pages
      pagerSize.setPageMargin(15);
      //If hardware acceleration is enabled, you should also remove  clipping on the pager for its children.
      pagerSize.setClipChildren(false);
  </code></pre>
  
  <p>More research brought me to understand that this problem has something to do with the Hardware acceleration or the lack of it in some devices. But disabling it via code didn't helped me either.</p>