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.
Related
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;
}
I'm working with a set of layered images (think stacked) and I need to combine them into one element.
I'm basing my solution off Combine multiple bitmap into one
//send a map to the method that has my stored image locations in order
private Bitmap combineImageIntoOne(NavigableMap<Integer, String> layerImages) {
//size of my bitmaps
int w = 400, h = 400;
//bitmap placeholder
Bitmap productIndex = null;
//flattened layers
Bitmap temp = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
//canvas to write layers to
Canvas canvas = new Canvas(temp);
int top = 0;
for (Map.Entry<Integer, String> e : layerImages.entrySet()) {
//create the layer bitmap
productIndex = decodeSampledBitmapFromResource(getResources(), e.getValue(), 400, 400);
//add layer to canvas
canvas.drawBitmap(productIndex, 0f, top, null);
}
//convert temp to a BitmapDrawable
Drawable d = new BitmapDrawable(getResources(),temp);
//set my image view to have the flattened image
carBase.setImageDrawable(d);
return temp;
}
The decodeSampledBitmapFromResource come from the Android docs about loading large bitmaps: Loading Large Bitmaps Efficiently You can review the code on that doc to see what I"m doing. I didn't edit the Android code much.
I've been using the Android code just fine to add layers to the FrameLayout but ended up running out of memory when the layers starting getting pretty high in number. This combining method is being used to conserve memory space.
Any ideas why the final bitmap doesn't have any content?
Reference LINK <-------------------------
public Bitmap combineImages(Bitmap c, Bitmap s) { // can add a 3rd parameter 'String loc' if you want to save the new image - left some code to do that at the bottom
Bitmap cs = null;
int width, height = 0;
if(c.getWidth() > s.getWidth()) {
width = c.getWidth() + s.getWidth();
height = c.getHeight();
} else {
width = s.getWidth() + s.getWidth();
height = c.getHeight();
}
cs = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas comboImage = new Canvas(cs);
comboImage.drawBitmap(c, 0f, 0f, null);
comboImage.drawBitmap(s, c.getWidth(), 0f, null);
// this is an extra bit I added, just incase you want to save the new image somewhere and then return the location
/*String tmpImg = String.valueOf(System.currentTimeMillis()) + ".png";
OutputStream os = null;
try {
os = new FileOutputStream(loc + tmpImg);
cs.compress(CompressFormat.PNG, 100, os);
} catch(IOException e) {
Log.e("combineImages", "problem combining images", e);
}*/
return cs;
}
byte[] GetImageFromText(string text, float fontSize)
{
//do make png image
//and returns byte array
}
I want to get a method like the one above.
thanks Lumis~
here is my final solution
float textSize = 30;
String text = "testing";
TextPaint tp = new TextPaint(TextPaint.ANTI_ALIAS_FLAG);
tp.setColor(Color.WHITE);
tp.setTextSize(textSize);
Rect bounds = new Rect();
tp.getTextBounds(text , 0, text.length(), bounds);
StaticLayout sl = new StaticLayout(text , tp, bounds.width()+5,
Layout.Alignment.ALIGN_NORMAL, 1f, 0f, false);
Bitmap bmp = Bitmap.createBitmap(bounds.width()+5, bounds.height()+5,
Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bmp);
sl.draw(canvas);
ByteArrayOutputStream stream = new ByteArrayOutputStream();
bmp.compress(CompressFormat.PNG, 100, stream);
byte[] image = stream.toByteArray();
You can do this drawing a text view into bitmap first, then you would have to save it as PNG into private app memory or SD card and send it. Here is an exmple how to convert text into bitmap: How to draw a TextView into a Bitmap (without ever beeing drawn on the display)
I changed my question a bit.
EDIT:
// make textures from text
public static void createTextureFromText(GL10 gl, String text, String texName) {
Paint p = new Paint();
p.setColor(Color.GREEN);
p.setTextSize(32 * getResources().getDisplayMetrics().density);
// get width and height the text takes (in px)
int width = (int) p.measureText(text);
int height = (int) p.descent();
// Create an empty, mutable bitmap based on textsize
Bitmap bmp = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_4444);
// get a canvas to paint over the bitmap
Canvas canvas = new Canvas(bmp);
bmp.eraseColor(Color.CYAN); //Cyan for debugging purposes
//draw the text
canvas.drawText(text, 0, 0, p);
// save image - for debugging purposes
ByteArrayOutputStream bytes = new ByteArrayOutputStream();
bmp.compress(Bitmap.CompressFormat.JPEG, 40, bytes);
// create a new file name "test.jpg" in sdcard
File f = new File(Environment.getExternalStorageDirectory() + File.separator + "test.jpg");
try {
f.createNewFile();
// write the bytes in file
FileOutputStream fo = new FileOutputStream(f);
fo.write(bytes.toByteArray());
fo.close();
} catch (FileNotFoundException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
.... make texture
}
I now have this code in use for creating textures from given text (this is just partially).
But I found the fault lies somewhere in the Bitmap creation. I now save the Bitmap on the sd-card, to see how it turns out and found I get a ALL Cyan bitmap (672B, 164x7 are the dimensions).
Does Anyone see why it doesn't create an Bitmap with text on it? What can I be doing wrong?
You'll be a hero if you could help me :)
Firstly, your text height calculation is wrong. The 'descent' measurement is just the portion of text below the baseline (i.e. the tails of 'g' and 'q' etc). The correct height is ascent+descent, except that since ascent is negative you want:
int height = (int) (p.descent() + -p.ascent());
Secondly, when you drawText() the y coordinate you give it is where the baseline goes, it is not the top or bottom edge. So if you want to fill a bitmap that's just big enough to hold the text, your y coordinate should also be -p.ascent().
I want to draw text on image ( for saving that image with text ). i have image view i set bitmap to that image i want to Draw the text on image (text entered by user ). i tried this before saving.....
void saveImage() {
File myDir=new File("/sdcard/saved_images");
myDir.mkdirs();
Random generator = new Random();
int n = 10000;
n = generator.nextInt(n);
String fname = "Image-"+ n +".jpg";
File file = new File (myDir, fname);
if (file.exists ()) file.delete ();
try {
FileOutputStream out = new FileOutputStream(file);
originalBitmap.compress(Bitmap.CompressFormat.JPEG, 90, out);
out.flush();
out.close();
} catch (Exception e) {
e.printStackTrace();
}
}
Xml code is..
<FrameLayout
android:id="#+id/framelayout"
android:layout_marginTop="30dip"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<ImageView
android:id="#+id/ImageView01"
android:layout_alignParentTop="true"
android:layout_height="wrap_content"
android:layout_width="wrap_content"/>
<TextView android:id="#+id/text_view2"
android:layout_marginTop="20dip"
android:layout_width="wrap_content"
android:text="SampleText"
android:textSize="12pt"
android:layout_alignTop="#+id/ImageView01"
android:layout_height="wrap_content"/>
</FrameLayout>
As suggested by Vladislav Skoumal, try this method:
public Bitmap drawTextToBitmap(Context mContext, int resourceId, String mText) {
try {
Resources resources = mContext.getResources();
float scale = resources.getDisplayMetrics().density;
Bitmap bitmap = BitmapFactory.decodeResource(resources, resourceId);
android.graphics.Bitmap.Config bitmapConfig = bitmap.getConfig();
// set default bitmap config if none
if(bitmapConfig == null) {
bitmapConfig = android.graphics.Bitmap.Config.ARGB_8888;
}
// resource bitmaps are imutable,
// so we need to convert it to mutable one
bitmap = bitmap.copy(bitmapConfig, true);
Canvas canvas = new Canvas(bitmap);
// new antialised Paint
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
// text color - #3D3D3D
paint.setColor(Color.rgb(110,110, 110));
// text size in pixels
paint.setTextSize((int) (12 * scale));
// text shadow
paint.setShadowLayer(1f, 0f, 1f, Color.DKGRAY);
// draw text to the Canvas center
Rect bounds = new Rect();
paint.getTextBounds(mText, 0, mText.length(), bounds);
int x = (bitmap.getWidth() - bounds.width())/6;
int y = (bitmap.getHeight() + bounds.height())/5;
canvas.drawText(mText, x * scale, y * scale, paint);
return bitmap;
} catch (Exception e) {
// TODO: handle exception
return null;
}
}
call this method
Bitmap bmp =drawTextToBitmap(this,R.drawable.aa,"Hello Android");
img.setImageBitmap(bmp);
the output
Updated SaveImage() method, to support text drawing.
void saveImage() {
File myDir=new File("/sdcard/saved_images");
myDir.mkdirs();
Random generator = new Random();
int n = 10000;
n = generator.nextInt(n);
String fname = "Image-"+ n +".jpg";
File file = new File (myDir, fname);
if (file.exists ()) file.delete ();
try {
FileOutputStream out = new FileOutputStream(file);
// NEWLY ADDED CODE STARTS HERE [
Canvas canvas = new Canvas(originalBitmap);
Paint paint = new Paint();
paint.setColor(Color.WHITE); // Text Color
paint.setTextSize(12); // Text Size
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OVER)); // Text Overlapping Pattern
// some more settings...
canvas.drawBitmap(originalBitmap, 0, 0, paint);
canvas.drawText("Testing...", 10, 10, paint);
// NEWLY ADDED CODE ENDS HERE ]
originalBitmap.compress(Bitmap.CompressFormat.JPEG, 90, out);
out.flush();
out.close();
} catch (Exception e) {
e.printStackTrace();
}
}
Let me know if this works for you.
Shash
You can extend a view to create a custom view. Something like
public class PieView extends View {
public PieView(Context context) {
super(context);
overlayBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.piechart_shade,
null);
overlayWidth = overlayBitmap.getWidth();
setLayoutParams(new LayoutParams(overlayWidth, overlayWidth));
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
}
}
In the ondraw method you can use canvas.drawBitmap and canvas.drawText to draw bitmaps and text.
This way you do not requirre a framelayout as everything is in a single custom view.
You can include this in your xml file as
<com.raj.PieView android:id="#+id/framelayout" android:layout_marginTop="30dip"
android:layout_height="fill_parent" android:layout_width="fill_parent"/>
create an empty bitmap
create a new Canvas object and pass this bitmap to it
call view.draw(Canvas) passing it the canvas object you just created. Refer Documentation of method for details.
Use Bitmap.compress() to write the contents of the bitmap to an OutputStream, file maybe.
Pseudo code:
Bitmap bitmap = Bitmap.createBitmap(200,200,Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
canvas.drawText();
//necessary arguments and draw whatever you want. thes all are drawn on the bitmap.finally save this bitmap
bitmap.compress(Bitmap.CompressFormat.JPEG, 100, fos);
Inflate a text view over the image .
Refer http://www.android10.org/index.php/forums/43-view-layout-a-resource/715-tutorial-android-xml-view-inflation for a basic example.
This should be the easiest way.
LinearLayout lLayout;
lLayout = (LinearLayout)findViewById(R.id.layout1);
layout1 is the main layout.
final LayoutInflater inflater = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
TextView tv = (TextView)inflater.inflate(R.layout.text, null);
lLayout.addView(tv);
I solve this problem (immutable file), but nothing is write in file... follow my code:
public static File writeOnImage(File file) throws IOException {
Bitmap originalBitmap = BitmapFactory.decodeFile(file.getPath());
originalBitmap = convertToMutable(originalBitmap);
FileOutputStream out = new FileOutputStream(file);
try {
Canvas canvas = new Canvas(originalBitmap);
Paint paint = new Paint();
paint.setColor(Color.BLACK);
paint.setStrokeWidth(12);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OVER));
canvas.drawBitmap(originalBitmap, 0, 0, paint);
canvas.drawText("Testing...", 10, 10, paint);
originalBitmap.compress(Bitmap.CompressFormat.JPEG, 90, out);
out.flush();
out.close();
} catch (Exception e) {
e.printStackTrace();
}
return file;
}
In case you using Glide to get the image, i modified #Dwivedi's answer to this (using kotlin) :
Glide.with(this)
.asBitmap()
.load("https://images.pexels.com/photos/1387577/pexels-photo-1387577.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260")
.into(object : CustomTarget<Bitmap>() {
override fun onLoadCleared(placeholder: Drawable?) {}
override fun onResourceReady(resource: Bitmap, transition: Transition<in Bitmap>?) {
val bm = resource.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 = dip(25).toFloat()
val textRect = Rect()
paint.getTextBounds("HELLO WORLD", 0, "HELLO WORLD".length, textRect)
val canvas = Canvas(bm)
//If the text is bigger than the canvas , reduce the font size
if (textRect.width() >= canvas.width - 4)
//the padding on either sides is considered as 4, so as to appropriately fit in the text
paint.textSize = dip(12).toFloat()
//Calculate the positions
val xPos = canvas.width.toFloat()/2 + -2
//"- ((paint.descent() + paint.ascent()) / 2)" is the distance from the baseline to the center.
val yPos = (canvas.height / 2 - (paint.descent() + paint.ascent()) / 2) + 0
canvas.drawText("HELLO WORLD", xPos, yPos, paint)
binding.imageDrawable.setImageBitmap(bm)
}
})