1
\$\begingroup\$

I'm trying to get my android application to look the same on all screen devices. I assume I have to do something regarding the density, I just can't figure it out. And while I have seen very similar questions to this I'm not getting clear answers or I'm just not understanding things resulting in inconsistent results.

So how do I get, for example, my game to look exactly the same on a Samsung Galaxy 7 as on an LG tablet?

Side note: I have looked into scaling the Canvas but can't quite figure out how to do this correctly.

Example

package com.haas.ryan.example;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.view.SurfaceHolder;
import android.view.SurfaceView;

/**
 * Created by Ryan on 8/4/2017.
 */

public class Drawing extends SurfaceView implements SurfaceHolder.Callback {
    private Rect rect;

    public Drawing(Context context) {
        super(context);
        getHolder().addCallback(this);
        rect = new Rect(100, 100, 500, 500);
    }

    public void surfaceCreated(SurfaceHolder sh) {
        Canvas canvas = sh.lockCanvas();
        draw(canvas);
        sh.unlockCanvasAndPost(canvas);
    }

    public void surfaceDestroyed(SurfaceHolder sh) {}
    public void surfaceChanged(SurfaceHolder sh, int format, int w, int h) {}

    public void draw(Canvas canvas) {
        super.draw(canvas);
        System.out.println("call");
        Paint p = new Paint();
        p.setColor(Color.RED);

        canvas.drawRect(rect, p);
        invalidate();
    }
}

Device 1 Screenshot

enter image description here

Device 2 Screenshot

enter image description here

While it's a lot harder to tell on the emulator (my bad I chose 2 phones, should'be chosen a tablet) you can see that the rectangles don't take up the same amount of relative space. In fact on the larger screen the rectangle is actually smaller.

\$\endgroup\$
2
  • \$\begingroup\$ It will be easier to diagnose the root cause of any differences in appearance you're seeing if you show us what those differences are. See if you can set up a minimal example app that demonstrates the differences you're seeing, and share the screenshots showing the differences along with the relevant code, so users here can help you debug it. \$\endgroup\$ Commented Aug 4, 2017 at 4:55
  • \$\begingroup\$ @DMGregory done \$\endgroup\$ Commented Aug 4, 2017 at 5:17

1 Answer 1

Reset to default
-1
\$\begingroup\$

The problem that you are facing comes from different densities of different devices. When you use this constructor rect = new Rect(100, 100, 500, 500); you give these values as pixels. And the device which has larger number of pixels in its screen, will display the same shape with smaller size. For example:

Imagine you have two devices with the width of;

  • 1000 pixels
  • 4000 pixels

When you display a line which has a length of 500 pixels, it will cover;

  • The half of the first device's width

  • The 1/8 of the second device's width.

And users will see different length of lines. You need to calculate the pixels that you give the Rect's constructor accordingly to the density of the device. And here is a way you can do this:

int discreteHeight = 500;
int discreteWidth = 400;
float scale = getResources().getDisplayMetrics().density; //This scale value is proportional to device, and it will handle your problem.

int heightInPixels = discreteHeight * scale;
int widthInPixels = discreteWidth * scale;

rect = new Rect(100, 100, 100 + discreteWidth, 100 + discreteHeight);

Note that you also need to calculate coordinates with the scale value inorder place the shape to the same position in all different devices. This code is just for you to get the idea.

Hope it helps!

\$\endgroup\$
2
  • \$\begingroup\$ This still doesn't seem to quite work. When accounting for both the coordinates and dimensions, things still don't quite work. For example, on the Nexus 5 emulator the rectangle doesn't quite fill the width of the screen. However on the Nexus 6P emulator the rectangle clearly goes off of the screen. That's why my initial thought was to try and scale the canvas to the size of the screen but I'm not quite sure how to do that or if it would work. \$\endgroup\$ Commented Aug 4, 2017 at 7:58
  • \$\begingroup\$ You are miscalculating some values I guess, maybe it would be better for you to debug the following values on both devices for checking your code is working as intended: -Width and Height of the screen, -Scaled width and height of the rectangle, -Check whether the ratio's are equal. \$\endgroup\$ Commented Aug 4, 2017 at 11:30

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.