Scale libgdx UI for mobile?

Question

At the moment desktop version of application is fine, the buttons are scaled quite nice but when I deploy to android they're tiny and barely usable.

DesktopLauncher ..

public class DesktopLauncher {
    public static void main (String[] arg) {
        LwjglApplicationConfiguration config = new LwjglApplicationConfiguration();
        config.title = "Color Catchin";
        config.width = 800;
        config.height = 480;
        new LwjglApplication(new ColorCatch(), config);
    }
}

AndroidLauncher ..

public class AndroidLauncher extends AndroidApplication {
    @Override
    protected void onCreate (Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        AndroidApplicationConfiguration config = new AndroidApplicationConfiguration();
        config.useAccelerometer = false;
        config.useCompass = false;
        initialize(new ColorCatch(), config);
    }
}

Core code ..

public class MainMenu implements Screen {

    Skin skin = new Skin(Gdx.files.internal("ui/uiskin.json"));
    Stage stage = new Stage();

    final private ColorCatch game;

    public MainMenu(final ColorCatch gam) {

        game = gam;

        Gdx.input.setInputProcessor(stage);

        Table table = new Table();
        table.setFillParent(true);
        stage.addActor(table);

        final TextButton play = new TextButton("Play", skin);
        final TextButton quit = new TextButton("Quit", skin);
        table.add(play).pad(10);
        table.row();
        table.add(quit).pad(10);

        play.addListener(new ChangeListener() {
            public void changed(ChangeEvent event, Actor actor) {
                game.setScreen(new GameScreen(game));
                dispose();
            }
        });
    }

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

        stage.act(delta);
        stage.draw();
    }

    @Override
    public void resize(int width, int height) {
        stage.getViewport().update(width, height, true);
    }
}

desktop ..

android ..

Answer 1

By default Stage will have a ScalingViewport set to Scaling.stretch with a virtual viewport size of Gdx.graphics.getWidth() x Gdx.graphics.getHeight (see here).

On Desktop you will start with a size of 800x480, because that's what you told your launcher. On Android, this is dynamic and depends on the device. On your device it might be 1920x1080.

Since you do not change your button sizes, they will have the same size on both devices in terms of pixels. because of the totally different screen density though, on Android the buttons will appear to be much smaller.

The easiest solution to get both to the same level would be to use a Viewport with a fixed virtual size. For example a new FitViewport(800, 480). You can supply that viewport to the stage via new Stage(viewport).

However, scaling up or down depending on the screens size to keep the aspect ratio and the virtual resolution is usually not a good idea for UIs. It might be better to use a ScreenViewport instead and set your actors' sizes relative to each other. You can use Value.percentWidth(0.5f, rootTable) for example, to set the width of a widget to 50% of the root table, that takes the whole screen (via setFillParent(true)).