title: How to make a linear layout scrollable and zoomable in Android?
body: <p>I have a <code>LinearLayout</code> in my Android app and I would like to make it scrollable in all directions. I simply implemented this with a <code>HorizontalScrollView</code> and <code>ScrollView</code> under which I placed my layout.</p>
  
  <p>This works great, but I would like to implement pinch-zoom as well.
  So I was inspired by this question: <a href="https://stackoverflow.com/questions/10013906/android-zoom-in-out-relativelayout-with-spread-pinch">Android - zoom in/out RelativeLayout with spread/pinch</a></p>
  
  <p>and I came up with the following layout:</p>
  
  <pre><code>&lt;com.example.ZoomableScrollView
      android:layout_width="wrap_content"
      android:layout_height="match_parent"
      android:layout_weight="0.2"
      android:scrollbars="none"
      android:background="@android:color/black"&gt;
  
      &lt;HorizontalScrollView
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:scrollbars="none"&gt;
          &lt;LinearLayout
              android:id="@+id/sheet_layout"
              android:layout_width="wrap_content"
              android:layout_height="match_parent"
              android:orientation="vertical"
              tools:context=".MainActivity"&gt;
          &lt;/LinearLayout&gt;
      &lt;/HorizontalScrollView&gt;
  &lt;/com.example.ZoomableScrollView&gt;
  </code></pre>
  
  <p>The children of the inner <code>LinearLayout</code> are dynamically added (they are simple <code>TextView</code>s inside horizontal <code>LinearLayout</code>s to make a simple table).</p>
  
  <p>The <code>ZoomableScrollView</code> is quite simple and looks like this:</p>
  
  <pre><code>public class ZoomableScrollView extends ScrollView {
      float mScaleFactor = 1.f;
      private final ScaleGestureDetector mScaleDetector;
  
      static final float MIN_SCALE = 1f;
      static final float MAX_SCALE = 4f;
  
      public ZoomableScrollView(Context context) {
          this(context, null, 0);
      }
  
      public ZoomableScrollView(Context context, AttributeSet attrs) {
          this(context, attrs, 0);
      }
  
      public ZoomableScrollView(Context context, AttributeSet attrs,
                                int defStyle) {
          super(context, attrs, defStyle);
          mScaleDetector = new ScaleGestureDetector(context, new OnScaleListener());
      }
  
      @Override
      public boolean onTouchEvent(MotionEvent event) {
          Log.w("DEBUG", "On touch event");
          boolean retVal = mScaleDetector.onTouchEvent(event);
          return super.onTouchEvent(event) || retVal;
      }
  
      @Override
      protected void dispatchDraw(Canvas canvas) {
          Log.w("DEBUG", String.format("Scaling with scale factor %f", mScaleFactor));
          canvas.save(Canvas.MATRIX_SAVE_FLAG);
          canvas.scale(mScaleFactor, mScaleFactor);
          super.dispatchDraw(canvas);
          canvas.restore();
      }
  
      @Override
      public void onDraw(Canvas canvas) {
          super.onDraw(canvas);
      }
  
      private class OnScaleListener extends ScaleGestureDetector.SimpleOnScaleGestureListener
      {
          @Override
          public boolean onScale(ScaleGestureDetector detector)
          {
              mScaleFactor *= detector.getScaleFactor();
  
              // Don't let the object get too small or too large.
              mScaleFactor = Math.max(MIN_SCALE, Math.min(mScaleFactor, MAX_SCALE));
              Log.w("DEBUG", "OnScale: scale factor: " + mScaleFactor);
              invalidate();
              return true;
          }
      }
  }
  </code></pre>
  
  <p>I have 2 issues with this:</p>
  
  <ol>
  <li>The zooming is not very smooth, sometimes the View will scroll when it should zoom. That's not such a big deal atm.</li>
  <li>When zooming, the <code>LinearLayout</code> becomes smaller and you can't scroll everywhere anymore. I think I understand why this is the case, but I don't know how to change that and I'm thinking that I went into the wrong direction here.</li>
  </ol>
  
  <p>I don't mind changing the layout completely. In the end, I would like to have it behave a bit like a browser, where you can zoom and scroll everywhere (not as complex though). Is there a simple solution for this ?</p>