Develop Reference

From Layout to StaticLayout: How can I use StaticLayout instead of a simple layout to draw multiline texts?

I have been working in an app that let the user takes a photo and then let him put a text over it. This is working perfect when the user types a small phrase.
This is my code:
enter code here
private Bitmap ProcessingBitmap(String captionString) {
Bitmap bm1;
Bitmap newBitmap = null;
try {
bm1 = BitmapFactory.decodeStream(getContentResolver().openInputStream(pickedImage));
//create an empty bitmap
newBitmap = Bitmap.createBitmap(bm1.getWidth(), bm1.getHeight(), Bitmap.Config.ARGB_8888);
//create a new Canvas object and pass this bitmap to it
Canvas canvas = new Canvas(newBitmap);
canvas.drawBitmap(bm1, 0, 0, null);
Paint paintText = new Paint(Paint.ANTI_ALIAS_FLAG);
paintText.setColor(Color.RED);
paintText.setTextSize(convertDpToPixel(50,this));
paintText.setTextAlign(Paint.Align.CENTER);
paintText.breakText(captionString,true, canvas.getWidth(),null);
paintText.setStyle(Paint.Style.FILL);
paintText.setTypeface(Typeface.create("Sans", Typeface.BOLD));
Rect textRect = new Rect();
paintText.getTextBounds(captionString, 0, captionString.length(), textRect);
if(textRect.width() >= (canvas.getWidth() - 4))
paintText.setTextSize(convertDpToPixel(25,this));
int xPos = (canvas.getWidth() / 2);
int yPos = (int) ((canvas.getHeight() / 2) - ((paintText.descent() + paintText.ascent()) / 2)) ;
//Draw Canvas
canvas.drawText(captionString, xPos, yPos, paintText);
} catch (FileNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return newBitmap;
}
However, when the user types a long phrase it goes out of the photo area!
I looked online and found a lot of information about StaticLayout. Like this one: http://ivankocijan.xyz/android-drawing-multiline-text-on-canvas/
So I tried to use it in my code but I do not know what I am doing wrong! It is not working when I use a StaticLayout Canvas.
Is there a easy way to convert this code to a staticLayout? Is there another consideration that I am missing?
I lost one week trying to solve it and nothing worked so far. Thx!

I just found a solution, it was easier than I thought! Here it goes! Hopefully it will help someone someday!
private Bitmap ProcessingBitmap(String captionString) {
Bitmap bm1;
Bitmap newBitmap = null;
try {
//Decode image
bm1 = BitmapFactory.decodeStream(getContentResolver().openInputStream(pickedImage));
//create an empty bitmap
newBitmap = Bitmap.createBitmap(bm1.getWidth(), bm1.getHeight(), Bitmap.Config.ARGB_8888);
//create a new Canvas object and pass this bitmap to it
Canvas canvas = new Canvas(newBitmap);
//pass bitmap to canvas
canvas.drawBitmap(bm1, 0, 0, null);
//Create and configure text
TextPaint mTextPaint = new TextPaint();
mTextPaint.setColor(Color.RED);
mTextPaint.setTextSize(convertDpToPixel(100,this));
mTextPaint.setTextAlign(Paint.Align.CENTER);
mTextPaint.setAntiAlias(true);
mTextPaint.setStyle(Paint.Style.FILL);
mTextPaint.setTypeface(Typeface.create("Sans", Typeface.BOLD));
//StaticLayout
StaticLayout layout = new StaticLayout(captionString, mTextPaint, canvas.getWidth(), Layout.Alignment.ALIGN_NORMAL, 1, 1, true);
//Draw Canvas
int xPos = (canvas.getWidth() / 2);
int yPos = (int) ((canvas.getHeight() / 2) - ((mTextPaint.descent() + mTextPaint.ascent()) / 2)) ;
canvas.translate(xPos, yPos);
//Draw Canvas
layout.draw(canvas);
} catch (FileNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return newBitmap;
}

New line when painting a text in a image

I got an app that the user insert a text, and when he clicks on a button, it generates a new image with that text in a predeterminated image and saves it on the phone.
But sometimes that text is too long and exceeds the image's width, so what I'm trying to do is break it into a new line. How should I do it?
I tried with breakText, but I'm not sure how to use it... I was using:
textPaint.breakText(text[2], true, bmp.getWidth(), null);
But it didn't work.
Also, when I manually break the line at the EditText it shows everything in only one and with a "[]" where the second line should start...
EDIT: My code original code:
private void SaveMyImage() {
// TODO Auto-generated method stub
File myDir = new File(Environment.getExternalStorageDirectory().getPath()+"/App/");
myDir.mkdirs();
File file = new File (myDir, fname);
if (file.exists ()) file.delete ();
try {
FileOutputStream out = new FileOutputStream(file);
Canvas canvas = new Canvas(bmp);
Paint textPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
if (text[0].equals("Image 01")) {
textPaint.setColor(Color.BLACK);
}
else {
textPaint.setColor(Color.WHITE);
}
textPaint.setTextAlign(Align.CENTER);
textPaint.setTextSize(tamanho);
textPaint.setShadowLayer(2, 2, 2, Color.BLACK);
textPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OVER)); // Text Overlapping Pattern
canvas.drawBitmap(bmp, 0, 0, null);
canvas.drawText(text[1], largura, altura2, textPaint);
canvas.drawText(text[2], largura, altura, textPaint);
bmp.compress(Bitmap.CompressFormat.JPEG, 90, out);
out.flush();
out.close();
Toast.makeText(SaveIMG.this, "Image saved on phone", Toast.LENGTH_LONG).show();
} catch (Exception e) {
e.printStackTrace();
}
sendBroadcast(new Intent(
Intent.ACTION_MEDIA_MOUNTED,
Uri.parse("file://" + Environment.getExternalStorageDirectory())));
uri = Uri.parse(Environment.getExternalStorageDirectory().getPath()+"/App/"+fname);
pronto.setImageURI(uri);
}

breatText returns the number of characters in the string that may can be displayed if before being cut off. I would suggest calling it in a loop. Removing however many characters it can fit and placing them in a string each iteration until the source text is empty.:
ArrayList<String> lines = new ArrayList<String>();
String test = text[2];
while(!test.isEmpty()){
int newLength = textPaint.breakText(test, true, bmp.getWidth(), null);
lines.add(test.substring(0, newLength));
test = test.substring(newLength);
}
As for printing multiple lines. I'm assuming you're using Canvas.drawText which does not seem to support line breaks. So you'll need to draw each line separately with different Y-Values. (Code adapted from here):
Rect bounds = new Rect();
int yoff = 0;
for(String line:lines){
canvas.drawText(line, x, y + yoff, paint);
textPaint.getTextBounds(line, 0, line.length(), bounds);
yoff += bounds.height();
}
EDIT I don't see in your code where you actually split the strings as I described. I can't diagnose why my solution didn't work if you don't actually show me how you implemented it.
Working from here though I think I can show you how to fix the error. If you want to do it multiple times it would be a good idea to write a method for it. Add the following method to your class:
public void splitAndDrawLines(Canvas canvas,String text, int x, int y, Paint textPaint, int width){
ArrayList<String> lines = new ArrayList<String>();
String test = text;
while(!test.isEmpty()){
int newLength = textPaint.breakText(test, true, canvas.getWidth(), null);
lines.add(test.substring(0, newLength));
test = test.substring(newLength);
}
Rect bounds = new Rect();
int yoff = 0;
for(String line:lines){
canvas.drawText(line, x, y + yoff, textPaint);
textPaint.getTextBounds(line, 0, line.length(), bounds);
yoff += bounds.height();
}
}
Replace this code:
canvas.drawText(text[1], largura, altura2, textPaint);
canvas.drawText(text[2], largura, altura, textPaint);
With this code:
this.splitAndDrawLines(canvas, text[1], largura, altura2, textPaint);
this.splitAndDrawLines(canvas, text[2], largura, altura, textPaint);
EDIT 2:
Here is the code I used to set up and text your code:
// Create a 100x100 bitmap
bmp = Bitmap.createBitmap(100, 100, Bitmap.Config.ARGB_8888);
// Set the height of the text to 12.
this.tamanho = 12f;
// Draw the text in the middle of the picture width-wise.
this.largura = bmp.getWidth() / 2;
// Text parameters
this.text = new String[]{"MAKE THE TEXT WHITE", "This text starts in the middle of the middle is too long and will be split","Short text at the top of the image"};
// Start one line size into the picture height-wise.
this.altura = this.tamanho;
// Start in the middle of the picture height-wise.
this.altura2 = bmp.getHeight()/2;
// Output File name.
this.fname = "TEST.jpg";
// Save the image
SaveMyImage();

I found a solution, I created a layout and set the string as a textview and the image as a background and drawed it.

Add text to image in android programmatically

I want to make an application just like opening screen of android.I am dynamically adding images to the rows of tableLayout. I have only defined tableLayout in xml file and remaining code is in java. I have added images successfully but i am not getting any help with setting text of that image (I want to display a text under image) and image to be a specific padding.How to do it?Thanks in advance.

Use the following function to write Text on Images:
private BitmapDrawable writeTextOnDrawable(int drawableId, String text) {
Bitmap bm = BitmapFactory.decodeResource(getResources(), drawableId)
.copy(Bitmap.Config.ARGB_8888, true);
Typeface tf = Typeface.create("Helvetica", Typeface.BOLD);
Paint paint = new Paint();
paint.setStyle(Style.FILL);
paint.setColor(Color.WHITE);
paint.setTypeface(tf);
paint.setTextAlign(Align.CENTER);
paint.setTextSize(convertToPixels(mContext, 11));
Rect textRect = new Rect();
paint.getTextBounds(text, 0, text.length(), textRect);
Canvas canvas = new Canvas(bm);
//If the text is bigger than the canvas , reduce the font size
if(textRect.width() >= (canvas.getWidth() - 4)) //the padding on either sides is considered as 4, so as to appropriately fit in the text
paint.setTextSize(convertToPixels(mContext, 7)); //Scaling needs to be used for different dpi's
//Calculate the positions
int xPos = (canvas.getWidth() / 2) - 2; //-2 is for regulating the x position offset
//"- ((paint.descent() + paint.ascent()) / 2)" is the distance from the baseline to the center.
int yPos = (int) ((canvas.getHeight() / 2) - ((paint.descent() + paint.ascent()) / 2)) ;
canvas.drawText(text, xPos, yPos, paint);
return new BitmapDrawable(getResources(), bm);
}
public static int convertToPixels(Context context, int nDP)
{
final float conversionScale = context.getResources().getDisplayMetrics().density;
return (int) ((nDP * conversionScale) + 0.5f) ;
}

What you can instead do is to put a TextView in overlay to a ImageView using a RelativeLayout :)

Here's Kotlin version Arun's solution:
import org.jetbrains.anko.dip
fun Context.writeTextOnDrawable(drawableId: Int, text: String) =
DrawableUtil.writeTextOnDrawableInternal(this, drawableId, text, 25, -2, 0)
object DrawableUtil {
fun writeTextOnDrawableInternal(context: Context, drawableId: Int, text: String,
textSizeDp: Int, horizontalOffset: Int, verticalOffset: Int): BitmapDrawable {
val bm = BitmapFactory.decodeResource(context.resources, drawableId)
.copy(Bitmap.Config.ARGB_8888, true)
val tf = Typeface.create("Helvetica", Typeface.BOLD)
val paint = Paint()
paint.style = Paint.Style.FILL
paint.color = Color.WHITE
paint.typeface = tf
paint.textAlign = Paint.Align.LEFT
paint.textSize = context.dip(textSizeDp).toFloat()
val textRect = Rect()
paint.getTextBounds(text, 0, text.length, textRect)
val canvas = Canvas(bm)
//If the text is bigger than the canvas , reduce the font size
if (textRect.width() >= canvas.getWidth() - 4)
//the padding on either sides is considered as 4, so as to appropriately fit in the text
paint.textSize = context.dip(12).toFloat()
//Calculate the positions
val xPos = canvas.width.toFloat()/2 + horizontalOffset
//"- ((paint.descent() + paint.ascent()) / 2)" is the distance from the baseline to the center.
val yPos = (canvas.height / 2 - (paint.descent() + paint.ascent()) / 2) + verticalOffset
canvas.drawText(text, xPos, yPos, paint)
return BitmapDrawable(context.resources, bm)
}
}

I m successfully implemented such problem of adding text on image. Just look at following code. First of take one view as Relative layout in that layout take ImageView after that EditText and after that button. Give each of a id. Write a loadBitmapFromView function below.
public Bitmap loadBitmapFromView(View v) {
Bitmap b = Bitmap.createBitmap(v.getWidth(), v.getHeight(), Config.ARGB_8888);
Canvas c = new Canvas(b);
v.layout(v.getLeft(), v.getTop(), v.getRight(), v.getBottom());
v.draw(c);
return b;
}
and on click of button.
Bitmap bitmap = loadBitmapFromView(relativeLayout);
File dir = new File(Environment.getExternalStorageDirectory().getAbsolutePath(), "folderName");
if (!dir.exists())
dir.mkdirs();
File file = new File(dir, "capture.jpg");
try {
FileOutputStream fos = new FileOutputStream(file);
bitmap.compress(Bitmap.CompressFormat.JPEG, 100, fos);
imageView.setImageBitmap(bitmap);
} catch (Exception e) {
Log.e("ExpressionEditImageActivity", "Error, " + e);
}
Enjoy...
For more reference, refer below screenshot:

Text to Image in android

I am developing an application where I need to generate an Image from text and store that Image to the SDCard.
Can anyone tell me a library(just like textimagegenerator for java) I need android compatible library or source which I can use for this?

TextView textView = new TextView(activity.getContext());
textView.setText("Hello World");
textView.setDrawingCacheEnabled(true);
textView.destroyDrawingCache();
textView.buildDrawingCache();
Bitmap bitmap = getTransparentBitmapCopy(textView.getDrawingCache());
private Bitmap getTransparentBitmapCopy(Bitmap source)
{
int width = source.getWidth();
int height = source.getHeight();
Bitmap copy = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
int[] pixels = new int[width * height];
source.getPixels(pixels, 0, width, 0, 0, width, height);
copy.setPixels(pixels, 0, width, 0, 0, width, height);
return copy;
}

You can use android.graphics.Canvas.drawText() for this.

Try to do this
Got the controls.
Button b1=(Button)findViewById(R.id.button1);
EditText ed1=(EditText)findViewById(R.id.editText1);
String msg=ed1.getText().toString();
Create the bitmap, canvas, paint,and invoke drawText function:
Bitmap bitmap = Bitmap.createBitmap(300, 400, Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
canvas.drawColor(Color.CYAN);
Paint paint = new Paint();
paint.setTextAlign(Align.LEFT);// 若设置为center，则文本左半部分显示不全 paint.setColor(Color.RED);
paint.setAntiAlias(true);// 消除锯齿
paint.setTextSize(20);
canvas.drawText(msg, 20, 30, paint) ;
canvas.save(Canvas.ALL_SAVE_FLAG);
canvas.restore();
Save the image
String path = Environment.getExternalStorageDirectory() + "/abc.png";
FileOutputStream fos = new FileOutputStream(new File(path));
bitmap.compress(Bitmap.CompressFormat.PNG, 100, fos);
fos.flush();
fos.close();

Assuming you have a text view or an image view, you will do this:
TextView tv = (TextView)findViewById(R.id.textview);
Bitmap bp;
bp = loadBitmapFromView(tv);
ImageView iv = new ImageView(this);
iv.setImageBitmap(bp);
try {
OutputStream fOut = null;
String path = "/sdcard/";
File file = new File(path, "imagename here.jpg");
fOut = new FileOutputStream(file);
getImageBitmap(bp).compress(Bitmap.CompressFormat.JPEG, 85, fOut);
fOut.flush();
} catch (Exception e) {
e.printStackTrace();
}
be sure to put this in your androidmanifest
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

Yo can have a look at this "Android save view to jpg or png" post:
Hope this helps

Set width of view in android

can we set the width of a view in android?

Actually I am placing an image as background in a view.
I want to clip that image and the clipped image should fill the entire view.
I am not getting it right.can you help.
here is my code....
try{
setContentView(R.layout.main);
ImageView img = (ImageView)findViewById(R.id.img);
Paint paint = new Paint();
paint.setFilterBitmap(true);
Bitmap bitmapOrg = BitmapFactory.decodeResource(getResources(),R.drawable.puli);
int targetWidth = 300;
int targetHeight = 300;
Bitmap targetBitmap = Bitmap.createBitmap(targetWidth, targetHeight,Bitmap.Config.ARGB_8888);
// System.out.println(" P ointsArrayX =" + PointsArrayX[i-1] + " PointsArrayY =" + PointsArrayY[i-1]);
RectF rectf = new RectF(0, 00, 100, 100);
Canvas canvas = new Canvas(targetBitmap);
Path path = new Path();
path.addRect(rectf, Path.Direction.CW);
canvas.clipPath(path);
canvas.drawBitmap( bitmapOrg,new Rect(0, 0, bitmapOrg.getWidth(), bitmapOrg.getHeight()),
new Rect(0, 0, targetWidth, targetHeight), null);
// Matrix matrix = new Matrix();
// // resize the bit map
// matrix.postScale(100, 133);
//
// Bitmap resizedBitmap = Bitmap.createBitmap(targetBitmap, 0, 0, 100, 133, matrix, true);
// //
/*convert Bitmap to resource */
BitmapDrawable bd = new BitmapDrawable(targetBitmap);
AbsoluteLayout.LayoutParams abs_params =
new AbsoluteLayout.LayoutParams(
//width in pixels
30,
//height in pixels
40, 0, 0
);
img.setLayoutParams(abs_params);
img.setImageDrawable(bd);
img.setOnTouchListener(new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
System.out.println("onTouch");
return false;
}
});
}
catch(Exception e){
System.out.println("Error1 : " + e.getMessage() + e.toString());
}
//my main.xml is
android:layout_height="300dp"
android:layout_width="300dp"
android:id="#+id/img"
android:layout_x="10dip"
android:layout_y="50dip"
the problem is that the image is clipped and placed in the view but the clipped portion is still there. I was not able to resize the image to fit that view.Help me to solve this.Thankyou.

Add this to your xml
android:scaleType="fitXY"

Yes you can.Just put layout
android:layout_width="300dip"
set You dip as your requirement .