canvas

It’s the Arts 2! – Dealing with bitmaps

In the previous article (Having fun with canvas) we started playing around with the canvas using some Bitmap objects. Unfortunately, playing with Bitmaps it’s no so easy. They tend to be huge and need a lot of memory in order to be stored.

There are a lot of articles talking about how bitmaps are stored in memory, but, tl;dr, so I’m just going to set some basic points about it:

  • Bitmaps are not stored in the same memory space as objects
  • Bitmaps are stored raw. It means that if you have a 100×100 pixels using 24 bits per pixel it will need 100x100x24 bytes = 240,000 bytes (around 240Kb).
  • We need to get rid of bitmaps as soon as possible, at the same moment we stop using them
  • Remember, Bitmaps loaded from disk are immutable so we can’t draw on them (but we can use them to draw on another canvas)

Let’s see how to fix these issues one by one.

Loading smaller bitmaps

In the previous article, we saw that you can load a Bitmap from disk (specifically a Resource) like this:

The problem here is that maybe the bitmap is too large for the final size in screen, so we are wasting precious memory that is not needed. For example, if our bitmap is 1000×1000 but it’s going to be shown in a view that is just 100×100, we are loading 24,000,000 bytes when we only need 240,000. Wow! 24Mb of image loaded to be drawn as a 240Kb image. Remember, image is precious.

He knows about memory

There is a second implementation of the method decodeResource that allows us to set a BitmapFactory.Options object in order to tweak how the bitmap is loaded.

We pay special attention to the parameter inJustDecodeBounds. This parameter will make BitmapFactory to not load the bitmap, but just load the out parameters of the Options object, giving us the width and height of the image.

We also have a parameter named inSampleSize, that forces BitmapFactory to load the image using this parameter as a reducing scale factor.

Now we have the elements that we need to load smaller bitmaps. Recap:

  1. Determine the minimum size of the bitmap that we need
  2. Setup a BitmapFactory.Options object with the inJustDecodeBounds set as true
  3. Decode the bitmap
  4. Get width and height from the resulting options object
  5. Calculate the appropiate scaling factor
  6. Set the factor to the inSampleSize property and inJustDecodeBound as false
  7. Load the bitmap

Here you have a function that does the work:

And the method calculateInSampleSize

This method has been taken from Android documentation. You can find this code and MUCH more information about handling memory on http://developer.android.com/training/displaying-bitmaps/load-bitmap.html

Mutable bitmaps, immutable bitmaps and getting rid of them

As said before, bitmaps loaded via BitmapFactory. If you need to make them mutable, you have two options:

  • Set the property inMutable from BitmapFactory.Options to true before loading
  • Copy the bitmap using the method copy from Bitmap class with the parameter mutable as true.

Making bitmaps mutable needs more memory, so use it wisely, only when you need to draw ON the bitmap. Sometimes is better, if you are going to paint it on a canvas later, to paint your bitmap on the canvas, then paint over. It depends on what you want to achieve. Remember…

Oh! who cares…

Last but not least, we can mark bitmaps to be cleaned from memory before the GC destroys the bitmap object. Just call the recycle() method in the bitmap object and the memory used to hold the pixels will be clean. The object will still exist, but any try to use it will give you an error.

We will see examples on how to use it in future articles, but for the moment, get used to the concept.

Just to summarize. Memory is important. Bitmaps are huge. Optimize them by loading smaller bitmaps and freeing them asap.

Stay cool and reduce your bitmaps memory footprint

It’s the arts! The Workshop

It’s the arts! The Workshop

Last week I had the pleasure to make a 4 hours workshop titled “It’s the Arts! Playing around with the Android Canvas” organized by GDG Barcelona.

The workshop was based on 3 topics, each one with an introduction to explain concepts and related classes and methods plus a set of exercises to test and practice the topic.

After the workshop we enjoyed a nice BBQ with all assistants!

The event was performed at La Fábrica,  a new space to share and hack in Barcelona (Sagrera).

You can find the slides on Slideshare and the exercises on Github.

You can also find pictures of the event in the G+ event page.

As usual, a lot of topics were left out of the workshop, as Android canvas is a huge graphics framework, but I’m happy I was able to introduce a lot of concepts, some of them really hard if you have never worked with graphics before. I think that making exercises as a progressive git project will help people to review these exercises later on at their own pace.

As this workshop required a lot of preparation (170 slides!), I will probably repeat it in the future, so stay alert!

Thanks again to the people from GDG and La Fábrica, and of course, to all the people who assisted to the workshop!

See you in the next event!

 

It’s the Arts! Having fun with a canvas

It’s the Arts! Having fun with a canvas

Making your own views in Android is a lot of fun, and using the Canvas to make them more appealing is even more fun. Graphical effects, animations, and a lot of other things can be achieved extending a simple view and modifying its behavior during the canvas drawing phase.

Starting at this task is quite hard. Information seems to be written for people who already know what they are doing. Then, when you start to see concepts like matrixes, PorterDuff, and so on, you are forced to check if you missed documentation explaining it all .

In this articles I will start reviewing the basic steps to start working with the canvas and drawings.