Drawing Canvas with fixed scale

Question

I have a button which is drawn using canvas onDraw method. The button itself may will change size depending on device, but I want the text I'm drawing inside to remain consistent, even with different screen size or font size user may have set in settings. That is why I'm doing it in pixels.

@Override
public void onDraw(Canvas canvas) {
    // 1. draw background
    paint.setStyle(Paint.Style.FILL);
    paint.setColor(colorBg);
    canvas.drawRect(padding, padding, w-padding, h-padding, paint);

    // 2. draw border
    paint.setStyle(Paint.Style.STROKE);
    paint.setColor(colorBorder);
    canvas.drawRect(padding, padding, w-padding, h-padding, paint);

    // 3. draw text
    int fontSizeTextNew = canvas.getHeight() / 100 * 19;
    int fontSizePaddingNew = canvas.getHeight() / 100 * 19;

    textPaint.setTextSize(fontSizeTextNew);
    textPaint.setShader(blackShader);
    textPaint.setTypeface(Typeface.DEFAULT);
    textPaint.getTextBounds(
            prefTitle, // text
            0, // start
            prefTitle.length(), // end
            rectangle // bounds
    );

    canvas.drawText(
            prefTitle,
            canvas.getWidth()/2,
            Math.abs(rectangle.height()) + padding + fontSizePaddingNew,
            textPaint
    );

    // 4. draw icon
    int fontSizeIconNew = canvas.getHeight() / 100 * 55;
    String str = prefIcon;
    textPaint.setTypeface(awesomeFont);
    textPaint.setTextSize(fontSizeIconNew);
    textPaint.setShader(yellowShader);
    // center for the text
    // https://stackoverflow.com/questions/11120392/android-center-text-on-canvas
    int yPos = (int) ((canvas.getHeight() / 2) - ((textPaint.descent() + textPaint.ascent()) / 2)) ;
    canvas.drawText(
            str,
            canvas.getWidth()/2,
            Math.abs(yPos) + fontSizeIconPadding,
            textPaint
    );
}

This 19% looks nice right now but it will look different on variouse screens. What is your approach to this problem? how you would solvethis problem?

Button1 This is how it may look

@ShayanD it will change based on settings. For example in Galaxy phones there is a option to adjust font size or screen size and it looks different — Akaki Gabisonia, Aug 26 '18 at 15:21
The user should be able to change the dimension of the display/content/font, so there isn't any direct way to do this. You can reuse YOUR code but you have to change HOW MANY pixels to draw and it should depend of display pixels size. So you have to compute the Real size of the display (in pixels) and then recompile your needed dimensions. — emandt, Aug 26 '18 at 17:20
@emandt I am going to provide those configurations in local settings. But I already have my button size. is not this enough? why would I care for external dimensions — Akaki Gabisonia, Aug 26 '18 at 23:20
or you can use `context.getDisplayMetrics().densityDpi/DisplayMetrics.DENSITY_DEFAULT` as a scale and multiply it to your font size — Shayan D, Aug 27 '18 at 08:51
@ShayanD can I please create chat with you? I have a major problem understanding this concept — Akaki Gabisonia, Aug 27 '18 at 21:30

Drawing Canvas with fixed scale

0 Answers0