We Keep Coding

Curving text in Android

I'm creating a text editing app that allows the user to edit text using different fonts, colors, sizes, etc. Right now I'm working on a feature that is supposed to curve the text. I already tried asking once HERE but the answer that was posted wasn't really what I was looking for (or maybe it was and I just don't understand exactly what they meant) so I figured I'd ask again with an ACTUAL reference to what I'm trying to accomplish. So as you can see, I'm trying to have the text curve based on what the valued of the slider (seekbar in my case) is, but I just don't know how to do it. I was trying to mimic what is done HERE specifically the Along a path part, but again I'm not sure how to make it work with a seekbar as shown in the image.
Thank you
EDIT
Here's the code that I've been working with. Like I stated earlier, this my be exactly what I'm looking for and I'm just stupid, but here it is anyways.
import android.app.Activity;
import android.graphics.*;
import android.os.Bundle;
import android.view.*;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
public class Painting extends Activity
{
public static int y = 0;
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(new SampleView(this));
}
private static class SampleView extends View
{
private Paint mPaint;
private float mX;
private float[] mPos;
private Path mPath;
private Paint mPathPaint;
private static final int DY = 30;
private static final String TEXTONPATH = "Along a path";
private static void makePath(Path p)
{
p.moveTo(10, 0);
p.cubicTo(00, 00, 00, 00, 900, 00);
}
public SampleView(Context context)
{
super(context);
setFocusable(true);
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setTextSize(90);
mPaint.setTypeface(Typeface.SERIF);
mPath = new Path();
makePath(mPath);
mPathPaint = new Paint();
mPathPaint.setAntiAlias(true);
mPathPaint.setColor(0x800000FF);
mPathPaint.setStyle(Paint.Style.STROKE);
}
#Override
protected void onDraw(Canvas canvas)
{
canvas.drawColor(Color.WHITE);
Paint p = mPaint;
float x = mX;
float y = 0;
float[] pos = mPos;
p.setColor(0x80FF000);
canvas.drawLine(x, y, x, y+DY*3, p);
p.setColor(Color.BLACK);
canvas.translate(0, DY*10);
canvas.drawPath(mPath, mPathPaint);
p.setTextAlign(Paint.Align.LEFT);
canvas.drawTextOnPath(TEXTONPATH, mPath, 0, 0, p);
}
}
}

You are not going to be able to do this with a TextView. Instead you will have to write you own class extending View.
You will have to override onDraw and draw the text onto the Canvas there.
To make it work with a SeekBar you can use SeekBar#setOnSeekBarChangeListener. There in onProgressChanged you can tell your View to change its appearance.

Android Class Function Null Object Reference

I'm writing a very simple Android drawing program, for which I wrote a class DoodleCanvas.java, which includes (at the very bottom) a function to clear the canvas by filling it with white.
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
public class DoodleCanvas extends View {
private Paint mPaint; //Paint object for setting attr
private Path mPath; //Path object for tracing Paint over
public Canvas canvas; //Canvas object for calling Paint
public DoodleCanvas(Context context, AttributeSet attrs) {
super(context, attrs);
mPaint = new Paint();
mPaint.setColor(Color.RED);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeJoin(Paint.Join.ROUND);
mPaint.setStrokeCap(Paint.Cap.ROUND);
mPaint.setStrokeWidth(10);
mPath = new Path();
}
//Draw mPaint over mPath
#Override
protected void onDraw(Canvas canvas) {
canvas.drawPath(mPath, mPaint);
super.onDraw(canvas);
}
//Create mPath from touch events
#Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
mPath.moveTo(event.getX(), event.getY());
break;
case MotionEvent.ACTION_MOVE:
mPath.lineTo(event.getX(), event.getY());
invalidate();
break;
}
return true;
}
//Class function for filling canvas with white, effectively cleaning it
public void clearcanvas(Canvas canvas) {
canvas.drawColor(Color.WHITE);
}
}
In my MainActivity.java, I have set up a clear button to call clearcanvas.
package brianslho.basiccanvas;
import android.graphics.Canvas;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
public class MainActivity extends AppCompatActivity {
DoodleCanvas dcanvas; //Custom class DoodleCanvas (from "DoodleCanvas.java")
Button btn; //Button for clearing screen
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
dcanvas = findViewById(R.id.canvas);
btn = findViewById(R.id.btn);
btn.setOnClickListener(clearcanvas);
}
//Clear screen on button click
protected Button.OnClickListener clearcanvas = new View.OnClickListener() {
#Override
public void onClick(View v) {
//ERROR: canvas is null
Canvas canvas = dcanvas.canvas;
dcanvas.clearcanvas(canvas);
}
};
}
The app crashes whenever I press the clear button. The error message is, in essence, java.lang.NullPointerException: Attempt to invoke virtual method 'void android.graphics.Canvas.drawColor(int)' on a null object reference. I've declared the canvas inside onClick, which I'm very sure is not "good coding", but just as an attempt to fix the null problem. I've searched StackOverflow for similar problems (and boy there are a LOT) but couldn't find anything that'd solve this.
Thank you in advance for your help!

Your problem is you have declare variable with the same name: public Canvas canvas; vs public void clearcanvas(Canvas canvas) => program will understand that canvas in your function is the global instead of the parameter of function. => solution: change variable name

you have to call the constructor and you have declared variable with the same name public Canvas canvas; and public void clearcanvas(Canvas canvas).So change the variable.
dcanvas = new DoodleCanvas(Context context, AttributeSet attrs);

Android - adding scrolls if canvas exceeds screen height

Currently I'm making some changes in app for android. It currently works nicely in portrait mode, but not in landscape mode. The thing is that when in landscape mode, text on my canvas exceeds height of screen (therefore, it's not readable). I need to add scrolls on canvas if canvas size exceeds screen size. (I've already made changes to .xml to make layout scrollView but it doesn't help since canvas is set to be the size of the screen, and not the size of it's content)
Ill paste the entire class, but the important part is onDraw. This class is used from main activity, and then main activity. Question is pretty straight forward. Is there a way to dynamically add scrolls if canvas is bigger than screens? Or should I use another activity for writing results and canvas only for drawing? If need be, here's link to entire project and there is zip with all the code (app is really not that big):
http://www.yorku.ca/mack/FittsLawSoftware/
package ca.yorku.cse.mack.fittstouch;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
import android.widget.Toast;
public class ExperimentPanel extends View
{
final int START_TEXT_SIZE = 20; // may need to fiddle with this, depending on device
final int START_CICLE_DIAMETER = 53; // x pixelDensity = one-third inch
final int GAP_BETWEEN_LINES = 6;
Target[] targetSet;
Target toTarget; // the target to select
Target fromTarget; // the source target from where the trial began
Target startCircle;
float panelWidth;
float panelHeight;
float d; // diameter of start circle (also used for positioning circle and text)
float textSize;
float gap;
boolean waitStartCircleSelect, done;
String mode;
Paint targetPaint, targetRimPaint, normalPaint, startPaint;
String[] resultsString = {"Tap to begin"};
public ExperimentPanel(Context contextArg)
{
super(contextArg);
initialize(contextArg);
}
public ExperimentPanel(Context contextArg, AttributeSet attrs)
{
super(contextArg, attrs);
initialize(contextArg);
}
public ExperimentPanel(Context contextArg, AttributeSet attrs, int defStyle)
{
super(contextArg, attrs, defStyle);
initialize(contextArg);
}
// things that can be initialized from within this View
private void initialize(Context c)
{
this.setBackgroundColor(Color.LTGRAY);
float pixelDensity = c.getResources().getDisplayMetrics().density;
d = START_CICLE_DIAMETER * pixelDensity;
startCircle = new Target(Target.CIRCLE, d, d, d, d, Target.NORMAL);
textSize = START_TEXT_SIZE * pixelDensity;
gap = GAP_BETWEEN_LINES * pixelDensity;
targetPaint = new Paint();
targetPaint.setColor(0xffffaaaa);
targetPaint.setStyle(Paint.Style.FILL);
targetPaint.setAntiAlias(true);
targetRimPaint = new Paint();
targetRimPaint.setColor(Color.RED);
targetRimPaint.setStyle(Paint.Style.STROKE);
targetRimPaint.setStrokeWidth(2);
targetRimPaint.setAntiAlias(true);
normalPaint = new Paint();
normalPaint.setColor(0xffff9999); // lighter red (to minimize distraction)
normalPaint.setStyle(Paint.Style.STROKE);
normalPaint.setStrokeWidth(2);
normalPaint.setAntiAlias(true);
startPaint = new Paint();
startPaint.setColor(0xff0000ff);
startPaint.setStyle(Paint.Style.FILL);
startPaint.setAntiAlias(true);
startPaint.setTextSize(textSize);
}
#Override
protected void onDraw(Canvas canvas)
{
int tmp1=0;
float tmp2 =0;
if (waitStartCircleSelect) // draw start circle and prompt/results string
{
canvas.drawCircle(startCircle.xCenter, startCircle.yCenter, startCircle.width / 2f,
startPaint);
for (int i = 0; i < resultsString.length; ++i){
canvas.drawText(resultsString[i], d / 2, d / 2 + 2 * startCircle.width / 2f + (i + 1) * (textSize + gap), startPaint);
tmp1=i;
}
} else if (!done) // draw task targets
{
for (Target value : targetSet)
{
if (mode.equals("1D"))
canvas.drawRect(value.r, normalPaint);
else // 2D
canvas.drawOval(value.r, normalPaint);
}
// draw target to select last (so it is on top of any overlapping targets)
if (mode.equals("1D"))
{
canvas.drawRect(toTarget.r, targetPaint);
canvas.drawRect(toTarget.r, targetRimPaint);
} else // 2D
{
canvas.drawOval(toTarget.r, targetPaint);
canvas.drawOval(toTarget.r, targetRimPaint);
}
}
invalidate(); // will cause onDraw to run again immediately
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
setMeasuredDimension((int) panelWidth, (int) panelHeight);
}
}

Design a Path for cropping an ImageView

Ok, I need to crop an ImageView in a particular shape, and I can't do this by adding over a png, because the background can be variable (ex. a pattern). So, I need that the area outside the shape is transparent.
The shape must be this:
I thought to use Path() to draw this shape and use it to mask the ImageView, but I have absolutely no idea how to draw a complex shape like this with Path().
Many thanks.

So I was bored and this looked like fun, so I've thrown together a simple Drawable you can use to do this. You could get fancier and add strokes and whatnot to it, but this works for the basic case you've suggested, and allows you to set the arrow to be pointing to any of the corners, and will also scale your image to fit the bounds of the Drawable. Here's the result:
You can use it by:
BubbleDrawable bubbleDrawable = new BubbleDrawable(
this, R.drawable.your_image, BubbleDrawable.Corner.TOP_RIGHT);
myImageView.setImageDrawable(bubbleDrawable);
And here's the code for BubbleDrawable:
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.ColorFilter;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.Shader;
import android.graphics.drawable.Drawable;
import static android.graphics.Matrix.ScaleToFit.FILL;
import static android.graphics.Paint.ANTI_ALIAS_FLAG;
import static android.graphics.Path.Direction.CW;
import static android.graphics.PixelFormat.TRANSPARENT;
import static android.graphics.Shader.TileMode.CLAMP;
import static test.com.testrotationanimation.BubbleDrawable.Corner.TOP_LEFT;
public final class BubbleDrawable extends Drawable {
private final Matrix mMatrix = new Matrix();
private final Paint mPaint = new Paint(ANTI_ALIAS_FLAG);
private final Path mPath = new Path();
private final RectF mSrcRect = new RectF();
private final RectF mDstRect = new RectF();
private final Shader mShader;
private Corner mArrowCorner = TOP_LEFT;
public BubbleDrawable(Bitmap bitmap, Corner arrowCorner) {
// Initialize a BitmapShader with the image you wish to draw
// (you can use other TileModes like REPEAT or MIRROR if you prefer)
mShader = new BitmapShader(bitmap, CLAMP, CLAMP);
mPaint.setShader(mShader);
// Save the bounds of the bitmap as the src rectangle -- will
// be used later to update the matrix when the bounds change
// so that the image fits within the bounds of this drawable
mSrcRect.set(0, 0, bitmap.getWidth(), bitmap.getHeight());
// Set the corner in which the arrow will be drawn
mArrowCorner = arrowCorner;
}
public BubbleDrawable(Context ctx, int drawableResource, Corner arrowCorner) {
this(BitmapFactory.decodeResource(ctx.getResources(), drawableResource), arrowCorner);
}
public Corner getArrowCorner() {
return mArrowCorner;
}
public void setArrowCorner(Corner corner) {
mArrowCorner = corner;
updatePath();
invalidateSelf();
}
#Override
protected void onBoundsChange(Rect bounds) {
super.onBoundsChange(bounds);
updateMatrix(bounds);
updatePath();
}
private void updateMatrix(Rect bounds) {
// Set the destination rectangle for the bitmap to be the
// new drawable bounds
mDstRect.set(bounds);
// Scale the bitmap's rectangle to the bounds of this drawable
mMatrix.setRectToRect(mSrcRect, mDstRect, FILL);
// Update the shader's matrix (to draw the bitmap at the right size)
mShader.setLocalMatrix(mMatrix);
}
private void updatePath() {
final Rect bounds = getBounds();
final float x = bounds.exactCenterX();
final float y = bounds.exactCenterY();
// Draw the initial circle (same for all corners)
mPath.reset();
mPath.addCircle(x, y, Math.min(x, y), CW);
// Add the rectangle which intersects with the center,
// based on the corner in which the arrow should draw
switch (mArrowCorner) {
case TOP_LEFT:
mPath.addRect(bounds.left, bounds.top, x, y, CW);
break;
case TOP_RIGHT:
mPath.addRect(x, bounds.top, bounds.right, y, CW);
break;
case BOTTOM_LEFT:
mPath.addRect(bounds.left, y, x, bounds.bottom, CW);
break;
case BOTTOM_RIGHT:
mPath.addRect(x, y, bounds.right, bounds.bottom, CW);
break;
}
}
#Override
public void draw(Canvas canvas) {
// Easy enough, just draw the path using the paint.
// It already has the BitmapShader applied which
// will do the work for you.
canvas.drawPath(mPath, mPaint);
}
#Override
public int getOpacity() {
// Indicate that this Drawable has fully-transparent pixel values
return TRANSPARENT;
}
#Override
public void setColorFilter(ColorFilter colorFilter) {
// Yay, you can even support color filters for your drawable
mPaint.setColorFilter(colorFilter);
}
#Override
public void setAlpha(int i) {
// You could do this by doing some canvas magic but I'm
// lazy and don't feel like it. Exercise for the reader. :)
throw new UnsupportedOperationException("Not implemented.");
}
public enum Corner {
TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT
}
}

Scrolling off screen bitmap, on SurfaceView, down one row does not work

Scrolling off screen bitmap, on SurfaceView, down one row does not work.
Try example code below to prove something seems broken in Android Java graphics bitmap system, or (more likely) there is something about this I do not understand, when scrolling an off screen bitmap down and drawing on on-screen SurfaceView canvas using drawBitmap.
Run code once and see how it smears the stroke only circle down the page like the circle was filled.
Then change the Y offset from 1 to - 1 and rerun the code and it scrolls up one line fine (hard to see as it's not animated).
package com.example.SurfaceViewTest;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.Paint.Style;
import android.os.Bundle;
import android.util.Log;
import android.view.SurfaceHolder;
import android.view.SurfaceView;
public class SurfaceViewTest extends Activity implements SurfaceHolder.Callback {
private SurfaceView mSurfaceView;
private SurfaceHolder mSurfaceHolder;
private int intSurfaceWidth, intSurfaceHeight;
Bitmap bmpOffScreen;
Canvas cnvOffScreen = new Canvas();
Canvas c = new Canvas();
private static Paint paint = new Paint();
private static final String TAG = null;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
mSurfaceView = (SurfaceView) this.findViewById(R.id.Surface);
mSurfaceHolder = mSurfaceView.getHolder();
mSurfaceHolder.addCallback(this);
paint.setColor(0xFFFFFFFF);
paint.setStyle(Style.STROKE);
}
#Override
public void surfaceChanged(SurfaceHolder holder, int format, int width,
int height) {
intSurfaceWidth = width;
intSurfaceHeight = height;
bmpOffScreen = Bitmap.createBitmap(intSurfaceWidth, intSurfaceHeight, Bitmap.Config.ARGB_8888);
cnvOffScreen = new Canvas(bmpOffScreen);
cnvOffScreen.drawCircle(intSurfaceWidth / 2, intSurfaceHeight / 2, 100, paint);
c = null;
c = mSurfaceHolder.lockCanvas(null);
if (c == null) {
Log.e(TAG, "Canvas bu-huu");
} else {
// Scroll off screen canvas and hopefully underlying bitmap bitmap
Rect src = new Rect(0, 0, intSurfaceWidth, intSurfaceHeight);
Rect dst = new Rect(0, 0, intSurfaceWidth, intSurfaceHeight);
dst.offset(0, 1);
cnvOffScreen.drawBitmap(bmpOffScreen, src, dst, null);
// This produces exact same smear, but works fine scrolling up!?!
cnvOffScreen.translate(0,1);
cnvOffScreen.drawBitmap(bmpOffScreen, 0, 0, paint);
c.drawBitmap(bmpOffScreen, 0, 0, paint);
mSurfaceHolder.unlockCanvasAndPost(c);
}
}
#Override
public void surfaceCreated(SurfaceHolder holder) {}
#Override
public void surfaceDestroyed(SurfaceHolder holder) {}
}

There is a drawBitmap function within canvas with the following signature:
public void drawBitmap (Bitmap bitmap, Rect src, RectF dst, Paint paint);
You can make your dst the size of the canvas, and your src can be set up to be new
Rect(0,offset,width,height+offset)
You can then increment offset every frame and get a smoothly scrolling bitmap in your view.

I had this problem and figured out why this happened. It's due to a bit of negligence in android's translate function. Basically it's because the function ONLY works by copying pixels left-to-right per row from top-to-bottom, without checking which direction you're translating to. So going left and down, it works because it is copying existing pixels to 'old' pixels, but the other way around, you're copying pixels to pixels you want to copy later on.
The trick to solving this is to use the faster translate function in the right/down translation, but use a slower, bitmap copying way for the other directions. Or maybe find some way to override the translate function with one which does it correctly, but I haven''t figured out how to do that yet.
I have a little writeup here:
http://spiralcode.wordpress.com/2013/06/17/long-time-no-see-of-rivers-cartography-and-tiling/