how to convert a view to a bitmap image in our android app?

Sometimes, in our applications, we would like to do something like this: Create a view and then, convert it to a Bitmap to work with it as a Image. In this “How-to” we will learn how to do this.

Introduction

In some applications, we would like to create a View with texts, images, and more view-elements and convert it to a Bitmap. Why? Well, you don't know until you need it, but imagine that you are working with OpenGL, you want to add textures to a OpenGL object, and you want this textures view-like. This is just an example, but I'm positive that more functionality will come to your mind while you are developing in Android.

Short introduction to Bitmap and Canvas

First of all, I would like to write about the Bitmap and the Canvas classes. I think its important to know about this before start talking about “converting a view in a Bitmap using a Canvas”

In Android, the very known word “bitmap”, is a class that help us to work with images as a map of bits or an array of bits. This Bitmap class is very useful when we are working with graphics interfaces like Canvas or OpenGL.

Canvas, is other known class in Java, is used to draw things on it. In Canvas we have the control of all the pixels.

Converting View to Bitmap

We need to have some variables initialized,

This is the Canvas we are going to draw in.

Canvas canvas = null

This is the layout we are going to use to create our view.

RelativeLayout relativeView ;

This is the background we are going to set in our view, we get it from a resource file (R.drawable.blackBgrnd). The BitmapFactory.decodeResource method is used to get a resource image and convert it in a Bitmap (we will use the Bitmap class). The object mContext (context) must be passed from the Activity we are working on.

Bitmap viewBgrnd = BitmapFactory.decodeResource(mContext.getResources(),R.drawable.blackBgrnd);

we need another bitmap, to draw it in the canvas. We set the width and the height of this bitmap related with the width and height we have created our layout. Now this Bitmap is empty, but we are going to associate it to the canvas, so every time we draw in the canvas, it will be drawn in this bitmap object.

Bitmap returnedBitmap = Bitmap.createBitmap(relativeView .width, relativeView.height,Bitmap.Config.ARGB_8888);

First of all, we had the canvas = null, now we create a Canvas object using the auxiliary bitmap we had created before.

canvas = new Canvas(auxBitmap);

Now its time to create our view.

We can add Images, for example:

ImageView newImage = new ImageView(mContext);

newImage.setImageBitmap(bitmapWithImage)

we can set the imageView position in the view using “layout” method:

newImage.layout(l,t,r,b);

l Left position, relative to parent
t Top position, relative to parent
r Right position, relative to parent
b Bottom position, relative to parent
and finally adding it to our layout

relativeView.addView(newImage);

or we can add text

TextView newText = new TextView(mContext);

newText.setText(“This is the text that its going to appear”);

adding it to the layout in the same way:

relativeView.addView(newText);

Once we have added all elements we want to our layout, we have to create a paint object

Paint paint = new Paint();

just to define default values of painting.

We use the “drawBitmap” method from the canvas:

canvas.drawBitmap(ViewBgrnd, 0, 0, paint);

and finally we call dispatchDraw in the layout to draw the children views (imageView, textView) in the canvas.

relativeView.dispatchDraw(canvas);

The returnedBitmap is the bitmap that contains the drawing of the views in the canvas, on it, we have the layout and its childrens as a Bitmap, after painting them in the Canvas.

Conclusion

This is really tricky and maybe difficult to understand. It took me time to understand how it worked. I will try to summarize it:

1.We need to create a empty bitmap. This bitmap will be the final bitmap with the views on it.
2.We create the canvas using that bitmap
3.We create a layout and we add as many elements as we want
4.We attach the layout to the canvas.
5.Because we have created the canvas using a bitmap object, all that is drawn in the canvas, will be drawn in the bitmap.
How-to Develop Applications on Android: Drawing
In this serie, we will learn how to use Canvas, Bitmaps and other images resources in our Applicacions.
1. How-to convert a View to a Bitmap Image in our Android Application
2. Google Programming Environment: How to get a Bitmap from a URL




Read more: http://www.brighthub.com/mobile/google-android/articles/30676.aspx#ixzz0eg77Kd7E