title: How to construct Split screen in libgdx? One for 2d animation and One for Information panel
body: <p>I am trying to construct a layout like this picture:
  <img src="https://i.stack.imgur.com/et6sH.jpg" alt="enter image description here"></p>
  
  <p>Should I use two stages?, two cameras?, one stage with splitPane?
   I want the top screen to be half of the entire devices height. The top screen will have animated actors and a single background image with some labels close to the top of the screen.</p>
  
  <p>The lower screen should be a Scrollpane with information and at the bottom ,the menu and back buttons.</p>
  
  <p>How do I secure the ratio between them if the screen resizes? </p>
  
  <p>Edit 2014-03-28:</p>
  
  <p>Hi!</p>
  
  <p>I tried using two stages as proposed and I am pretty happy. Thought I share my first try at it. The result was this code:</p>
  
  <pre><code>package se.appltini.mygdxtest;
  
  //imports omitted
  
  public class DualStageTutorial extends ScreenAdapter {
  
  private Stage upperStage;
  private Stage bottomStage;  
  private Skin skin,menuSkin; 
  
  @Override
  public void show() {        
      upperStage = new Stage();
      bottomStage = new Stage();
      skin = new Skin(Gdx.files.internal("uiskin/uiskin.json"));      
      menuSkin = new Skin(Gdx.files.internal("menuSkin/uiSkin.json"),new TextureAtlas(Gdx.files.internal("menuSkin/uiskin.atlas")));
  
      Image upperImage = new Image(menuSkin.getPatch("menuTexture"));
      upperImage.setFillParent(true);
      upperStage.addActor(upperImage);
  
      Image bottomImage = new Image(menuSkin.getPatch("menuTexture"));
      bottomImage.setFillParent(true);
              //setting alpha to 0.5f so we can see the different stages 
      bottomImage.setColor(1f, 1f, 1f, 0.5f);
      bottomStage.addActor(bottomImage);
  
  }
  
  
  
  @Override
  public void resize(int width, int height) {
  
  }
  
  @Override
  public void render(float delta) {
      Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT | GL20.GL_DEPTH_BUFFER_BIT);        
  
      upperStage.act(delta);  
      bottomStage.act(delta);         
  
      /*Upper Half*/          
      //set the openGl viewport to half the screenheight and starting y from the     middle of the screen
      Gdx.gl.glViewport(0,Gdx.graphics.getHeight()/2,Gdx.graphics.getWidth(),Gdx.graphics.getHeight()/2);      
      upperStage.draw();   
  
      /*bottom Half*/     
      //set the openGl viewport to half the screenheight and starting y from the     bottom of the screen
      Gdx.gl.glViewport(0,0,Gdx.graphics.getWidth(),Gdx.graphics.getHeight()/2);    
      bottomStage.draw();
  
  }
  
  @Override
  public void hide() {
      dispose();
  }
  
  @Override
  public void dispose() {
      upperStage.dispose();
              bottomStage.dispose();
      skin.dispose();
              menuSkin.dispose();
  
  
  }
  </code></pre>
  
  <p>}</p>