Android Example Simple Image viewer & pager

Hi all.

This example shows the images contained in a certain directory, with pinch zoom and smooth scroll -when image is zoomed- capabilities (provided by JSTouchImageView library, from @salvadorjhai). Also you can pass from one image to the next or the previous, with an horizontal touch movement (provided by Gestures library, from @agraham).

One of the major advantages, appart from its simplicity, is the low comsumption of memory, as only one image is loaded at a time.

After many hours of looking for a piece of code that made something similar, I didn't found anything, and then I decided to write this code. Please, if there is already any program, library or example, tell me and don't pay attention to this.
 

Attachments

  • Simple_ImageViewer.zip
    7.9 KB · Views: 888

Ivan Aldaz

Member
Licensed User
Longtime User
You can do it adding ImageViews to a ScrollView, something like (with panelImages as ScrollView.Panel):

B4X:
Dim separation as Int = 3dip

Dim ivThumbLeft As Int = separation
Dim ivThumbTop As Int = separation
Dim ivThumbWidth  As Int = (panelImages.Width - 5 * separation ) / 4  '4 images per row
Dim ivThumbHeight As Int = ivThumbWidth        'square thumbs

Dim listImages as list = File.ListFiles(dir)
Dim n As Int = 0

For i=0 to listImages.Size-1

    Dim thumb As Bitmap = LoadBitmapSample(dir, listImages.Get(i), ivThumbWidth, ivThumbHeight)
    Dim ivThumb As ImageView
        ivThumb.Initialize("ivThumb")
        ivThumb.Tag("ivThumb" & i)    'to detect later which imageview you have clicked on
        ivThumb.Bitmap = thumb
        ivTHumb.Gravity = Gravity.FILL

    panelImages.AddView(ivThumb, ivThumbleft, ivThumbTop, ivThumbWidth, ivThumbHeight)

    ivThumbLeft = ivThumbLeft + separation + ivThumbWidth

    n = n + 1

    If n = 4 Then '4 images per row

        ivthumbleft = separation
        ivthumbTop = ivThumbTop + separation + ivThumbHeight
        panelmages.Height = panelImages.Height + ivThumbHeight + separation
        n = 0

    End If

Next

EDIT:

These two lines are better than the previous "ivThumb.Initialize...", already replaced:

B4X:
ivThumb.Initialize("ivThumb")
ivThumb.Tag("ivThumb" & i)    'to detect later which imageview you have clicked on

and then you know which image you have touched with

B4X:
Sub ivThumb_Click

dim i as ImageView
    i = Sender
  
dim imageID as String = i.Tag


End Sub
 
Last edited:

Beja

Expert
Licensed User
Longtime User
Thanks .. Will use it.
Are you updating the original post?
 

Ivan Aldaz

Member
Licensed User
Longtime User
Sorry, don't know what you mean. I use the example in post #1 as an independent activity, calling it with a code similar to the above in post #4, adding image ID or position, so that the show begins in the image clicked. Is it?
 
Top