title: How to set the width and height of Screen in Libgdx?
body: <p>Sorry, I can't describe my problem clearly. I re-describe it:</p>
  
  <ol>
  <li>I am making an android game with libgdx, and for now I finish a demo:</li>
  </ol>
  
  <p><img src="https://i.stack.imgur.com/ej8m3.jpg" alt="Demo"></p>
  
  <p>It has only one game view which is implemented by GameScreen class which is a subclass of Screen in libgdx:</p>
  
  <pre><code>public class LaohuGame extends Game {
  
  public static final int FRUIT_NUM = 24;
  public static final String WORK_DIR = "Desktop/assets/";
  
  @Override
  public void create() {
      GameScreen gameScreen = new GameScreen(this);
      setScreen(gameScreen);
  
  }
  
  public class GameScreen extends LaohuScreen {
  
  private final Stage stage;
  public static int START_X = 11;
  public static int START_Y = 199;
  
  public GameScreen(Game game) {
      super(game);
      stage = new Stage(GAME_WIDTH,GAME_HEIGHT,true);
      //add actors to the stage
  }
  
  public class LaohuScreen implements Screen{
  
  int GAME_WIDTH;
  int GAME_HEIGHT;
  protected Game game;
  public LaohuScreen(Game game) {
      this.game = game;
      GAME_WIDTH = Gdx.graphics.getWidth();
      GAME_HEIGHT = Gdx.graphics.getHeight();
  }
  </code></pre>
  
  <p>The GAME_WIDTH,GAME_HEIGHT is equal to the width,height of phone screen, so the game view fill the whole phone screen.</p>
  
  <ol start="2">
  <li>Now I go on developing my game. I wanna have 4 game view in my game. Each game view implemented by a subclass of <code>Screen</code> in libgdx. I think the completed game should look like this pic:</li>
  </ol>
  
  <p><img src="https://i.stack.imgur.com/ZAu5u.jpg" alt="Completed game"></p>
  
  <p>A button bar is added to the bottom of the phone screen. When I click one of the 4 buttons, the game view switched, but the button bar didn't switch. For example, if player clicks the "Rank" button, game set the view to Rank View(implemented by Rank screen) which shows players' scores, and the buttons still visible:</p>
  
  <p><img src="https://i.stack.imgur.com/pdaai.jpg" alt="After pressing rank button"></p>
  
  <ol start="3">
  <li><p>I can think of 2 ways to keep the button bar visible:</p>
  
  <ol>
  <li><p>Combine button bar and game view into a libgdx's Screen. I think it is a waste because I need to draw 4 buttons in every screen, totally 16 buttons in 4 Screens.</p></li>
  <li><p>Split phone screen into 2 areas; game view area and button bar area. Game view area implemented by libgdx's Screen and I can switch game view by setScreen method. The problem is that libgdx's Screen seems always fills the whole phone screen; I can't set the screen's width and height. I tried using <code>resize(int width, int height)</code> method to cut down the height of screen to leave a blank space for button bar, but it doesn't work.</p></li>
  </ol></li>
  </ol>
  
  <p>Code:</p>
  
  <pre><code>public class LaohuGame extends Game {
  
  public static final int FRUIT_NUM = 24;
  public static final String WORK_DIR = "Desktop/assets/";
  
  
  @Override
  public void create() {
      GameScreen gameScreen = new GameScreen(this);
      setScreen(gameScreen);
  
  }
  
  @Override
  public void setScreen(Screen screen) {
      super.setScreen(screen);
      this.getScreen().resize(Gdx.graphics.getWidth(), Gdx.graphics.getHeight() * 5 / 10);
  }
  
  @Override
  public void resize(int width, int height) {
      if (getScreen() != null) getScreen().resize(width, height * 5 / 10);
  }
  }
  </code></pre>
  
  <p>Any suggestions are appreciated.</p>