Android Example : Writing text/pasting Image on Bitmap image programatically

Spread knowledge

In this example we will learn how to programatically write text/paste image on an Image in Android . Before beginning with the example lets clear some basics

What is Bitmap Image in Android ?

A Bitmap image is a series of tiny dots(called pixels) which are arranged in a pattern to form an Image. Each pixel is a small square assigned with a color. You can actually see this square pixel when you extra zoom into a image. The whole image can be edited by erasing or changing colors of individual pixels using different software tools. Android also allows us to work on Bitmaps with the help of various APIs.

bitmap_image.jpg

In Android the Bitmap class represents a Bitmap image. You can create a Bitmap in Android from the either – a resource, a InputStream or a file using BitmapFactory API.

In Android, to draw something you need four basic components

  • A Bitmap to hold pixels
  • A Canvas to host the draw calls (writing on to a Bitmap )
  • A drawing primitive ( Rect , Path , Text, Bitmap)
  • Paint (to describe colors and styles of drawing )

Using the above four components we can edit Images to write text or past another images on them

Drawing Bitmap on another Bitmap

Android provides us APIs to draw one Bitmap image over an other. These APIs can be used to not only paste images over each other but also combine multiple images on a single canvas

jungle
The Jungle Image
Webp.net-resizeimage
Dinasour

Above we have two different images- One of a forest and another of an dinosaur. Using Android APIs we can add our lone dinosaur to the forest

Step 1

  • Add both the images to res/drawable folder and name them as per your choice. I prefer dinosaur.png and forest.png

Step 2

  • Add an ImageView to your your activity layout as shown below. After adding it, declare and initialize it in your MainActivity.java
    <? xml version = "1.0"encoding = "utf-8"?>
    <RelativeLayout xmlns : android = "http://schemas.android.com/apk/res/android"
        xmlns: app = "http://schemas.android.com/apk/res-auto"
        xmlns: tools = "http://schemas.android.com/tools"
        android: layout_width = "match_parent"
        android: layout_height = "match_parent"
        tools: context = "com.example.irshadkumail.myapplication.MainActivity">
         <ImageView
            android:id = "@+id/image_view"
            android:layout_width = "wrap_content"
            android:layout_height = "wrap_content"/>
    
    </RelativeLayout>

     

Step 3

  • Idea is to paste the dinosaur image on the forest image. Therefore the forest image will act as the canvas on which we will draw the dinosaur bitmap.
  • For the forest.png to act as Canvas we need to convert its image resource into a mutable Bitmap as shown below.
  • Once we have the Canvas we can simple paste the Bitmap using drawBitmap() API
public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private Button button;

    private ImageView imageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imageView = findViewById(R.id.image_view);

/* This jungle.png will be used as the canvas to draw an another image over it. Hence we make it mutable using the copy API as shown below
*/
        Bitmap jungle = BitmapFactory.decodeResource(getResources(), R.drawable.jungle).copy(Bitmap.Config.ARGB_8888, true);
        // Decoding the dinosaur image resource into a Bitmap
        Bitmap dino = BitmapFactory.decodeResource(getResources(), R.drawable.dino);
        // Here we construct the canvas with the specified bitmap to draw onto
        Canvas canvas = new Canvas(jungle);

/*Here we draw the dinosaur image on the canvas using the drawBitmap API. drawBitmap takes in four parameters
        1 . The Bitmap to draw
        2. X co-ordinate to draw from
        3. Y co ordinate to draw from
        4. Paint object to define style
*/
        canvas.drawBitmap(dino, (jungle.getWidth()) / 4, 250, new Paint());

        imageView.setImageBitmap(jungle);
    }
}

 

  • With the above code our dinosaur image will pasted on the jungle image at the specified co ordinates. Below screen shows how the final image will look like . Our dinosaur now looks a part of the jungle  🙂
Screenshot_2018-06-10-09-48-23-077_com.example.irshadkumail.myapplication
Dinosaur image pasted over the jungle image

Writing text on an Bitmap Image

Above we saw how to draw a Bitmap over an another Image. Now over the same image we will add text programatically.

  • Similar to drawing an Image for drawing text too we will need a Canvas and a Paint object to style the drawing.
  • We have already constructed a canvas with the jungle image. We now just need to Style our text using the paint object.
  • Once you are ready with the Paint object you can write text anywhere over the image using drawText() API
// Paint object to style the drawing
    Paint paint = new Paint();
    paint.setStyle(Paint.Style.FILL);
    paint.setColor(getResources().getColor(android.R.color.white)); // Text Color
    paint.setTextSize(getResources().getDimension(R.dimen.text_size)); //Text Size

/*drawText API is used to write anything on the canvas(Image). It takes in the following parama
1. Text to write
2. X co ordinate
3. Y co ordinate
4. Paint object to style the drawing
*/
    canvas.drawText("Created by AndroidClarified", 0, jungle.getHeight() - 10, paint);
    
    imageView.setImageBitmap(jungle);

 

  • Above will add write the text on the bottom left corner of the image . Final image will look like in the screenshot shown below.
Screenshot_2018-06-10-09-45-49-077_com.example.irshadkumail.myapplication
Image with text written over it programatically

Spread knowledge

2 Replies to “Android Example : Writing text/pasting Image on Bitmap image programatically”

Leave a Reply

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