unknown os platform
how to write text on bitmap image in android programmatically | Whats-online.info

how to write text on bitmap image in android programmatically

2017:03:04 / Science and Tutorials

Android code: learn how to draw text on bitmap image programmatically. Besides, convert a textView to a bitmap image. See an example

code to write text on image in android

Note: all our tutorials are coded using Android Studio

For this Android tutorial, I will cover step by step how to write text on bitmap image programmatically. Besides,  convert textView to a bitmap image and return a bitmap image with a background color and transparent background.

Let us code.
First, let us create a new project to demonstrate this post.
We will use our default MainActivity.java and activity_main.xml to demonstrate this post.

Entire Java code


package info.whats_online.converttexttobitmap; import android.app.Activity; import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.os.Bundle; import android.text.Layout; import android.text.StaticLayout; import android.text.TextPaint; import android.view.View; import android.widget.EditText; import android.widget.ImageView; public class MainActivity extends Activity {     private ImageView img1,img2;     private EditText txt1;     @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);         img1=(ImageView) findViewById(R.id.img1);         img2=(ImageView) findViewById(R.id.img2);         txt1=(EditText) findViewById(R.id.txt1);     }     public void Convert(View v){         String text=txt1.getText().toString();         int width=txt1.getMeasuredWidth();         //background color red         int color=Color.RED;         Bitmap img=drawText(text, width, color);         img1.setImageBitmap(img);         //background transparent         int colorT=Color.TRANSPARENT;         Bitmap img1=drawText(text,width,colorT);         img2.setImageBitmap(img1);     }     public Bitmap drawText(String text, int textWidth, int color) {         // Get text dimensions         TextPaint textPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG | Paint.LINEAR_TEXT_FLAG);         textPaint.setStyle(Paint.Style.FILL);         textPaint.setColor(Color.parseColor("#ff00ff"));         textPaint.setTextSize(30);         StaticLayout mTextLayout = new StaticLayout(text, textPaint, textWidth, Layout.Alignment.ALIGN_CENTER, 1.0f, 0.0f, false);         // Create bitmap and canvas to draw to         Bitmap b = Bitmap.createBitmap(textWidth, mTextLayout.getHeight(), Bitmap.Config.ARGB_4444);         Canvas c = new Canvas(b);         // Draw background         Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.LINEAR_TEXT_FLAG);         paint.setStyle(Paint.Style.FILL);         paint.setColor(color);         c.drawPaint(paint);         // Draw text         c.save();         c.translate(0, 0);         mTextLayout.draw(c);         c.restore();         return b;     } }

Entire XML code


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:orientation="vertical"     android:background="#f0f0f0"     android:layout_width="match_parent"     android:layout_height="match_parent"     tools:context=".MainActivity">     <TextView android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_gravity="center"         android:text="Enter text below"         />     <EditText         android:layout_width="match_parent"         android:layout_height="50dp"         android:layout_margin="30dp"         android:id="@+id/txt1"/> <Button     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:layout_gravity="center"     android:onClick="Convert"     android:text="Convert"     />     <TextView android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_gravity="center"         android:text="Bitmap image with background"         />     <ImageView         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_gravity="center"         android:layout_weight="1"         android:id="@+id/img1"/>     <TextView android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_gravity="center"         android:text="Bitmap image without background"         />     <ImageView         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_weight="1"         android:layout_gravity="center"         android:id="@+id/img2"/> </LinearLayout>

For our XML file, we have 
-An EditText to enter our text
-Button widget to draw text on bitmap on click
-2 ImageViews to set the returned bitmap image as shown by the image below.

For our Java code, we have two functions
-On click action function (Convert())- sets the returned bitmap to imageview
-Draw Text on Bitmap function drawText()- Draws text to the bitmap image.

The drawText() function first Configures the text string. 
Then draws a canvas based on the width of the textView.
Then create a StaticLayout and adds the TextPaint to it.
We can simply define a StaticLayout as a Layout for text that will not be edited after it is laid out.
Then draws a color to the canvas using the Paint class.
Finally,  draws our canvas to our StaticLayout as shown by the java code.

The click function Convert() sets our Bitmap image to the imageViews.
Besides, we need to get the width of our text which is made possible by either adding our text String to TextView. Note, we can only get the width of our TextView widget as shown below. 

Thanks for your time. We appreciate visitors to our site, and we give them an opportunity to ask any question. Comment below for more information.

You may also like:

Leave a comment

Subscribe to get replies direct to your mailbox

Submit comment