Board index » Android Tutorials with Source Code » Novice Tutorials

Skip to content

Images and photos zoom in/out

Basic Tutorials concerning: GUI, Views, Activites, XML, Layouts, Intents, ...
Post a reply

Images and photos zoom in/out

Postby ben » Thu Dec 13, 2007 3:33 am

I have some photos that I would like to zoom in/out. It would be helpful to me and others to give us a starting tutorial how to do that in Android. Thanks
Ben
ben
Junior Developer
Junior Developer
 
Posts: 15
Joined: Thu Dec 13, 2007 3:23 am
Top
Top

Postby venkat » Thu Dec 13, 2007 8:35 am

Hi ben, it is very easy to Zoom in and zoom out Images. take a look here
using UP and Down Arrow keys , u can zoom in and zoom out the images.


zooming.java

Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1. import android.app.Activity;
  2. import android.os.Bundle;
  3.  
  4. public class zooming extends Activity {
  5.     /** Called when the activity is first created. */
  6.     @Override
  7.     public void onCreate(Bundle icicle) {
  8.         super.onCreate(icicle);
  9.         setContentView(new Zoom(this));
  10.     }
  11. }
Parsed in 0.031 seconds, using GeSHi 1.0.8.4



Zoom.java
Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1. import android.content.Context;
  2. import android.graphics.Canvas;
  3. import android.graphics.drawable.Drawable;
  4. import android.view.KeyEvent;
  5. import android.view.View;
  6.  
  7. public class Zoom extends View {
  8.         private Drawable image;
  9.         private int zoomControler=20;
  10.         public Zoom(Context context)
  11.         {
  12.                 super(context);
  13.                 image=context.getResources().getDrawable(R.drawable.icon);
  14.                 setFocusable(true);
  15.                
  16.         }
  17.         @Override
  18.         protected void onDraw(Canvas canvas) {
  19.                 // TODO Auto-generated method stub
  20.                 super.onDraw(canvas);
  21.         //here u can control the width and height of the images........ this line is very important
  22.         image.setBounds((getWidth()/2)-zoomControler, (getHeight()/2)-zoomControler, (getWidth()/2)+zoomControler, (getHeight()/2)+zoomControler);
  23.                 image.draw(canvas);
  24.         }
  25.         @Override
  26.         public boolean onKeyDown(int keyCode, KeyEvent event) {
  27.                
  28.                 if(keyCode==KeyEvent.KEYCODE_DPAD_UP)// zoom in
  29.                         zoomControler+=10;
  30.                 if(keyCode==KeyEvent.KEYCODE_DPAD_DOWN) // zoom out
  31.                         zoomControler-=10;
  32.                 if(zoomControler<10)
  33.                         zoomControler=10;
  34.                
  35.                 invalidate();
  36.                 return true;
  37.         }
  38. }
  39.  
Parsed in 0.035 seconds, using GeSHi 1.0.8.4





regards,
venkat
Last edited by venkat on Thu Dec 13, 2007 12:08 pm, edited 1 time in total.
venkat
Senior Developer
Senior Developer
 
Posts: 152
Joined: Tue Nov 27, 2007 5:42 am
Location: India
Top

Postby ben » Thu Dec 13, 2007 11:50 am

Thanks venkat for your help. I will try that, it's easy enough.
Ben
ben
Junior Developer
Junior Developer
 
Posts: 15
Joined: Thu Dec 13, 2007 3:23 am
Top

Postby ben » Thu Dec 13, 2007 1:08 pm

Hi venkat:

Works great. Thanks again.
Ben
ben
Junior Developer
Junior Developer
 
Posts: 15
Joined: Thu Dec 13, 2007 3:23 am
Top

Postby Katharnavas » Thu Dec 13, 2007 1:10 pm

Hi ,
Can you help me to create a similiar thing but with a button. On focus it should display a image and when focus went out it should revert to its previous image. Im not getting any ideas on that.
Katharnavas
Senior Developer
Senior Developer
 
Posts: 100
Joined: Tue Dec 04, 2007 5:57 am
Location: India
Top

Postby venkat » Thu Dec 13, 2007 1:29 pm

Dear Katharnavas,
i did n't get u ? can u explain me ur question briefly?
I think , do u need image slider kind of application?? take a look in "API Demo" Sample application which is given along with emulator SDK. I have attached screen shot of the application.

goto Api Demo -->View-->Gallery

let me know what do you need Exactly??


regards,
venkat
Attachments
gallery.png
Gallery
gallery.png (17.9 KiB) Viewed 45019 times
venkat
Senior Developer
Senior Developer
 
Posts: 152
Joined: Tue Nov 27, 2007 5:42 am
Location: India
Top
Top

Postby Katharnavas » Thu Dec 13, 2007 1:52 pm

Hi,
Something like gallery but instead of it , every image should be a seperate image button placed on different positions on the screen .
Katharnavas
Senior Developer
Senior Developer
 
Posts: 100
Joined: Tue Dec 04, 2007 5:57 am
Location: India
Top

Postby venkat » Fri Dec 14, 2007 8:00 am

Hi Katharnavas,

try to understand file browser tutorial given this forum. Right now i am little busy :wink: .
i will try to make tutorial on this when ever i am free.

regads,
venkat.
venkat
Senior Developer
Senior Developer
 
Posts: 152
Joined: Tue Nov 27, 2007 5:42 am
Location: India
Top

Postby plusminus » Fri Dec 14, 2007 1:21 pm

Hello venkat,

feel free to ask, when you've got questions :!:
The probability that your are not the only one having that question, is about 110% ;).

I do really appreciate any tutorial, as my exams come closer and closer each day ;)

Regards,
plusminus
Image
Image | Android Development Community / Tutorials
User avatar
plusminus
Site Admin
Site Admin
 
Posts: 2688
Joined: Wed Nov 14, 2007 8:37 pm
Location: Schriesheim, Germany
Top

Postby weldrian » Tue Dec 09, 2008 8:39 am

zooming.java

Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1. import android.app.Activity;
  2. import android.os.Bundle;
  3.  
  4. public class zooming extends Activity {
  5.     /** Called when the activity is first created. */
  6.     @Override
  7.     public void onCreate(Bundle icicle) {
  8.         super.onCreate(icicle);
  9.         setContentView(new Zoom(this));
  10.     }
  11. }
Parsed in 0.034 seconds, using GeSHi 1.0.8.4



Zoom.java
Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1. import android.content.Context;
  2. import android.graphics.Canvas;
  3. import android.graphics.drawable.Drawable;
  4. import android.view.KeyEvent;
  5. import android.view.View;
  6.  
  7. public class Zoom extends View {
  8.         private Drawable image;
  9.         private int zoomControler=20;
  10.         public Zoom(Context context)
  11.         {
  12.                 super(context);
  13.                 image=context.getResources().getDrawable(R.drawable.icon);
  14.                 setFocusable(true);
  15.                
  16.         }
  17.         @Override
  18.         protected void onDraw(Canvas canvas) {
  19.                 // TODO Auto-generated method stub
  20.                 super.onDraw(canvas);
  21.         //here u can control the width and height of the images........ this line is very important
  22.         image.setBounds((getWidth()/2)-zoomControler, (getHeight()/2)-zoomControler, (getWidth()/2)+zoomControler, (getHeight()/2)+zoomControler);
  23.                 image.draw(canvas);
  24.         }
  25.         @Override
  26.         public boolean onKeyDown(int keyCode, KeyEvent event) {
  27.                
  28.                 if(keyCode==KeyEvent.KEYCODE_DPAD_UP)// zoom in
  29.                         zoomControler+=10;
  30.                 if(keyCode==KeyEvent.KEYCODE_DPAD_DOWN) // zoom out
  31.                         zoomControler-=10;
  32.                 if(zoomControler<10)
  33.                         zoomControler=10;
  34.                
  35.                 invalidate();
  36.                 return true;
  37.         }
  38. }
  39.  
Parsed in 0.038 seconds, using GeSHi 1.0.8.4




Him Thx for your instruction above, but im a very new developer, can you kindly explaint step by step?
Many thanks =)

another question is how can i upload the picure into the android app.
weldrian
Junior Developer
Junior Developer
 
Posts: 23
Joined: Tue Dec 09, 2008 1:30 am
Top

help

Postby weldrian » Fri Dec 19, 2008 10:56 am

may i ask, what is different zoom.java and zooming.java?
where to put it?
weldrian
Junior Developer
Junior Developer
 
Posts: 23
Joined: Tue Dec 09, 2008 1:30 am
Top

Re: help

Postby paroid » Tue Dec 30, 2008 10:03 pm

weldrian wrote:may i ask, what is different zoom.java and zooming.java?
where to put it?


the class "zooming" on zooming.java is an activity which contains the view "zoom" on zoom.java

take a look at the official tutorials
http://code.google.com/android/intro/anatomy.html
paroid
Freshman
Freshman
 
Posts: 2
Joined: Tue Dec 30, 2008 9:37 pm
Top

Re: help

Postby weldrian » Wed Dec 31, 2008 7:51 am

paroid wrote:
weldrian wrote:may i ask, what is different zoom.java and zooming.java?
where to put it?


the class "zooming" on zooming.java is an activity which contains the view "zoom" on zoom.java

take a look at the official tutorials
http://code.google.com/android/intro/anatomy.html



Thx man, now i got it,
Happy New Year.
weldrian
Junior Developer
Junior Developer
 
Posts: 23
Joined: Tue Dec 09, 2008 1:30 am
Top

zooming image

Postby aparna.gopinath » Fri Aug 07, 2009 1:59 pm

hey Venkat,
your application was awesome.. :)
but can i zoom the image using mouse clicks or something like that??
Regards Aparna
aparna.gopinath
Freshman
Freshman
 
Posts: 5
Joined: Thu Jul 23, 2009 5:59 am
Top

Re: Images and photos zoom in/out

Postby silvertongue » Thu Aug 26, 2010 9:56 am

thanks for the code, it helps me a lot..i want to ask something, when the application is run, the image shown is very small, and I decide to tweak the zoomControler number a bit.It made the picture large enough, but I want to make the image shown at full screen automatically at first, and then I can zoom in/out and also scrolling the image. How do I do that?
silvertongue
Once Poster
Once Poster
 
Posts: 1
Joined: Wed Aug 11, 2010 6:27 am
Top
Top
Next
Post a reply

Return to Novice Tutorials

Who is online

Users browsing this forum: No registered users and 6 guests

Board index The team • Delete all board cookies • All times are UTC + 1 hour