javaandroidandroid-canvasandroid-paintstaticlayout

Paint attributes do not work when applied twice

I am trying to create a custom impact font with white color and black outline (aka the "meme font"). I have 2 texts on both ends of the canvas but only one of them reflect the changes. This is so far what I have:

enter image description here

This is my code:

        Canvas canvas = new Canvas(mutableBitmap);

        TextPaint topFillPaint = new TextPaint();
        TextPaint bottomFillPaint = new TextPaint();

        TextPaint topStrokePaint = new TextPaint();
        TextPaint bottomStrokePaint = new TextPaint();

        Typeface typeface = getResources().getFont(R.font.impact);

        topFillPaint.setColor(Color.WHITE);
        topFillPaint.setTextSize(topTextView.getTextSize());
        topFillPaint.setTypeface(typeface);

        topStrokePaint.setStyle(Paint.Style.STROKE);
        topStrokePaint.setStrokeWidth(8);
        topStrokePaint.setColor(Color.BLACK);
        topStrokePaint.setTextSize(topTextView.getTextSize());
        topStrokePaint.setTypeface(typeface);

        bottomFillPaint.setColor(Color.WHITE);
        bottomFillPaint.setTextSize(bottomTextView.getTextSize());
        bottomFillPaint.setTypeface(typeface);

        bottomStrokePaint.setStyle(Paint.Style.STROKE);
        bottomStrokePaint.setStrokeWidth(8);
        bottomStrokePaint.setColor(Color.BLACK);
        bottomStrokePaint.setTextSize(bottomTextView.getTextSize());
        bottomStrokePaint.setTypeface(typeface);

        float topTextMeasurement = topFillPaint.measureText(topText);
        float bottomTextMeasurement = bottomFillPaint.measureText(bottomText);

        StaticLayout topFillLayout = new StaticLayout(topText, topFillPaint, canvas.getWidth(), Layout.Alignment.ALIGN_CENTER,
                1.0f, 0.0f, false);
        StaticLayout topStrokeLayout = new StaticLayout(topText, topStrokePaint, canvas.getWidth(), Layout.Alignment.ALIGN_CENTER,
                1.0f, 0.0f, false);


        StaticLayout bottomFillLayout = new StaticLayout(bottomText, bottomFillPaint, canvas.getWidth(), Layout.Alignment.ALIGN_CENTER,
                1.0f, 0.0f, false);
        StaticLayout bottomStrokeLayout = new StaticLayout(bottomText, bottomStrokePaint, canvas.getWidth(), Layout.Alignment.ALIGN_CENTER,
                1.0f, 0.0f, false);

        canvas.translate(0,0);
        topFillLayout.draw(canvas);

        canvas.translate(0,0);
        topStrokeLayout.draw(canvas);

        canvas.translate(0, canvas.getHeight() - 210);
        bottomFillLayout.draw(canvas);

        canvas.translate(0, canvas.getHeigth() - 210);
        bottomStrokeLayout.draw(canvas);
Solution

  • There is differences in coordinates you are passing to draw bottomStrokeLayout and bottomFillLayout.

     canvas.translate(0, canvas.getHeight() - 210);
 bottomFillLayout.draw(canvas);

canvas.translate(0,canvas.getHeight() -210);
bottomStrokeLayout.draw(canvas);