Draw text on Bitmap

In this tutorial we will learn how to draw text on picture, what we chose before. We can set the size, the position, the color and many other things of the text.

First we have to choose an image and load it into the ImageView. Then we will specify the text with a TextView. The last step is to push the “Draw text on bitmap” Button and the text will be visible on the bitmap in the ImageView.

Let’s start the implementation 🙂

Step 1 – The user interface

In the first step we will implement the main_activity.xml. Here we will have a Button to open an image from the gallery of the phone. Below this Button goes an EditText. the content of this EditText will be added to the the image what have previously selected. The next is again a Button. This button will draw the text on the image. Last view is the ImageView, what will hold the selected image and the text. 

Load Image Button

Load Image Button
TextView with our text

TextView with out text
Draw text Button

Draw text Button
ImageView with our picture and text

ImageView with our picture and text
Finally the whole user interface

activity_main.xml

Step 2 – The code

In the second step we will load an image form the gallery. To do this, we have to start an implicit intent.

There are two types of intents
  • Implicit intents do not name a specific component, but instead declare a general action to perform, which allows a component from another app to handle it. For example, if you want to show the user a location on a map, you can use an implicit intent to request that another capable app show a specified location on a map.
  • Explicit intents specify which application will satisfy the intent, by supplying either the target app’s package name or a fully-qualified component class name. You’ll typically use an explicit intent to start a component in your own app, because you know the class name of the activity or service you want to start. For example, you might start a new activity within your app.
Open the gallery

Load image

Starting another activity doesn’t have to be one-way. We can also start another activity and receive a result back. To receive a result, call startActivityForResult().

In our case we will get back the image and the data for it.


Load image

Step 3

The third step is about to process the Bitmap. For this we need 2 bitmaps object, one for the old, loaded bitmap, and one for the new one, what will hold our text.

To load the bitmap, we will use BitmapFactory.decodeStream(InputStream). This method will decode the input stream to the bitmap.

Then a null-check…. and we have to create the new one with the same width and hight like what the original have.

newCanvas.drawBitmap(bitmap, 0f, 0f, null)
This line will draw the specified bitmap, with its top/left corner at (x, y), using the specified paint (null), transformed by the current matrix. In our case x and y is 0f, what is the top left corner of the bitmap.

val captionString = et_caption.getText().toString()
Get the text of the edittext and check the content. If it is null, the process will stop.
If the text is not null, then the method will draw the text with the specified color, size, style, and shadow on the bitmap.

Rect holds four integer coordinates for a rectangle. The rectangle is represented by the coordinates of its 4 edges (left, top, right bottom). These fields can be accessed directly. Use width() and height() to retrieve the rectangle’s width and height.

Note: most methods do not check to see that the coordinates are sorted correctly (i.e. left <= right and top <= bottom).
Note: the right and bottom coordinates are exclusive. This means a Rect being drawn untransformed onto a Canvas will draw into the column and row described by its left and top coordinates, but not those of its bottom and right.

MainActivity.kt

Questions

I hope the description was understandable and clear. But if you have still questions, then leave me comments below! 😉

Have a nice a day! 🙂

 


 

Follow and like us:
Click to rate this post!
[Total: 0 Average: 0]

Leave a Reply

Your email address will not be published. Required fields are marked *