How to separate ads View from Game View?

Question

Currently I have a game in libgdx that show ads on top of the game layout. However, as you can notice, it hides part of the top of the screen, where the score is shown.

Question: How can I make the ads show ABOVE the game view/screen, so it doesnt overlap/hides anything from the game? I want the screens to be as shown in the next picture.

Current code:

import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.RelativeLayout;

import com.badlogic.gdx.backends.android.AndroidApplication;
import com.badlogic.gdx.backends.android.AndroidApplicationConfiguration;


import de.golfgl.gdxgamesvcs.GpgsClient;
import com.google.android.gms.ads.AdRequest;
import com.google.android.gms.ads.AdSize;
import com.google.android.gms.ads.AdView;


public class AndroidLauncher extends AndroidApplication {

    private RelativeLayout layout;
    private RelativeLayout.LayoutParams params;
    private AdView bannerAd;

    @Override
    protected void onCreate (Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        AndroidApplicationConfiguration config = new AndroidApplicationConfiguration();
        //

        GpgsClient gpgsClient = new GpgsClient();
        gpgsClient.initialize(this, false);

        SpaceEscape game = new SpaceEscape(gpgsClient);
        //
        //initialize(game, config);

        View gameView = initializeForView(game,config);

        ////////// Define the layout
        layout = new RelativeLayout(this);
        layout.addView(gameView, ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT);

        params = new RelativeLayout.LayoutParams(
                ViewGroup.LayoutParams.WRAP_CONTENT,
                ViewGroup.LayoutParams.WRAP_CONTENT);

        params.addRule(RelativeLayout.ALIGN_PARENT_TOP);
        params.addRule(RelativeLayout.CENTER_IN_PARENT);

        bannerAd = new AdView(this);
        bannerAd.setAdUnitId("REDACTED");
        bannerAd.setAdSize(AdSize.BANNER);

        layout.addView(bannerAd, params);
        setContentView(layout);

        AdRequest ad = new AdRequest.Builder().build();
        bannerAd.loadAd(ad);

    }
}

Answer 1

To avoid this overlapping effect using a RelativeLayout you can create an Ad Container (eg: a RelativeLayout Container) to be on the top of the screen by using the RelativeLayout.ALIGN_PARENT_TOP rule and add the GameView below of the Ad Container using the RelativeLayout.BELOW rule. Finally add your AdView as a child of the above Ad Container.

Below is an example of how you can do the above structure:

//define the layout
layout = new RelativeLayout(this);

//adView Container RelativeLayout
RelativeLayout adContainerRL = new RelativeLayout(this);
adContainerRL.setBackgroundColor(Color.BLACK);
adContainerRL.setId(ViewCompat.generateViewId());
RelativeLayout.LayoutParams adContainerParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
adContainerParams.addRule(RelativeLayout.ALIGN_PARENT_TOP);
layout.addView(adContainerRL, adContainerParams);

//adView
AdView bannerAd = new AdView(this);
bannerAd.setAdUnitId("ca-app-pub-3940256099942544/6300978111"); //this is a test ad unit id
bannerAd.setAdSize(AdSize.BANNER);
RelativeLayout.LayoutParams adViewParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
adViewParams.addRule(RelativeLayout.ALIGN_PARENT_TOP);
adViewParams.addRule(RelativeLayout.CENTER_IN_PARENT);
adContainerRL.addView(bannerAd, adViewParams);

//gameView
View gameView = initializeForView(game, config);
RelativeLayout.LayoutParams gameViewParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
gameViewParams.addRule(RelativeLayout.BELOW, adContainerRL.getId());
layout.addView(gameView, gameViewParams);

//set the layout
setContentView(layout);

//load ad
AdRequest ad = new AdRequest.Builder().build();
bannerAd.loadAd(ad);