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: 892

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?
 
Cookies are required to use this site. You must accept them to continue using the site. Learn more…