Scrolling a Picture (horizontally and vertically)

Danuubz · by **Danuubz** » Thu Oct 23, 2008 12:33 pm

I've written a small code example which shows how to make a picture scrollable by hand. You can scroll it by dragging it with the mouse (or finger).

In this case, the picture has to be sized exactly [800x600], named like 'pic.jpg' or 'pic.png' and it should be placed in the folder 'res>drawable>' of your project.

Actually, making more complex views scrollable by hand should work the same way. However the coordinates of each component and its behavior have to be adapted after every single scroll movement. So if there's a way making it out of the box, that would be the preferable choice of course

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

package de.horizontalscroll;
 
import de.horizontalscroll.R;
 
import android.app.Activity;
 
import android.os.Bundle;
 
import android.view.*;
 
import android.view.GestureDetector.OnGestureListener;
 
import android.content.*;
 
import android.graphics.*;
 
import android.content.res.*;
 
public class HorizontalScroll extends Activity implements OnGestureListener
 
{
 
        private static final int X_MAX = 800;
 
        private static final int Y_MAX = 600;
 
        private int scrollX = 0;
 
    private int scrollY = 0;
 
    MyView main;   
 
    Bitmap bmp;
 
    Bitmap adapt;
 
    Resources res;
 
    Paint paint;
 
    GestureDetector gestureScanner;
 
    @Override
 
    public void onCreate(Bundle savedInstanceState)
 
    {
 
        super.onCreate(savedInstanceState);
 
        gestureScanner = new GestureDetector(this);
 
        paint = new Paint();
 
        res = getResources();
 
        bmp = BitmapFactory.decodeResource(res, R.drawable.pic);
 
        adapt = Bitmap.createBitmap(bmp);
 
        main = new MyView(this);        
 
        setContentView(main,new ViewGroup.LayoutParams(800,600));
 
    }
 
    @Override
 
    public boolean onTouchEvent(MotionEvent me)
 
    {
 
        return gestureScanner.onTouchEvent(me);
 
    }
 
    @Override
 
    public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY)
 
    {
 
        main.handleScroll(distanceX,distanceY);
 
        return true;
 
    }
 
    ////////////////////
 
    ///////////////////
 
    //////////////////
 
    @Override
 
    public boolean onDown(MotionEvent e)
 
    {
 
        return true;
 
    }
 
    @Override
 
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY)
 
    {
 
        return true;
 
    }
 
    @Override
 
    public void onLongPress(MotionEvent e){    }
 
    @Override
 
    public void onShowPress(MotionEvent e) {   }    
 
    @Override
 
    public boolean onSingleTapUp(MotionEvent e)    
 
    {
 
        return true;
 
    }
 
    ////////////////////
 
    ///////////////////
 
    //////////////////
 
    class MyView extends View
 
    {
 
        public MyView(Context context)
 
        {
 
                super(context);
 
        }
 
        @Override
 
        protected void onDraw(Canvas canvas)
 
        {
 
                canvas.drawBitmap(adapt, 0, 0, paint);
 
        }
 
        public void handleScroll(float distX, float distY)
 
        {
 
                // X-Axis ////////////////////////////////
 
                if(distX > 6.0)
 
                {
 
                        if(scrollX < 460)
 
                        {
 
                                scrollX += 15;
 
                        }
 
                }
 
                else if(distX < -6.0)
 
                {
 
                        if(scrollX >= 15)
 
                        {
 
                                scrollX -= 15;
 
                        }
 
                }
 
                ////////////////////////////////////////////
 
                // Y-AXIS //////////////////////////////////
 
                if(distY > 6.0)
 
                {
 
                        if(scrollY < 100)
 
                        {
 
                                scrollY += 15;
 
                        }
 
                }
 
                else if(distY < -6.0)
 
                {
 
                        if(scrollY >= 15)
 
                        {
 
                                scrollY -= 15;
 
                        }
 
                }               
 
                ////////////////////////////////////////////
 
                if((scrollX <= 480) && (scrollY <= 120))
 
                {
 
                        adapt = Bitmap.createBitmap(bmp, scrollX, scrollY, 320, 480);                   
 
                        invalidate();
 
                }
 
        }
 
    }
 
}
Parsed in 0.043 seconds,  using GeSHi 1.0.8.4

ravi · by **ravi** » Thu Nov 13, 2008 12:16 am

Thanks for the tutorial, it was helpful to me!

weldrian · by **weldrian** » Tue Dec 09, 2008 9:12 am

Can you please help me solve the problem ?
Please.please refer the pic below!

jinez · by **jinez** » Tue Dec 09, 2008 8:25 pm

hello weldrian!

I think ur package name in code is not match with ur package name.

Ur package name is "com.a.a", but "de.horazontalscroll" is package name in ur code.

try to fix "de.horazontalscroll" to "com.a.a"

Danuubz · by **Danuubz** » Fri Dec 12, 2008 4:52 pm

Additonally you have to delete 'import de.horizontalscroll.R'.

weldrian · by **weldrian** » Fri Dec 12, 2008 4:55 pm

hi man,

i hav solve the package problem, but i cant see anything on my picture folder.
i think you have to teach me how to upload or put pic on the emulator.

what i mean is, when i compile to the emulator, there have no pic showing on the picture folder,
actually what i m trying to do is..

1: put pic on the folder
2: zoom in, zoom out
3: slider for next pic
4: rotating.

do you think possible? can you do it? can you teach me?

Danuubz · by **Danuubz** » Fri Dec 12, 2008 7:29 pm

Hello,

Generally it is possible. To implement step 2-4 may need some time. I'm rather busy with other projects, so currently I cannot make these steps for you.

Loading a picture into the app should be no problem:
1.) Put the image into ProjectFolder/res/drawable/
2.) Now you load it with bmp = BitmapFactory.decodeResource(res, R.drawable.pic);

if the picture has the name other.jpg then you load it with
bmp = BitmapFactory.decodeResource(res, R.drawable.other);

3.) my example is made for a picture sized 800x600. If you would like to take one with other size, you need to adapt the code on several places.

cdspace · by **cdspace** » Thu Dec 18, 2008 1:26 am

Thank you so much for this. I've been trying to figure this out for a week. This is exactly what I've been trying to do.

MrSnowflake · by **MrSnowflake** » Thu Dec 18, 2008 1:52 am

You should have come here earlier

.

weldrian · by **weldrian** » Fri Dec 19, 2008 8:02 am

hey all,

when i compile to the emulator, the system show," the app close unexpectedly,"
but is ok, i will try to fingure out what is the problem. Thx for your soure.

now i m learning zoom in and zoom out!

pjv · by **pjv** » Sat Jan 24, 2009 12:58 pm

I've concocted a version of ScrollView that also does horizontal scrolling. It works quite well when containing only one TextView but was NOT tested apart from that. Probably still has many bugs, but at least it's a starting point to improve on for anyone facing the same problem of the only-vertically scrolling ScrollView. Code is here: http://bazaar.launchpad.net/~pjv/androi ... lView.java.

wormhole009 · by **wormhole009** » Sat Dec 19, 2009 11:53 pm

Here's a little more cleaned up version (and works for the Droid), but still needs work. The package visibility and lack of getter/setter is because of Android's crappy compiler (see their "Performance" dev page).

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

 
import android.app.Activity;
 
import android.content.Context;
 
import android.graphics.Bitmap;
 
import android.graphics.BitmapFactory;
 
import android.graphics.Canvas;
 
import android.graphics.Paint;
 
import android.os.Bundle;
 
import android.util.Log;
 
import android.view.Display;
 
import android.view.GestureDetector;
 
import android.view.MotionEvent;
 
import android.view.View;
 
import android.view.WindowManager;
 
import android.view.GestureDetector.OnGestureListener;
 
import android.view.ViewGroup.LayoutParams;
 
public class Timeline extends Activity {
 
   ScrollableImageView scrollImageView;
 
   @Override
 
   public void onCreate(Bundle savedInstanceState) {
 
      super.onCreate(savedInstanceState);
 
      WindowManager w = getWindowManager();
 
      Display d = w.getDefaultDisplay();
 
      scrollImageView = new ScrollableImageView(this,
 
            BitmapFactory.decodeResource(getResources(), R.drawable.rocks),
 
            d.getWidth(), d.getHeight(),
 
            null);
 
      setContentView(scrollImageView);
 
   }
 
   public boolean onTouchEvent(MotionEvent event) {
 
      return scrollImageView.getGestureScanner().onTouchEvent(event);
 
   }
 
   ////
 
   ////
 
   class ScrollableImageView extends View {
 
      int scrollRate = 40;
 
      int scrollX = 0;
 
      int scrollY = 0;
 
      boolean scrollHorizontalEnabled = true;
 
      boolean scrollVerticalEnabled = true;
 
      ////
 
      Bitmap image;
 
      Bitmap bufferImage;
 
      int maxWidth;
 
      int maxHeight;
 
      int pictureWidth;
 
      int pictureHeight;
 
      ////
 
      Paint paint;
 
      GestureDetector gestureScanner;
 
      ////
 
      ////
 
      public ScrollableImageView(Context context, Bitmap image, int width,
 
            int height, Paint paint) {
 
         super(context);
 
         this.image = image;
 
         this.paint = paint;
 
         bufferImage = Bitmap.createBitmap(image);
 
         calculateSize(width, height);
 
         createGestureListener();
 
      }
 
      public ScrollableImageView(Context context, Bitmap image,
 
            int width, int height, Paint paint,
 
            boolean scrollHorizontal, boolean scrollVertical) {
 
         super(context);
 
         this.image = image;
 
         this.paint = paint;
 
         this.scrollHorizontalEnabled = scrollHorizontal;
 
         this.scrollVerticalEnabled = scrollVertical;
 
         bufferImage = Bitmap.createBitmap(image);
 
         calculateSize(width, height);
 
         createGestureListener();
 
      }
 
      protected void calculateSize(int width, int height) {
 
         //picture size
 
         pictureWidth = image.getWidth();
 
         pictureHeight = image.getHeight();
 
         //window size
 
         maxWidth = Math.min(pictureWidth, width);
 
         maxHeight = Math.min(pictureHeight, height);
 
         //layout size
 
         setLayoutParams(new LayoutParams(pictureWidth, pictureHeight));
 
      }
 
      protected void createGestureListener(){
 
         setGestureScanner(new GestureDetector(new OnGestureListener() {
 
            public boolean onScroll(MotionEvent event1, MotionEvent event2,
 
                  float distanceX, float distanceY) {
 
               handleScroll(distanceX, distanceY);
 
               return true;
 
            }
 
            public boolean onDown(MotionEvent event) {
 
               return true;
 
            }
 
            public boolean onFling(MotionEvent event1, MotionEvent event2,
 
                  float velocityX, float velocityY) {
 
               return true;
 
            }
 
            public void onLongPress(MotionEvent event) {
 
               //do nothing
 
            }
 
            public void onShowPress(MotionEvent event) {
 
               //do nothing
 
            }
 
            public boolean onSingleTapUp(MotionEvent event) {
 
               return true;
 
            }
 
         }));
 
      }
 
      @Override
 
      protected void onDraw(Canvas canvas) {
 
         canvas.drawBitmap(bufferImage, 0, 0, paint);
 
      }
 
      protected void handleScroll(float distX, float distY) {
 
         int maxScrollX = Math.max(pictureWidth - maxWidth, 0);
 
         int maxScrollY = Math.max(pictureHeight - maxHeight, 0);
 
         //X-Axis
 
         if(scrollHorizontalEnabled){
 
            if (distX > 6.0) {
 
               if (scrollX < maxScrollX - scrollRate) {
 
                  scrollX += scrollRate;
 
               }
 
               else {
 
                  scrollX = maxScrollX;
 
               }
 
            } else if (distX < -6.0) {
 
               if (scrollX >= scrollRate) {
 
                  scrollX -= scrollRate;
 
               }
 
               else {
 
                  scrollX = 0;
 
               }
 
            }
 
         }
 
         //Y-AXIS
 
         if(scrollVerticalEnabled){
 
            if (distY > 6.0) {
 
               if (scrollY < maxScrollY - scrollRate) {
 
                  scrollY += scrollRate;
 
               }
 
               else {
 
               }
 
            } else if (distY < -6.0) {
 
               if (scrollY >= scrollRate) {
 
                  scrollY -= scrollRate;
 
               }
 
               else {
 
                  scrollY = 0;
 
               }
 
            }
 
         }
 
         //Swap image
 
         if ((scrollX <= maxWidth) && (scrollY <= maxHeight)) {
 
            swapImage();
 
            invalidate();
 
         }
 
      }
 
      protected void swapImage() {
 
         bufferImage = Bitmap.createBitmap(image, scrollX, scrollY,
 
               maxWidth, maxHeight);
 
      }
 
      /**
 
       * @return the gestureScanner
 
       */
 
      public GestureDetector getGestureScanner() {
 
         return gestureScanner;
 
      }
 
      /**
 
       * @param gestureScanner the gestureScanner to set
 
       */
 
      public void setGestureScanner(GestureDetector gestureScanner) {
 
         this.gestureScanner = gestureScanner;
 
      }
 
   }
 
}
 
Parsed in 0.057 seconds,  using GeSHi 1.0.8.4

alejo · by **alejo** » Wed Mar 31, 2010 9:14 am

Hi there,

I'm quite a newbie here, so I'm still playing with the basics... trying to figure out how to create this and that... but I fail to make this code work smoothly.

I'm trying this with an image which is higher than wider, and the lower part of the image gets cut.
The second bug is related with the scrolling action, it stops working after a few taps on screen. Could this be related with the lack of response to the "long press"?

Thank you

pskink · by **pskink** » Wed Mar 31, 2010 9:49 am

alejo wrote:Hi there,

I'm quite a newbie here, so I'm still playing with the basics... trying to figure out how to create this and that... but I fail to make this code work smoothly.

I'm trying this with an image which is higher than wider, and the lower part of the image gets cut.
The second bug is related with the scrolling action, it stops working after a few taps on screen. Could this be related with the lack of response to the "long press"?

Thank you

see this (it scrolls, flings/swipes and zooms): viewtopic.php?p=39071#39071

download Scroll.tar.gz - its complete eclipse project

alejo · by **alejo** » Wed Mar 31, 2010 10:07 am

Ah!! Ok, thank you,

I'll try it right now.

Scrolling a Picture (horizontally and vertically)

Scrolling a Picture (horizontally and vertically)

Help

Re: Help

another problem

Thank you

thx

Cleaned up version

Who is online