Android canvas drawText from right to left - android

I have an app that handels Arabic too, but my Arabic users have a problem that the drawText flip the word .. Arabic must be from right to left. How do I make the canvas drawText from right to left?
See in the picture the highlighted text is the right text its a textView and it's fine. But the canvas DrawText the one in a circle is wrong. It must be from right to left, how do I make the canvas drawText from right to left?

On the canvas just create two points on sides where you want to draw text, and then create path between them. use this method it will work fine
Path path = new Path();
Paint paint = new Paint();
path.moveTo(p2.x, p2.y);
path.lineTo(p1.x, p1.y);
canvas.drawTextOnPath(String.valueOf(txt), path, (float) (c.getWidth() / (2.3)), (float) (c.getHeight()/2 + paint.getTextSize()/1.5), paint);

you can get subString from your string and draw in your canvas:
Paint textPaint = new Paint();
textPaint.setColor(Color.BLACK);
textPaint.setStyle(Paint.Style.FILL_AND_STROKE);
textPaint.setTextSize(20);
textPaint.setTypeface(Typeface.DEFAULT_BOLD);
textPaint.setStrokeWidth(1);
String subString = mString;
float textWidth = textPaint.measureText(mString);
int endOffset = Math.round(rectWidth * (mString.length() - 1) / textWidth);
if (textWidth > rectWidth) {
endOffset =endOffset - 2;
subString = mString.substring(0, endOffset);
subString = subString + "..";
}else{
for(int j=mString.length();j<endOffset+1;j++){
subString+=" ";
}
}
canvas.drawText(subString, padding , (float) (startHeight + eachHeight / 3 + textPaint.getTextSize() / 1.5), textPaint);
in this way we have a same result even in RTL or LTR string .

Make sure that Android emulator that contains the Arabic language, I had the same problem but when I tried the application on an actual mobile device,It solved.
There are no problems in your application in the language, make sure Android emulator supports the Arabic language

If your target device is api level greater than 11 you can use rotateY=180 attribute in TextView element. Also the parent view should set to rotateY = 180.

Related

Text in pdf-file has mysterious spaces

I am trying to export text to a pdf document using the standard PDFdocument class in android. The code creates a pdf but in the text I write to the PDF, it put mysterious spaces half in words.
Tried using the canvas.drawText option and the drawItemn option.
Both give the same result. The problem code-line is almost at the bottom of the sample code below.
PdfDocument.PageInfo pageInfo = new PdfDocument.PageInfo.Builder(mPageWidth, mPageHeight, pageNr).create();
PdfDocument.Page page = doc.startPage(pageInfo);
Memory memory = mMemoryData.get(pageNr);
Canvas canvas = page.getCanvas();
TextPaint paint = new TextPaint();
paint.setColor(Color.BLACK);
//Header
Yposition = drawItem( canvas,
paint,
18,
true,
Xposition,
Yposition,
memory.getTitle() );
//line
Yposition += 14; //Extra offset to get some space between the text and line
paint.setColor( ContextCompat.getColor(this, R.color.default_Accent) );
canvas.drawLine( Xposition, Yposition, pageInfo.getPageWidth() - Xposition, Yposition, paint );
Yposition += 20;
paint.setColor(Color.BLACK);
paint.setTextSize(10);
// **this is the line that gives the problem**
canvas.drawText(memory.getText(),Xposition, Yposition, paint);
doc.finishPage(page);
The result of this action is:
At first sight this looks ok but if you zoom in a bit or better yet copy/past the text into notepad (or something) you get this:
No w le ts try this
In stead of the problem line, I also tried this:
drawItem( canvas, paint, 10, false, Xposition, Yposition, memory.getText() );
This has some benefits especially with bigger text but other that that it gives the same problem.
Does anybody have an idea how to solve this?
Thanks to the tip from Henry the problem is now solved.
For others having the same problem:
i was close with the setting of the font but "Arial" just doesn't work
This also goes for "Typeface.SANS_SERIF". I kept getting these strange spaces in my text.
Now it put it like below.
paint.setTypeface(Typeface.create( Typeface.MONOSPACE, Typeface.NORMAL));
Not the best looking text markup but it does the trick for now.

Android: drawTextOnPath multiline

I current have a custom view that I override the onDraw and draw an arc. I want to draw text within this arc. To do this, I use drawTextOnPath and this display curved text at the top of the arc. However, sometimes the text is quite long, so I want to allow it to go on to multiple lines.
I currently use code like this to draw on to multiple lines: -
textView.getPaint().getTextBounds(s, 0,
s.length(), r);
int yOffset=r.height() + textSpacing;
int textStart=0;
int numberOfLines= (int) (r.width()/arcWidth) + 1;
for (int i=0; i < numberOfLines; i ++) {
canvas.drawTextOnPath(s.substring(textStart, textStart + s.length() / numberOfLines),
childHolder.path, 0, yOffset, paint);
yOffset+=r.height() +textSpacing;
textStart=s.length()/numberOfLines;
}
However, this obviously doesn't take into account how wide the text is further down the arc. Is there a way of doing this with using something like staticlayout/dynamiclayout (text does change a lot).
If anyone could point me in either something in android SDK I can use, or the maths to calculate the available width
This bit of code solved my issue: -
PathMeasure pm = new PathMeasure(path, false);
layout = new DynamicLayout(spannableText, spannableText, paint, (int) arcPathMeasure.getLength(), Layout.Alignment.ALIGN_CENTER, 1, 0, true);
Thanks pskink!

Display multiple lines of text in Oxyplot TextAnnotation

I'm working on an Android app utilizing xamarin and the oxyplot library. I ran into a problem where I cannot add multiple lines of text in TextAnnotation.
I tried the following options:
var sb = new StringBuilder();
sb.Append("Line1");
sb.AppendLine(); // which is equal to Append(Environment.NewLine);
sb.Append("\n");
sb.Append("\r\n");
sb.Append(System.Environment.NewLine);
sb.Append("Line2");
and added it like so to the TextAnnotation text object:
var textAnnotation1 = new TextAnnotation();
textAnnotation1.Text = sb.ToString();
textAnnotation1.Background = OxyColors.White;
textAnnotation1.TextColor = OxyColors.Black;
textAnnotation1.FontSize = 18;
textAnnotation1.TextPosition = new DataPoint(4,_vericalLineYaxis);
plotModel.Annotations.Add(textAnnotation1);
but all to avail.
My goal is to have the text appear like so:
Line 1
Line 2
Currently it's appearing as:
Line 1 Line2
Any help would be much appreciated.
Multi-line Annotations is not currently supported on the Android platform.
OxyPlot is invoking Android.Canvas.DrawText and that function does not support text wrapping, it is a fairly low-level primitive drawing routine.
Google's Doc: public void drawText (String text, float x, float y, Paint paint)
If you feel like mod'ing the source, this could be done by using a static layout vs. the current canvas.DrawText.
Something like this would get you started (but is untested):
public void DrawText (string text, float x, float y, Paint paint)
{
TextPaint textPaint = new TextPaint();
StaticLayout textLayout = new StaticLayout(text, textPaint, canvas.getWidth(), Alignment.ALIGN_NORMAL, 1.0f, 0.0f, False);
canvas.Save();
canvas.Translate(x, y);
textLayout.Draw(canvas);
canvas.Restore();
}
FYI: Oxyplot's SVG renderer manually handles multi-line text by string splitting on "\r\n" and rendering a separate element for each line so the same thing could be done for the Android instead of using a StaticLayout (slower performance wise, but easy to mod/test):
var lines = Regex.Split(text, "\r\n");
if (valign == VerticalAlignment.Bottom)
{
for (var i = lines.Length - 1; i >= 0; i--)
{
var line = lines[i];
var size = this.MeasureText(line, fontFamily, fontSize, fontWeight);
this.w.WriteText(p, line, c, fontFamily, fontSize, fontWeight, rotate, halign, valign);
p += new ScreenVector(Math.Sin(rotate / 180.0 * Math.PI) * size.Height, Math.Cos(rotate / 180.0 * Math.PI) * size.Height);
}
}

Drawing path gradually in Android

I have a custom view, around which I want to draw a path, like a border.
But the border should draw itself gradually, like a snake growing in size.
The aim is to use it as a timer for a player to make his move in a game.
I used the Path class and the methods lineTo and addArc to draw the border.
timerPath = new Path();
timerPath.moveTo(getTranslationX() + width / 2, getTranslationY() + 3);
timerPath.lineTo(getTranslationX() + width - 10, getTranslationY() + 3);
timerPath.addArc(new RectF(getTranslationX() + width - 20, getTranslationY() + 3,
getTranslationX() + width - 3, getTranslationY() + 20), -90f, 90f);
...
...
timerPath.lineTo(getTranslationX() + width / 2, getTranslationY() + 3);
timerPaint = new Paint();
timerPaint.setColor(Color.GREEN);
timerPaint.setStyle(Paint.Style.STROKE);
timerPaint.setStrokeWidth(6);
I use the drawPath() method in onDraw:
canvas.drawPath(timerPath, timerPaint);
It looks well.
Now, I wonder if there is a way to draw just part of the path using percentage (10%, 11%, 12% .. etc).
Then I'll be able to animate the drawing.
If it's not possible, is there another way of animating border drawing? (to use as a timer)
Appreciate your help.
You can use the PathMeasure class to do this. Create a PathMeasure object from your path, measure the length and then use getSegment() to return a partial path that you can draw to the canvas:
float percentage = 50.0f; // initialize to your desired percentage
PathMeasure measure = new PathMeasure(timerPath, false);
float length = measure.getLength();
Path partialPath = new Path();
measure.getSegment(0.0f, (length * percentage) / 100.0f, partialPath, true);
partialPath.rLineTo(0.0f, 0.0f); // workaround to display on hardware accelerated canvas as described in docs
canvas.drawPath(partialPath, timerPaint);

Painting text over background image is dim

I'm painting text over a background image on a canvas. I move the image interactively (like a Ouija board pointer). I've set the canvas to black, the pointer is red and I want to write white text over it so that the pointer has a player's name on it.
In Android 2.3.4 it appears as solid white text on top of the red pointer which is pretty clear, but I'd like to use any color. In Android 4.1.2 I can barely see the white text. Here's my code:
public Pointer(Context context) {
super(context);
paintBg = new Paint();
paintBg.setColor(Color.BLACK);
paintName = new Paint();
paintName.setColor(Color.WHITE);
paintName.setTextSize(50); // set text size
paintName.setStrokeWidth(5);
paintName.setTextAlign(Paint.Align.CENTER);
this.setImageResource(res); // pointer.png in res/drawable folder
Drawable d = getResources().getDrawable(res);
h = d.getIntrinsicHeight();
w = d.getIntrinsicWidth();
canvas = new Canvas();
canvas.drawPaint(paintBg);//make background black
// float imageScale = width / w; // how image size scales with screen
}
#Override
public void onDraw(Canvas canvas) {
y = this.getHeight() / 2; // center of screen
x = this.getWidth() / 2;
int left = Math.round(x - 0.8f * w);
int right = Math.round(x + 0.8f * w);
canvas.save();
canvas.rotate((direction + 180) % 360, x, y); // rotate to normal
canvas.drawText(s, x, y + 20, paintName); // draw name
canvas.restore();
canvas.rotate(direction, x, y); // rotate back
super.onDraw(canvas);
}
What changed in 4.1.2 that would affect this, or am I doning something incorrectly? Thanks for your help with this as it's driving me crazy.
Edit to include screen shots:
Android 2.3.4
Android 4.1.2
Note how the white text appears to be on top in 2.3.4 while it appears below or muddy in 4.1.2.
As free3dom pointes out it is related to alpha. I do change alpha because if I don't, the text does not appear on top of the arrow. It appears that the ImageView having the pointer image is always on top - could this be what's going on?
Here is how I handle setting alpha:
public static void setAlpha(View view, float alpha, int duration) {
if (Build.VERSION.SDK_INT < 11) {
final AlphaAnimation animation = new AlphaAnimation(alpha, alpha);
animation.setDuration(duration);
animation.setFillAfter(true);
view.startAnimation(animation);
} else //for 11 and above
view.setAlpha(alpha);
}
Maybe it has something to do with using this.setImageResource(res) to set the image resource? According to android developer guide, I can only set alpha to the single view and everything in the view is changed. Yet if I lower the alpha, the arrow image seems to become transparent enough to allow me to see the text.
You set a stroke width, but never indicate that stroke should be used for the Paint.
Try adding
paintName.setStyle( FILL_AND_STROKE );

Categories

Resources