I've been working on an android app that tries to accomplish the following:
- Download large images from a service (about 4000px x 4000px)
- display these images and let the user zoom/pan
- draw overlays to show additional information
So far I have been somewhat successful by loading a scaled down version of the image and use that for panning and zooming, using BitMapRegionDecoder to load a high res representation of the current viewable area once the panning/zooming has stopped.
While this seems to work, I have realised that I'd need to put a lot of time in it to make everything smooth and stable, also I have got a hunch that a tile based approach will yield better performance. So my question is, can anyone point me to some lib or resource that will let me unload some of the work in an standing on the shoulders of giants approach :)
Thanks
I'm a bit late here, but I faced this problem and this answer might help others. I've recently developed an open source library that splits a large image into small tiles, showing only the visible ones. It also handles zoom/pan/double tap gestures. The source code and samples are available at https://github.com/diegocarloslima/ByakuGallery
Related
I'm working on an app that shows the floor plan of a trade fair. This is a high resolution (3500x4600), but fairly low file size (400kb) PNG image. I have a little component that allows to pan / zoom it.
Now it all works just fine on iOS, but on Android I just cannot get it to work. If I just try to load it in the normal RN (0.56) Image component I get a blank screen. I'm testing on an HTC One M8, which is not exactly brand new, but also not super low end (2 GB Ram). Funnily enough, if I convert it to a 2,6 MB jpg with the same dimensions, it will show up, though the quality is so bad, you cannot read any of the labels.
There are some mostly older github issues on this (like here and here), but none of those solutions (android:largeHeap="true") work for me.
I tried using react-native-svg, but it has the same problem (I guess it eventually gets rasterized?).
I also tried using react-native-fast-image, which uses Glide under the hood instead of Facebook's Fresco, but (you guessed it), it also doesn't work. If I just load the image, it will get downsampled (worse than the jpg). I tried to get Glide to stop doing that (using override), but then I get a blank screen again.
I found this library, which I guess does exactly what I want, but I'd have to wrap it for RN use... which would be quite a bit of work.
Anyone have an idea?
Hoping someone can help me solve this.
Im making a very simple game on android 4.2.2 using just UI elements, ie no 3D, opengl, Just as a challenge really but I've ran into a little head ache.
I was having O.O.M issues with loading graphics (to be expected with android) so i looked for other routes and found bitmap factory and decided to use a simple implementation. with my images i was hitting up to 40mb allocated memory during game play so I reduced the files from 1080x1920x4bit to 540x960x4bit in a hope to reduce memory load but now it reaches up to 72mb during game play.
Am i missing something or is me thinking, halve the size of images and halve the memory usage? or does upscaling use that much more?
is there any way I can reduce this amount of memory down to a decent 16-20mb range?
Notes on the APP.
all images are stored in res/no-dp or res/xxdpi. And are all jpegs.
I have six pop up images which are 100x100dp jpegs and 5 x Life segments which are 50x50dp
this is the code im using to load the images from bitmap factory
Bitmap bMap = BitmapFactory.decodeResource(getResources(), R.drawable.dummy1nn);
button7.setImageBitmap(bMap);
and im loading the other images as background resources for now via buttons or image views.
I also have soundpool running on elements and a timer.
Any help would be appreciated. I dont want to post all my code as it is a right mess at the minute as im trying many different methods to get this working smoothly. The only issue i have is the memory load.
My current memory after running the game and letting it sit for 5 minutes is:-
Heap size - 73.086mb
allocated - 70.40mb
free - 2.625mb
used - 96.41%
objects - 47,161
I'm using LG Nexus 5 'hammerhead' as DEV device with unlocked bootloader and stock rom.
Thanks guys. :)
edit:
Answer was to use picasso, although there are a few image libraries out there i liked the simplicity of picasso a lot. and always use MAT when using images to make the relevant changes to quality/size and format to get the lowest memory print (mine dropped to 26mb peak)
have fun
Picasso is a really good library that will handle memory management, asynchronous loading, and caching for you.
Using your example, it would be used simply like this:
Picasso.with(this).load(R.drawable.dummy1nn).fit().into(button7);
I've been struggling for a long time with large images that are able to zoom. I am loading some picture from the network that can have very variable size: it might go from 0.5MP up to 10MP. Simply loading one to a bitmap can produce application crash because of OOM exception. But details are very important so I want the user to be able to zoom on them such that full quality is maintained (so the picture should refine itself during zooming). I don't find a proper way to do this. I've used the TouchImageView library, but it doesn't manage large pictures at all. If I first down sample my picture with the inSampleSize parameter of the BitmapFactory, I lose the quality definitively. I don't want to code a whole new zooming tool, as it is already implemented on every android phone in the default Gallery app. There has to be a way to use this kind of tool, and simply display a large image that is able to zoom, right?
Have you tried PhotoView?
You could also do it with loadUrl(String) of standard WebView which should handle big images too. WebView has built-in zoom controls.
BitmapRegionDecoder(added in 2.3.3) may work. But I've not tried it.
It seems that the implementation in Gallery is OpenGL, there is no way to use it simply.
The AndEngine framework for Android has a way to load textures into an atlas. The atlas way of loading textures was new to me and so I looked into it. From what I've read around the forums, an atlas is a large rectangular region of image data where the width and height have to be powers of 2 (although they don't have to be equal, i.e. you can have a 512x1024 if you want). Textures are loaded into this region and this is used to keep them all in memory during the lifetime of the app. It allocates all of that space even if you don't use some of it.
With that in mind, what process can I use to optimally place an arbitrary number of graphics into the same atlas? I don't plan to do this at runtime within the app, but once all the graphics for my game have been created, I was hoping I could run the images and their sizes through some algorithm to determine how big to make the atlas and where each image should be loaded in it. Once I know those things, I can hard code their location for my game.
This is not an AndEngine or even Android specific question. I'm sure there are other graphics oriented frameworks that load textures this way.
I was about to post the question on Math.StackExchange.com but instead I found that it was already asked and already answered. There's even a link to a CodeProject article that does this for CSS Sprites.
EDIT: What I ended up doing in the long run was using a program called TexturePacker. Not only did it pack the images, it produced files to be used in AndEngine (as well as other supported platforms) and made the whole process easier for me.
I am using a SurfaceView to display a large image (usually bigger than the screen, but not always) in an Android App. This is really trivially simple graphics, and it is easy to implement scrolling using an OnTouchListener or GestureDetector. Graphics run in a Render loop, but performance seems to be more than adequate for all real devices (the emulator can be a bit of a pain, though).
I'm considering implementing Pinch and Zoom on the image as well, but I would prefer to avoid having to go to OpenGL, since I have very little experience with OpenGL and using OpenGL seems like pretty much overkill for something this simple.
It seems as if the android.graphics.Camera class might allow me to implement the zoom functionality that I would like.
Does anyone know of any good examples that show the implementation of a pinch-zoom like functionality on a basic Android SurfaceView?
Also if you have implemented something like this, any thoughts on performance? Is OpenGL worth the extra hassle, given that what is required here is so simple?
Is the question unclear here, or am I missing some blindingly obvious documentation/code on the Android developer site that I should have found?
OK - having finally had time to really work and research on this for some length of time, I actually found a solution that solves the problem I had.
The solution relies on the BitmapRegionDecoder (API10+). What this does is allow the app to load in a part of a bitmap, rather than attempting to load the entire bitmap in one go.
The essence of the solution:
A downsampled version of the entire bitmap is kept in memory. Because this version is downsampled, it can be kept there permanently.
A thread loads in the current viewport (or a bit more) of the bitmap to memory continually (using BitmapRegionDecoder). As this is at most slightly larger than the screen, this should also fit comfortably in memory.
The rendering thread draws the appropriate version to the Canvas; i.e., if you are zooming out or the bitmap is not available (e.g., because it is loading in the background), then the downsampled version is used.
Pan, Fling, and Zoom are handled with GestureListeners.
Credit goes to John Lombardo for the first implementation of the idea I've found.
I open-sourced my own implementation along with some of my other utility classes at https://github.com/micabyte/android_game
It's a pretty recent implementation, so its not had the baptism of fire from real users at this time. However, I've run tests with displaying 8000x4000 pixel bitmaps and had no issues so far. Performance certainly seems adequate for my needs.
Implementing pinch and zoom is something that you would do with a combination of the ScaleGestureDetector and the Canvas interface with a transformation matrix. You'll want to make use of the same transformation matrix to handle both scale and translation.
Take a look at the One Finger Zoom example on the Sony Ericsson developer site.
http://developer.sonymobile.com/wp/tag/zoom/