how to get the below mentioned screen on all android devices?

Question

I am a beginner to libgdx android and I want to achieve the below screen in my game

---

---

And I wrote the following code

public class MyGdxGame implements ApplicationListener {

  private static final int VIRTUAL_WIDTH = 480;
  private static final int VIRTUAL_HEIGHT = 800;
  private static final float ASPECT_RATIO =(float)VIRTUAL_WIDTH/(float)VIRTUAL_HEIGHT;

  private Camera camera;
  private Rectangle viewport;
  private SpriteBatch sb;
  ShapeRenderer sp;

  @Override
  public void create()
  {
    sb = new SpriteBatch();
    camera = new OrthographicCamera(VIRTUAL_WIDTH, VIRTUAL_HEIGHT);
    sp=new ShapeRenderer();
  }

  @Override
  public void render()
  {        
    Gdx.gl.glClearColor(1, 1, 1, 1);
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

    // update camera
    camera.update();
    //   camera.apply(Gdx.gl10);

    // set viewport
    Gdx.gl.glViewport((int) viewport.x, (int) viewport.y, (int) viewport.width, (int) viewport.height);

    // clear previous frame
    Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);

    // DRAW EVERYTHING
    float sx=viewport.x;
    float sy=viewport.y;
    float ex=viewport.getWidth();
    float ey=viewport.getHeight();

    sp.begin(ShapeRenderer.ShapeType.Line);
    sp.setColor(Color.BLACK);
    sp.rect(sx,sy,ex,ey);
    sp.line(sx,sy,ex,ey);

    sp.line(1,1,480,800);
    sp.line(1,ey/2,ex-1,ey/2);
    sp.line(ex/2,1,ex/2,ey-1);
    sp.line(1,ey-1,ex-1,1);
    sp.circle(ex/2,ey/2,40);

    sp.end();
  }

  @Override
  public void dispose()
  {
    sp.dispose();
  }

  @Override
  public void resize(int width, int height)
  {
    // calculate new viewport
    float aspectRatio = (float)width/(float)height;
    float scale = 1f;
    Vector2 crop = new Vector2(0f, 0f);
    sb = new SpriteBatch();
    camera = new OrthographicCamera(VIRTUAL_WIDTH, VIRTUAL_HEIGHT);

    if(aspectRatio > ASPECT_RATIO)
    {
        scale = (float)height/(float)VIRTUAL_HEIGHT;
        crop.x = (width - VIRTUAL_WIDTH * scale) / 2f;
    }
    else if(aspectRatio < ASPECT_RATIO)
    {
        scale = (float)width/(float)VIRTUAL_WIDTH;
        crop.y = (height - VIRTUAL_HEIGHT*scale)/2f;
    }
    else
    {
        scale = (float)width/(float)VIRTUAL_WIDTH;
    }

    float w = (float)VIRTUAL_WIDTH*scale;
    float h = (float)VIRTUAL_HEIGHT*scale;
    viewport = new Rectangle(crop.x, crop.y, w, h);
  }

}

With the above code I got the actual screen in my device which is correctly fits in my device.

When I run this on some other devices, the lines and rects are unaligned. Like this

---

---

How to resolve this?

Answer 1

You can use in this way :

public class GdxTest extends ApplicationAdapter {

    OrthographicCamera camera;
    ShapeRenderer shapeRenderer;
    float screenOffset=10,circleRadius=30;

    @Override
    public void create() {

        camera=new OrthographicCamera();
        shapeRenderer=new ShapeRenderer();
        shapeRenderer.setAutoShapeType(true);
    }

    @Override
    public void render() {

        Gdx.gl.glClearColor(1,1,1,1);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

        shapeRenderer.setProjectionMatrix(camera.combined);

        shapeRenderer.begin();
        shapeRenderer.setColor(Color.BLACK);
        shapeRenderer.circle(camera.viewportWidth/2,camera.viewportHeight/2,circleRadius);
        shapeRenderer.rect(screenOffset,screenOffset,camera.viewportWidth-2*screenOffset,camera.viewportHeight-2*screenOffset);
        shapeRenderer.line(screenOffset,screenOffset,camera.viewportWidth-screenOffset,camera.viewportHeight-screenOffset);
        shapeRenderer.line(screenOffset,camera.viewportHeight-screenOffset,camera.viewportWidth-screenOffset,screenOffset);
        shapeRenderer.line(screenOffset,camera.viewportHeight/2,camera.viewportWidth-screenOffset,camera.viewportHeight/2);
        shapeRenderer.line(camera.viewportWidth/2,screenOffset,camera.viewportWidth/2,camera.viewportHeight-screenOffset);

        shapeRenderer.end();
    }

    @Override
    public void resize(int width, int height) {
        camera.setToOrtho(false,width,height);
        screenOffset=width<height?width*.04f:height*.04f;
        circleRadius=width<height?width*.075f:height*.075f;
    }

    @Override
    public void dispose() {
        shapeRenderer.dispose();
    }
}

And the output is :