I am developing a Handwriting note-taking app.
The app works in this way: the user write(draw) a text on the touchscreen, the app convert the handwriting to a Bitmap(getBitmapFromHandwriting()), then use this bitmap to produce a SpannableString and show it to the user in a TextView(In my case, I use an EditText, but to make things simple, let's say it's TextView).
Here is the code snippet in the extended TextView:
class MyTextView extends TextView{
...
BitmapDrawable bmd = new BitmapDrawable(getBitmapFromHandwriting());
int width = bmd.getIntrinsicWidth();
int height = bmd.getIntrinsicHeight();
bmd.setBounds(
(int)(height/4.0f),
(int)(height/4.0f),
(int)(width + height/4.0f),
(int)(height*5.0f/4.0f));
final ImageSpan img = new ImageSpan(bmd);
getText().setSpan(img, position, position+1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
…
}
In getBitmapFromHandwriting(), the app create a new bitmap for each text drawn by the user.
Everything works fine before the note grows big(means there are lots of bitmaps in the native memory), an OutOfMemoryError is thrown when createBitmap().
After lots of googling, I learned bitmaps use "native memory", which is very limited.
I also learned gc for bitmap doesn't happen at the same time with the gc of the JVM take place. So people would better do bitmap.recycle() when the bitmap is surely not necessary any more.
From the above knowledge, I think I need to recycle the bitmaps for invisible texts , and load that bitmap only when necessary(i.e., visible)
Before recycling a bitmap, I must make sure it won't used in the future, otherwise, will get a "RuntimeException: Canvas: trying to use a recycled bitmap…"
i.e., I have to clear the corresponding spans attached to the SpannableString. (By getText().removeSpan(), or getText().clearSpans(), but that's another story.)
For doing that, I need to tell which strings are visible and which are invisible. In ViewGroups like GridView, I can call "getFirstVisiblePosition()", but I don't know how to do that for a TextView.
I know it's possible to down sample the bitmap to support more bitmaps, but what I want is a TextView supports UNLIMITED ImageSpans.
If it's GridView or ListView, a lazy loading implementation will do the work. But how to do it in a single TextView?
Dividing the content to multiple pages should theoretically work for some situations, but in my app, user can also "export" the note. The exporting simply do a copy of the current view(How to do the export without creating new bitmap is another problem, won't discuss in this thread.). If the note is divided to multiple pages, user have to "export" for each page, so it's not an option.
My questions are:
1. Is it possible to determine the visible strings in TextView?
2. Is there any better way(patterns) to implement such "TextView containing lots of ImageSpans" without getting OutOfMemoryError?
Any idea is appreciated. Thanks in advance!
Related
I am working on a very simple app that shows one jpg, which is scrollable on vertical axis.
I would like this image to be very large(20000x1000 px), however, when I try to run the app on my device, it says that "bitmap too large to be uploaded into a texture".
Is there a way to display the image of such size in an android app?
If not, would it be possible to divide the image into segments, and after I scrolled to the bottom
of one segment, I would proceed to another?
To quote the answer for your question here:
All rendering is based on OpenGL, so no you can't go over this limit.
Note that this would take a huge amount of memory. With such big
images, if you want to zoom in out, and in a mobile environement with
heavy memory constraints, you should setup a system similar to what
you see in google maps for example. With the image split in several
pieces, and several definitions.
You could split the images into let's say 128x128 chunks. Add them to an array, and loop the array to create and fill an ImageView with the image that is currently served.
some pseudocode would be: (excuse me, I've been programming a PHP application the past few days)
Private BitMap[] imageArray = {your bitmaps from internal or external storage};
For(BitMap bm in imageArray) {
// create a new image view here, use the correct layout params or use a parrent grid view.
imageView.setBitMap(bm)
}
now once again, I am 0% sure about that pseudo code, but it should help you along.
I am still new to Android, and never had to deal with memory management in my previous experience.
In my android application, I have an activity with a TextView, a ListView, and ImageView. I have listeners for the textview and listview, and the code that changes the contents in all three of those views. The contents is stored in the arraylist. The source for the ImageView is stored in form of a String (filenames), and the code that makes the changes looks like this:
tv1.setText(myText);
imgView.setImageResource(myImage);
This worked perfectly well while I only had a few images to test the logic, but once I added more images, I started to get the OutOfMemory error. If I make the images smaller, I get that error a little later in the process, but I still get it.
At first, I thought that Android does not release the previous source, so I thought using recycle() before the reassignment will help. Instead, I've got another error when I try to change the source:
Cannot draw recycled bitmaps
It looks like I am missing some vital understanding about how the ImageView handles the source images. Does it assign the bitmap reference and then keeps the same reference, but somehow changes content?
Then, after reading this article, I realized I have a different kind of problem altogether, the one that might be solved by using the inBitmap. Yet, the documentation says the bitmaps have to be the same size for that, and mine are not.
I am thinking of converting my drawable to bitmap, then scaling it to some hard-coded dimensions, then using inBitmap. I guess my second question is - does this approach make sense? Are there any downfalls in scaling the images? And any examples would be appreciated, of course.
Thank you!
I am doing a project where I want 100 of the same image randomly scattered throughout the screen. In the future, I want an image to disappear when the image is tapped by the user.
I am mainly focusing right now on the most efficient way to display a repeated image. It seems like I could set it up so that the fact that the images are the same makes it more efficient; I'm just not sure how. I do not want to proceed further until I know I have a sound base. I'm using .png files.
I've looked around without a definite answer.
Also, would if be easier to draw my object with two circles (which is what my image is), rather than using a bitmap?
Any clues???
Assuming you're talking about drawing the bitmap on a Canvas object, the method should be pretty straightforward. You load the image into a Bitmap object and keep it as a member of the owning class, and draw it 100 times using canvas.drawBitmap(...) functions.
The other way of doing it is having 100 ImageViews with the same image, but I won't even write the details because this would be truly inefficient!
You can use a listView: http://developer.android.com/guide/topics/ui/layout/listview.html
It shows a list of items, using an adapter to inflate elements. It is pretty simple to use.
I'm using the code outlined in the following post:
Draw text in OpenGL ES
I thought I could use this technique in order to dynamically display text (say an FPS counter). I realised that calls to resources to get the drawable slows down this process quite a lot, and I didn't need a bitmap background, so I removed it.
The technique works, but after a while (~2000 frames) the whole phone locks up. I suspect there's some memory which is not being freed in this code but I don't know where. I tried offloading the Canvas, Paint and Bitmap object creations which worked (so they aren't created every single frame) but the same problem still occurs.
I suspect therefore, that the generated GL texture is to blame, but I'm unsure how to remove it, or if this is even the case.
Any help would be appreciated.
EDIT: As an alternative, can someone please point out an easy way to render text to the screen dynamically (e.g. should be able to render the # of frames since starting for example, continually being updated and increasing). All the ways I can think of are either extremely tedious (make individual quads for each digit, store the textures for 0-9 in memory, parse the number and render each digit onto each quad), cannot be updated in good time (overlay Views) or can't get the required positioning in the glSurfaceView.
CBFG - http://www.codehead.co.uk/cbfg
This really is exactly what I've been wanting. You build a bitmap file from a font file using CBFG which can then be loaded and displayed with only a few lines of code (after importing his packages). It's literally as easy as fnt.PrintAt(gl,"Hello world!", 50, 160); in onDraw and more importantly, it handles dynamic text really well. I strongly advise anyone who is the same situation to try this.
two things I can guess you'll want to try:
1) dont' recreate the number of your frs every frame, generate number 1 to 60 and always reuse those.
2) there is an issue I found when generating text for my textures is that the font loader code of android never frees the memory space so avoid loading the font all the time, do it once and store a reference to it
I just wrote an entire tutorial on creating exactly what you are looking for.
The idea is basically to use font files and then generate a font bitmap (or atlas) at run-time instead of using a tool like CBFG to generate it offline. The benefit of this is that you can ship a small font file instead of multiple large bitmaps with your app, and never have to sacrifice font quality by using scaling.
The tutorial includes full working source (that can be dropped into any project). If you are interested go have a look here.
In my Android App I have a listview containing 30 rows, and each row consists of several textviews of which one is spannable and sometimes contains a lot of formatted text and images.
Those images are loaded from the web asynchroneously: A placeholder is displayed until the image has been downloaded is then replaced by the image.
Unfortunately, the rows of the listview are loaded when I scroll over them. This makes the whole thing very slow. Also, those images are loaded from the web again and again, whenever I scroll over the row.
How can I turn it off, that the ListView rows are loaded when I scroll over them? They should be loaded once when I start the activity and never again.
Best regards and thanks in advance,
Jan Oliver
When you do a lazy-loading ListView, is because you want to speed it up your app. Turn it off is not the best solution. So, what you can do is implementing a basic cache system in order to avoid downloading and setting the ImageView again and again.
The easiest way to do so is implementing a HashMap with URLs as keys and Bitmaps as values. Something like this:
Map cache = new HashMap();
// then, on your lazy loader
Bitmap image = cache.get(urlOfTheImage);
if( image == null ){
// download and decode the image as normal,
// then assign the decoded bitmap to
// the 'image' variable
cache.put(image);
}
imageView.setImageBitmap(image);
If those images will be the same always, meaning that each time you open the app the same images will be downloaded, then you better save those images in the filesystem and use them from there.
On the other hand, if the images tend to change, you could implement some interesting stuff: use SoftReferences. There's an explanation in this video. This can also be used if you are loading images from the filesystem.
Edit
With regards to your comment, I highly recommend you watching the video I posted. It's one hour long, but it really worths the effort. When using an adapter, checking if the convertView is null is just a simple way to improve performance, though there are some other techniques that will improve your app even more. Also, if you had have problems while using that trick, is because you are probably implementing it the wrong way. Remember: even if you don't re-inflate the views, you do have to set the value of each one of the children views, otherwise you will experience some problems.
If you can, start with an Image Array full of the "placeholder images", then download the images in to an Array firing an AsyncTask during on Create. During row view building just refer to the array. That way if it has the new image it will load it, if not it will get the placeholder.
If you have a lot of data its gonna get real slow and be a crappy expirience for the user.
Create a list of objects that represent each row. Create a loader as a background thread that updates the objects as it loads the data. Your list view will draw data from the objects.
(Not a good idea if you have hundreds of rows and a huge amount of data in each row - in that case, you should only load data within a few rows of the currently active row and have some sort of MRU cache).