Drawing emojis on Android canvas using unicode values

Question

I am trying to create a custom view for my android app. In the OnDraw function I am trying to draw an emoji by using its unicode value, but that does not seem to work. Following is the code:

public class Scale extends View {
    private final Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    private final static int LINE_WIDTH = 10;
    ...
    ...
    @Override
    protected void onDraw(final Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(LINE_WIDTH);
        mPaint.setColor(Color.BLUE);
        ...
        ...
        //This works
        canvas.drawText("My text", 0.05f*width, 0.80f*height, mPaint);
        //But this does NOT draw a doughnut!!
        String s = new String(Character.toChars(0x1F369)); //Doughnut
        canvas.drawText(s, 0.75f*width, 0.50f*height, mPaint);
    }
}

Anyone knows if there any is work-around here? Or am I doing something wrong?

EDIT [second question]: With the hack I submitted below, I see that the Emojis are rendering inside the TextView drawn on the Canvas but they are significantly duller compared to Emojis set on a normal TextView, as shown below:

Any idea what am I missing here?

Answer 1

For what it's worth, I have found a hack for this, which I myself don't like much! In this, I create a Layout (e.g. LinearLayout) and add a TextView which contains my emoji and then draw the Layout on Canvas.

public class Scale extends View {
    private final Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    private final LinearLayout layout;
    ...
    ...
    public Scale(final Context context, ...) {
        super(context);
        ...
        ...
        //Initialise the layout & add a TextView with the emoji in it
        layout = new LinearLayout(context);
        final TextView tv = new TextView(context);
        tv.setText(new String(Character.toChars(0x1F369))); //Doughnut
        layout.addView(tv);
        layout.measure(50, 50);
        layout.layout(0, 0, 50, 50);
    }
    @Override
    protected void onDraw(final Canvas canvas) {
        super.onDraw(canvas);
        ...
        ...
        canvas.translate(20, 20); //Translate if necessary
        //Draw the layout on the canvas, draws a doughnut!!
        layout.draw(canvas);
        canvas.save();
        canvas.restore();
    }
}

Please post, if there is a better solution.

EDIT

I figured out that StaticLayout is a better option to draw text on canvas & does not have the issue of the text/emoji becoming duller.

My modified code (fewer lines than earlier):

public class Scale extends View {
    private final TextPaint tPaint = new TextPaint();
    private final StaticLayout lsLayout;
    ...
    ...
    public Scale(final Context context, ...) {
        super(context);
        ...
        ...
        //Initialise the layout & add a TextView with the emoji in it
        String emoji = new String(Character.toChars(0x1F369))); //Doughnut
        lsLayout = new StaticLayout(emoji, tPaint, 80, Layout.Alignment.ALIGN_CENTER, 1, 1, true);
    }
    @Override
    protected void onDraw(final Canvas canvas) {
        super.onDraw(canvas);
        ...
        ...
        canvas.translate(20, 20); //Translate if necessary
        //Draw the layout on the canvas, draws a doughnut as bright as the rest of the canvas!!
        lsLayout.draw(canvas);
        canvas.save();
        canvas.restore();
    }
}

Here is the result, the emojis are as bright as the rest of the drawing on the canvas:

Answer 2

The problem is your emoji character is outside the range of 0000 - FFFF so it can not be represented as a single unicode character.

It may be possible if you properly encode "unicode surrogate pairs" for the emoji.

There is a calculator for determining correct surrogate-pairs of mulitbyte unicode at: http://www.russellcottrell.com/greek/utilities/surrogatepaircalculator.htm