How to make zoomable scrollview?

In my android application I need to create activities zoom able. I found useful code for zooming linear layout here . But in my application couple of activities start with scrollview and this code does not recognize scrollview. How can I make pinch zoom for scrollable activity?
This is one of my layout.

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/scrollViewZoom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" >

<LinearLayout
    android:id="@+id/wd_content"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:orientation="vertical" >

    <!-- Start Circle -->

    <TableRow
        android:id="@+id/row_circl1"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:layout_marginTop="30dp"
        android:background="@color/purple_color" >

        <RelativeLayout
            android:id="@+id/circle_layout1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/white_color" >

            <ImageView
                android:id="@+id/img_engin_circle1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:background="@drawable/circle_engin_bg"
                android:contentDescription="TODO" />
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/circle_layout2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/white_color" >

            <ImageView
                android:id="@+id/img_engin_circle2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:background="@drawable/circle_engin_bg"
                android:contentDescription="TODO" />
        </RelativeLayout>
    </TableRow>

    <TableRow
        android:id="@+id/row_name_circle"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:layout_marginTop="30dp" >

        <RelativeLayout
            android:id="@+id/circle_name_layout1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="-15dp"
            android:background="@color/white_color" >

            <ImageView
                android:id="@+id/img_name_circle1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:background="@drawable/circle_gauge_name"
                android:contentDescription="TODO" />
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/circle_name_layout2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="-15dp"
            android:background="@color/white_color" >

            <ImageView
                android:id="@+id/img_name_circle2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:background="@drawable/circle_gauge_name"
                android:contentDescription="TODO" />
        </RelativeLayout>
    </TableRow>

    <!-- End Circle -->

</LinearLayout>

</ScrollView>

Any idea would help me.
Thanks.

  • LinearLayout: layout_width vs. minWidth
  • Facebook deep linking on Android
  • Remove a marker from a GoogleMap
  • Data Binding - How to write multi-line declarations?
  • Uncaught ReferenceError: Media is not defined
  • Eclipse Run button doesn't work when Android xml file is selected
  • Related posts:

    How to implement my own disk cache with picasso library - Android?
    Android accessibility in edit text with hint
    phonegap run android - create Command failed with exit code 8 - linux
    How to put a CardView attribute in a style?
    display smiley in textview and edittext in android
    Eclipse: adt was unable to instantiate class com.android.ide.eclipse.adt.internal.editors.common.Com...
  • android imageview.setBackgroundResource() doesnt work
  • How to list all the files in android phone by using adb shell?
  • How to resize the AVD emulator (in Eclipse)?
  • kinds of animation techniques in android?
  • Android: How to make the flip animation for android activity, as like iphone flip horizontal from left to right?
  • Android adjustpan not working after the first time
  • One Solution collect form web for “How to make zoomable scrollview?”

    Ok. After plowing the net, finally found my answer.
    I found onTouchEvent() for scrollview does not work so I have to use dispatchTouchEvent() instead of onTouchEvent().
    At the top you can see my xml code (in my question) an here is my Activity code of course with comments.

        // step 1: add some instance
    private float mScale = 1f;
    private ScaleGestureDetector mScaleDetector;
    GestureDetector gestureDetector;
    
    //step 2: create instance from GestureDetector(this step sholude be place into onCreate())
    gestureDetector = new GestureDetector(this, new GestureListener());
    
    // animation for scalling
    mScaleDetector = new ScaleGestureDetector(this, new ScaleGestureDetector.SimpleOnScaleGestureListener() 
        {                                   
            @Override
            public boolean onScale(ScaleGestureDetector detector) 
            {
                float scale = 1 - detector.getScaleFactor();
    
                float prevScale = mScale;
                mScale += scale;
    
                if (mScale < 0.1f) // Minimum scale condition:
                    mScale = 0.1f;
    
                if (mScale > 10f) // Maximum scale condition:
                    mScale = 10f;
                ScaleAnimation scaleAnimation = new ScaleAnimation(1f / prevScale, 1f / mScale, 1f / prevScale, 1f / mScale, detector.getFocusX(), detector.getFocusY());
                scaleAnimation.setDuration(0);
                scaleAnimation.setFillAfter(true);
                ScrollView layout =(ScrollView) findViewById(R.id.scrollViewZoom);
                layout.startAnimation(scaleAnimation);
                return true;
            }
        });
    
    
    // step 3: override dispatchTouchEvent()
     @Override
     public boolean dispatchTouchEvent(MotionEvent event) {
        super.dispatchTouchEvent(event);
        mScaleDetector.onTouchEvent(event);
        gestureDetector.onTouchEvent(event);
        return gestureDetector.onTouchEvent(event);
     }
    
    //step 4: add private class GestureListener
    
    private class GestureListener extends GestureDetector.SimpleOnGestureListener {
        @Override
        public boolean onDown(MotionEvent e) {
            return true;
        }
        // event when double tap occurs
        @Override
        public boolean onDoubleTap(MotionEvent e) {
            // double tap fired.
            return true;
        }
    }
    

    Thanks a lot.

    Android Babe is a Google Android Fan, All about Android Phones, Android Wear, Android Dev and Android Games Apps and so on.