B4A Library [B4X] ZoomImageView - Cross platform zoomable + pannable image view

A custom view that shows an image and allows the user to zoom and pan the image.

Instructions:
- Add with designer.
- Call SetBitmap.

Updates:

v1.05 - Base_Resize is public. Call it after resizing the view in B4A.
v1.04 - Fixes an issue in B4i where the image jumps when switching from pinch gesture to pan gesture.
v1.03 - Fixes an issue with the click event.
v1.02 - Removed the loading of Picture1.png which was left by mistake.
v1.01 - Fixes an issue with old Android devices.

More sophisticated view that can handle huge images: https://www.b4x.com/android/forum/threads/b4x-hugeimageview-show-very-large-images.132905/#content

1-gif.122485


Tip: simplest way to add ZoomImageView is with SMM: [B4X] SimpleMediaManager (SMM) - framework for images, videos and more
 

Attachments

  • ZoomIVExample.zip
    353.9 KB · Views: 1,932
  • ZoomImageView.b4xlib
    2.7 KB · Views: 1,267
Last edited:

omo

Active Member
Licensed User
Longtime User
Is any method missing out in this library? I tried attached example out twice with 7/13 and 7/15 uploads but generated the same error on real-device and emulator. Am i missing something at my end? Here is my log:

*** Service (starter) Create ***
** Service (starter) Start **
** Activity (main) Create, isFirst = true **
zoomimageview_designercreateview (java line: 151)
java.lang.RuntimeException: Method: setQuickScaleEnabled not found in: android.view.ScaleGestureDetector
at anywheresoftware.b4j.object.JavaObject$MethodCache.getMethod(JavaObject.java:366)
at anywheresoftware.b4j.object.JavaObject.RunMethod(JavaObject.java:119)
at b4a.example.zoomimageview._designercreateview(zoomimageview.java:151)
at java.lang.reflect.Method.invokeNative(Native Method)
at java.lang.reflect.Method.invoke(Method.java:511)
at anywheresoftware.b4a.BA.raiseEvent2(BA.java:213)
at anywheresoftware.b4a.objects.CustomViewWrapper.AfterDesignerScript(CustomViewWrapper.java:67)
at anywheresoftware.b4a.keywords.LayoutBuilder.loadLayout(LayoutBuilder.java:162)
at anywheresoftware.b4a.objects.PanelWrapper.LoadLayout(PanelWrapper.java:134)
at anywheresoftware.b4a.objects.B4XViewWrapper.LoadLayout(B4XViewWrapper.java:311)
at b4a.example.b4xmainpage._b4xpage_created(b4xmainpage.java:39)
at b4a.example.b4xmainpage.callSub(b4xmainpage.java:72)
at anywheresoftware.b4a.keywords.Common.CallSub4(Common.java:1066)
at anywheresoftware.b4a.keywords.Common.CallSubNew2(Common.java:1037)
at b4a.example.b4xpagesmanager._createpageifneeded(b4xpagesmanager.java:497)
at b4a.example.b4xpagesmanager._showpage(b4xpagesmanager.java:799)
at b4a.example.b4xpagesmanager._addpage(b4xpagesmanager.java:197)
at b4a.example.b4xpagesmanager._addpageandcreate(b4xpagesmanager.java:204)
at b4a.example.b4xpagesmanager._initialize(b4xpagesmanager.java:680)
at b4a.example.main._activity_create(main.java:360)
at java.lang.reflect.Method.invokeNative(Native Method)
at java.lang.reflect.Method.invoke(Method.java:511)
at anywheresoftware.b4a.BA.raiseEvent2(BA.java:213)
at b4a.example.main.afterFirstLayout(main.java:105)
at b4a.example.main.access$000(main.java:17)
at b4a.example.main$WaitForLayout.run(main.java:83)
at android.os.Handler.handleCallback(Handler.java:605)
at android.os.Handler.dispatchMessage(Handler.java:92)
at android.os.Looper.loop(Looper.java:137)
at android.app.ActivityThread.main(ActivityThread.java:4424)
at java.lang.reflect.Method.invokeNative(Native Method)
at java.lang.reflect.Method.invoke(Method.java:511)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:784)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:551)
at dalvik.system.NativeStart.main(Native Method)
 

omo

Active Member
Licensed User
Longtime User
The example works well for me, except that you have to change the images, which are assigned incorrectly.
This example is not working for me, i don't know why. I tried it again after your message, but i am still having the same error. I am using android 9 and Youwave emulator. Below is the screenshot of library used, but still having the same errors linked above
2.jpg

Am i still missing something?
 

omo

Active Member
Licensed User
Longtime User
Your Android SDK is up to date?
I am still using android SDk-28 also targeted by Erel in that example: <uses-sdk android:minSdkVersion="5" android:targetSdkVersion="28"/> and jdk-11.0.1
 

asales

Expert
Licensed User
Longtime User
I am still using android SDk-28 also targeted by Erel in that example: <uses-sdk android:minSdkVersion="5" android:targetSdkVersion="28"/> and jdk-11.0.1
Not your SDK target in manifest. Your Android SDK.
Check the menu: Tools / SDK Manager.
Make a copy of the Android SDK folder before update the recommended items.
 
  • Like
Reactions: omo

omo

Active Member
Licensed User
Longtime User
Not your SDK target in manifest. Your Android SDK.
Check the menu: Tools / SDK Manager.
Make a copy of the Android SDK folder before update the recommended items.
Ok, thanks Asales, that may be the reason, i tried updating it 2-weeks ago, but i am not sure i finished it successfully due to other issues of the moment then
👍
 

omo

Active Member
Licensed User
Longtime User
v1.01 - Fixes an issue with old Android devices.
Ok, Thanks, this v1.01 now fixes the problem, but first generated another errors that it coundn't found picture1.png and later was looking for world-physical-map-mercator.jpg. I replaced the two files in the asset folder; so now it works well on my emulator and device
3.png


Thanks, Erel, Asales and Vecino
Regards
 

Biswajit

Active Member
Licensed User
Longtime User
Due to this following line, if you don't have an image named Picture1.png in your assets folder this library is crashing the app,
B4X:
Public Sub DesignerCreateView (Base As Object, Lbl As Label, Props As Map)
    mBase = Base
    Tag = mBase.Tag
....
....
....
    no.RunMethod("addGestureRecognizer:", Array(nme.RunMethod("CreateRecognizer", Null)))
    #end if
    SetBitmap(xui.LoadBitmap(File.DirAssets, "Picture1.png")) '<- this line
End Sub
 

omo

Active Member
Licensed User
Longtime User
Due to this following line, if you don't have an image named Picture1.png in your assets folder this library is crashing the app,
B4X:
Public Sub DesignerCreateView (Base As Object, Lbl As Label, Props As Map)
    mBase = Base
    Tag = mBase.Tag
....
....
....
    no.RunMethod("addGestureRecognizer:", Array(nme.RunMethod("CreateRecognizer", Null)))
    #end if
    SetBitmap(xui.LoadBitmap(File.DirAssets, "Picture1.png")) '<- this line
End Sub
Ok, thank you Biswajit, noted, although, I provided the picture since, but I will have to modify the code or keep managing it till Erel correct that in next version
 

Peter Simpson

Expert
Licensed User
Longtime User
Nice one @Erel.
I found ZoomImageView last night and decided to implement it into one of my clients Android powered 2D laser barcode apps (thank you @DonManfred for wrapping the library 2 years ago for me 👍). I was previously using another slightly more complicated solution, but this solution works 💯% perfect and is extremely simple to use.

I will be using ZoomImageView in future apps that needs this feature, and in all my bespoke Android 2D laser barcode apps.

Thank you 👍
 
Top