title: How to scroll webview horizontally inside ViewPager?
body: <p>I have a viewpager, where each page has to show a different WebView. This WebView should allow horizontall scrool, and I want to swipe to next page when the scroll finishes. </p>
  
  <p>I've searched, and find some solutions, but nothing I did resolve this issue. I have a CustomViewPager and a CustomWebView for trying to handle scroll events.</p>
  
  <p>This is my code:</p>
  
  <p><strong>Custom ViewPager</strong></p>
  
  <pre><code>public class WebViewPager extends ViewPager {
  
      public WebViewPager(Context context, AttributeSet attrs) {
          super(context, attrs);
      }
  
      @Override
      protected boolean canScroll(View v, boolean checkV, int dx, int x, int y) {
          if (v instanceof ExtendedWebView) {
              return ((ExtendedWebView) v).canScrollHor(-dx);
          } else {
              return super.canScroll(v, checkV, dx, x, y);
          }
      }
  }
  </code></pre>
  
  <p><strong>Custom WebView</strong></p>
  
  <pre><code>public class ExtendedWebView extends WebView {
  
      public ExtendedWebView(Context context) {
          super(context);
      }
  
      public ExtendedWebView(Context context, AttributeSet attrs) {
          super(context, attrs);
      }
  
      public boolean canScrollHor(int direction) {
          final int offset = computeHorizontalScrollOffset();
          final int range = computeHorizontalScrollRange() - computeHorizontalScrollExtent();
          if (range == 0)
              return false;
          if (direction &lt; 0) {
              return offset &gt; 0;
          } else {
              return offset &lt; range - 1;
          }
      }   
  }
  </code></pre>
  
  <p><strong>ScreenSlidePagerActivity</strong></p>
  
  <pre><code>public class ScreenSlidePagerActivity extends FragmentActivity {
  
      class MyPageAdapter extends FragmentPagerAdapter {
          private List&lt;Fragment&gt; fragments;
          private List&lt;String&gt; titles;
  
          public MyPageAdapter(FragmentManager fm) {
              super(fm);
              this.fragments = new ArrayList&lt;Fragment&gt;();
              this.titles = new ArrayList&lt;String&gt;();
          }
  
          public void addItem(String url, String title) {
              Fragment myFragment = new WebViewFragment();
              Bundle args = new Bundle();
              args.putString("url", url);
              myFragment.setArguments(args);
              this.fragments.add(myFragment);
              this.titles.add(title);
          }
  
          @Override
          public Fragment getItem(int position) {
              return this.fragments.get(position);
          }
  
          public CharSequence getPageTitle(int position) {
              return this.titles.get(position);
          }
  
          @Override
          public int getCount() {
              return this.fragments.size();
          }
      }
  
      private MyPageAdapter pageAdapter = null;
      private WebViewPager pager = null;
  
      @Override
      protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.activity_main);
  
          pageAdapter = new MyPageAdapter(getSupportFragmentManager());
          pageAdapter.addItem("url1", "WebView 1");
          pageAdapter.addItem("url2", "WebView 2");
          pageAdapter.addItem("url3", "WebView 3");
  
          pager = (WebViewPager) findViewById(R.id.pager);
  
          pager.setOffscreenPageLimit(pageAdapter.getCount() - 1);
          pager.setAdapter(pageAdapter);
      }
  }
  </code></pre>
  
  <p><strong>Layout of the activity</strong></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:tools="http://schemas.android.com/tools"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:orientation="vertical"
      android:paddingBottom="0dp"
      android:paddingLeft="0dp"
      android:paddingRight="0dp"
      android:paddingTop="0dp"
      tools:context=".MainActivity" &gt;
  
      &lt;com.example.viewpagerexample.WebViewPager
          android:id="@+id/pager"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:paddingBottom="6dp"
          android:paddingTop="0dp" &gt;
  
          &lt;android.support.v4.view.PagerTabStrip
              android:id="@+id/pager_header"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:layout_gravity="top"
              android:background="#fff"
              android:paddingBottom="0dp"
              android:paddingLeft="0dp"
              android:paddingRight="0dp"
              android:paddingTop="0dp"
              android:textColor="#000" /&gt;
      &lt;/com.example.viewpagerexample.WebViewPager&gt;
  
  &lt;/LinearLayout&gt;
  </code></pre>
  
  <p><strong>UPDATE</strong>
  The accepted answer only worked if I put this parameter in the CSS of my web page:</p>
  
  <p><code>display: table;</code></p>
  
  <p>Apparently, without this parameter the WebView is not able to calculate the width of its content.</p>