Aspect ratio and viewport with Android : Need an explication

Question

first I know that is subject that already have many topics but I still don't understand anything.

I'm trying to make games for Android (downloadable on Play Store) but I have a single problem that stop me everytime, how can can I make a game that can be played on every phones with the same aspect ratio ?

For exemple : I want to make a game where some object fall from the top of the screen randomly on the caractere of the player.

How can I print a background image, a player image and a falling object image that as the same aspect on every phones ?

First I want to print the bakcground image Here is what I currently have :

public class MyAwesomeGame extends Game {
    public SpriteBatch batch;

    @Override
    public void create () {
        batch = new SpriteBatch();
        setScreen(new MenuScreen(this));
    }

    @Override
    public void render () {
        super.render();
    }

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

And :

public class MenuScreen implements Screen {

    private MyAwesomeGame game;

    public MenuScreen(MyAwesomeGame game){
        this.game = game;
    }

    @Override
    public void show() {}

    @Override
    public void render(float delta) {
        Gdx.gl.glClearColor(1, 0, 0, 1);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
        game.batch.begin();
        game.batch.end();
    }

    @Override
    public void resize(int width, int height) {}

    @Override
    public void pause() {}

    @Override
    public void resume() {}

    @Override
    public void hide() {}

    @Override
    public void dispose() {}
}

Please can someone explain to me what I should do or give me some codes ?

Answer 1

The viewport is actually what you need. If you want the image with the same aspect ratio for every device you could use StretchViewport this will automatically scale down/up your image based on the device aspect ratio but it will lower the image quality.

If you don't want your image quality to be ruined use the FillViewport it also keeps the aspect ratio of the virtual screen size, but in contrast to FitViewport, it will always fill the whole screen which might result in parts of the viewport being cut off.

If you want your background image to take up the whole screen then do something like these:

int width =  Gdx.graphics.getWidth(); \\ get the width of the device
int height = Gdx.graphics.getHeight(); \\ get the height of the device

Texture backgroundImage = new Texture(pathName);
Image image = new Image(backgroundImage);
image.setSize(width,height);  \\ background image will fill up your whole screen

Image player = new Image(new Texture(pathname)); \\ it's the same as what we did above

Stage stage = new Stage(new StretchViewport(width,height));
stage.addActor(player);  \\ add your player and background image to stage
stage.addActor(image);

Click this link for more information about Stage The two parameter in StretchViewport will stretch the width and height base on the aspect ratio of the device.

Now on your render method update and render your image.

   @Override
   public void render(float delta) {
     Gdx.gl.glClearColor(1, 0, 0, 1);
     Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
     stage.act();
     stage.draw();
}

I hope this help!