5

Trying to draw vehicle gauges in android using Paint and ondraw() using a opensource code. Gauges worked pretty well but had problems with android 4 and above. After that made a change to Paint object by setting setLinearText(true) which made things work. But now the text in the gauges have started overlapping and things look blurred as shown in the image. enter image description here

Below is the source code used to draw the gauges, texts and lines in the screen. Would need help to draw text which is not overlapping.

    private void initDrawingTools() {
    rimRect = new RectF(0.1f, 0.1f, 0.9f, 0.9f);

    // the linear gradient is a bit skewed for realism
    rimPaint = new Paint();
    rimPaint.setFlags(Paint.ANTI_ALIAS_FLAG);
    rimPaint.setShader(new LinearGradient(0.40f, 0.0f, 0.60f, 1.0f, 
                                       Color.rgb(0xf0, 0xf5, 0xf0),
                                       Color.rgb(0x30, 0x31, 0x30),
                                       Shader.TileMode.CLAMP));     

    rimCirclePaint = new Paint();
    rimCirclePaint.setAntiAlias(true);
    rimCirclePaint.setStyle(Paint.Style.STROKE);
    rimCirclePaint.setColor(Color.argb(0x4f, 0x33, 0x36, 0x33));
    rimCirclePaint.setStrokeWidth(0.005f);

    float rimSize = 0.02f;
    faceRect = new RectF();
    faceRect.set(rimRect.left + rimSize, rimRect.top + rimSize, 
             rimRect.right - rimSize, rimRect.bottom - rimSize);        

    faceTexture = BitmapFactory.decodeResource(getContext().getResources(), 
               R.drawable.plastic);
    BitmapShader paperShader = new BitmapShader(faceTexture, 
                                                Shader.TileMode.MIRROR, 
                                                Shader.TileMode.MIRROR);
    Matrix paperMatrix = new Matrix();
    facePaint = new Paint();
    facePaint.setFilterBitmap(true);
    paperMatrix.setScale(1.0f / faceTexture.getWidth(), 
                         1.0f / faceTexture.getHeight());
    paperShader.setLocalMatrix(paperMatrix);
    facePaint.setStyle(Paint.Style.FILL);
    facePaint.setShader(paperShader);

    rimShadowPaint = new Paint();
    rimShadowPaint.setShader(new RadialGradient(0.5f, 0.5f, faceRect.width() / 2.0f, 
               new int[] { 0x00000000, 0x00000500, 0x50000500 },
               new float[] { 0.96f, 0.96f, 0.99f },
               Shader.TileMode.MIRROR));
    rimShadowPaint.setStyle(Paint.Style.FILL);

    scalePaint = new Paint();
    scalePaint.setStyle(Paint.Style.STROKE);
    scalePaint.setColor(0x9f004d0f);
    scalePaint.setStrokeWidth(0.005f);
    scalePaint.setAntiAlias(true);


    float pixel= (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,
            1, getResources().getDisplayMetrics());
    scalePaint.setTextSize(0.045f);
    //scalePaint.setTextSize(pixel);
    scalePaint.setTypeface(Typeface.SANS_SERIF);
    scalePaint.setTextScaleX(1.0f);
    scalePaint.setTextAlign(Paint.Align.CENTER);    
    scalePaint.setLinearText(true);
    scalePaint.setFlags(Paint.LINEAR_TEXT_FLAG);


    float scalePosition = 0.10f;
    scaleRect = new RectF();
    scaleRect.set(faceRect.left + scalePosition, faceRect.top + scalePosition,
                  faceRect.right - scalePosition, faceRect.bottom - scalePosition);

    titlePaint = new Paint();
    titlePaint.setColor(0xaf946109);
    titlePaint.setAntiAlias(true);
    titlePaint.setTypeface(Typeface.DEFAULT_BOLD);
    titlePaint.setTextAlign(Paint.Align.CENTER);
    titlePaint.setTextSize(0.05f);
    titlePaint.setTextScaleX(0.8f);
    titlePaint.setLinearText(true);
    titlePaint.setFlags(Paint.LINEAR_TEXT_FLAG);

    titlePath = new Path();
    titlePath.addArc(new RectF(0.24f, 0.24f, 0.76f, 0.76f), -180.0f, -180.0f);

    paramPaint = new Paint();
    paramPaint.setColor(0xaf946109);
    paramPaint.setAntiAlias(true);
    paramPaint.setTypeface(Typeface.DEFAULT_BOLD);
    paramPaint.setTextAlign(Paint.Align.CENTER);
    paramPaint.setTextSize(0.05f);
    paramPaint.setTextScaleX(0.8f);
    paramPaint.setLinearText(true);
    paramPaint.setFlags(Paint.LINEAR_TEXT_FLAG);

    logoPaint = new Paint();
    logoPaint.setFilterBitmap(true);
    logo = BitmapFactory.decodeResource(getContext().getResources(), R.drawable.logo);
    logoMatrix = new Matrix();
    logoScale = (1.0f / logo.getWidth()) * 0.3f;
    logoMatrix.setScale(logoScale, logoScale);

    handPaint = new Paint();
    handPaint.setAntiAlias(true);
    handPaint.setColor(0xff392f2c);     
    handPaint.setShadowLayer(0.01f, -0.005f, -0.005f, 0x7f000000);
    handPaint.setStyle(Paint.Style.FILL);   

    handPath = new Path();
    handPath.moveTo(0.5f, 0.5f + 0.2f);
    handPath.lineTo(0.5f - 0.010f, 0.5f + 0.2f - 0.007f);
    handPath.lineTo(0.5f - 0.002f, 0.5f - 0.32f);
    handPath.lineTo(0.5f + 0.002f, 0.5f - 0.32f);
    handPath.lineTo(0.5f + 0.010f, 0.5f + 0.2f - 0.007f);
    handPath.lineTo(0.5f, 0.5f + 0.2f);
    handPath.addCircle(0.5f, 0.5f, 0.025f, Path.Direction.CW);

    handScrewPaint = new Paint();
    handScrewPaint.setAntiAlias(true);
    handScrewPaint.setColor(0xff493f3c);
    handScrewPaint.setStyle(Paint.Style.FILL);

    backgroundPaint = new Paint();
    backgroundPaint.setFilterBitmap(true);
}
GrIsHu
  • 29,068
  • 10
  • 64
  • 102
Madhu V Swamy
  • 263
  • 2
  • 14
  • Is this of use to you? https://code.google.com/p/android/issues/detail?id=39755 – Vrashabh Irde Feb 05 '15 at 06:25
  • Isn't the overlap caused because you set the horizontal width of the text `setTextScaleX(0.8f)`? Is there still overlap when you set this to `setTextScaleX(1f)`? – Jeroen Mols Feb 06 '15 at 06:56
  • please add full code for how you rendering it. Because with this information one can not able to render it. – Shreyash Mahajan Feb 10 '15 at 10:20
  • Hi - I think that your problem is related to setting textSize smaller than 1.0f. Check my answer on this question, maybe it will help you somehow: http://stackoverflow.com/questions/13974129/android-4-2-1-wrong-character-kerning-spacing/14836582#14836582 I would post the answer, but there is no point in duplicating answers ;) – scana Feb 10 '15 at 17:11

1 Answers1

0

This was asked long time back. I am writing what worked for me to resolve this issue.

paint.setTextScaleX(1.50f);
Rajeev Jayaswal
  • 1,423
  • 1
  • 20
  • 22