CODEWITHSUNDEEP
androidcanvastextdrawingstretching
Fahim Shykh
Fahim Shykh

Reputation: 11

Text Stretching issue around path on canvas on different android testing devices

I am drawing text around an Oval Path on canvas. Not stretching on my Infinix and Samsung S9(API 28) devices but not have the same behavior on these both for example M alphabet is attached with a different point with arc but not stretching. But on other Mi and Samsung devices, it is stretching the text around the arc. I didn't get the reason for this issue. You may see the screenshots of the screens below.

Image 1

Image 2

Image 3

Image 4

Layout:

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/frame"
    android:layout_centerHorizontal="true">
        <ImageView
            android:id="@+id/iv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />
</FrameLayout>
<EditText
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="30dp"
    android:text="Testing Device"
    android:id="@+id/t1"
    android:layout_below="@id/frame"/>
<EditText
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="30dp"
    android:text="Samsung SM-N920C(Android 7.0 API 24)"
    android:layout_below="@id/t1"/>

Activity:

public class MainActivity extends AppCompatActivity {
    ImageView mImageView;
    Canvas canvas;
    RectF oval;
    Bitmap bitmap;
    Path path;
    Paint paint;

    Paint paint_for_curve;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mImageView = (ImageView)findViewById(R.id.iv);

        path = new Path();

        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setTextSize(80);
        paint.setColor(Color.BLACK);
        paint.setUnderlineText(true);

        if (paint.isUnderlineText()) {
            Toast.makeText(this, "Underline Text", Toast.LENGTH_SHORT).show();
        }
        paint_for_curve = new Paint();
        paint_for_curve.setColor(Color.RED);

        bitmap = Bitmap.createBitmap(
                (int)700, // Width
                (int)700, // Height
                Bitmap.Config.ARGB_8888); // Config
        canvas = new Canvas(bitmap);
        canvas.drawColor(Color.WHITE);
        oval = new RectF(265,265,400,400);

        path.addArc(oval,180,359);

        canvas.drawTextOnPath("Hello World",path,20,-10,paint);

        canvas.drawPath(path,paint_for_curve);
        mImageView.setImageBitmap(bitmap);
    }
}

No Error Messages, I want the same behavior for all devices

Upvotes: 1

Views: 298

Answers (1)

Rehman Murad Ali
Rehman Murad Ali

Reputation: 135

You are using hardcoded values for drawing. Usually, we have to convert pixels (which is device-dependent) to Density Pixels(which is an independent ratio). Use this function to convert all hardcoded pixels to DP(density pixels).

private float dpToPx(final float value) {
     return value * getContext().getResources().getDisplayMetrics().density;
}

Moreover, I have created a timer widget with canvas. You can take reference from here:

https://github.com/rehmanmuradali/ticker

Custom View file:

https://github.com/rehmanmuradali/ticker/blob/master/ticker/src/main/java/ticker/views/com/ticker/widgets/circular/timer/view/CircularView.java

Upvotes: 2

Related Questions