[Huawei Developers] XDARoni:
Banner ads are rectangular images that occupy a spot at the top, middle, or bottom within an app's layout. Banner ads refresh automatically at regular intervals. When a user taps a banner ad, the user is redirected to the advertiser's page in most cases.

1. Adding a Banner Ad

Step 1: Adding BannerView

Add BannerView using either of the following methods to display banner ads:

Editing the XML layout file

Add BannerView to the XML layout file, and set the hwads:adId and hwads:bannerSize attributes to the ad slot ID and ad size respectively.

The following sample code shows how to add BannerView to an XML layout file:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:hwads="http://schemas.android.com/apk/res-auto"
...
<com.huawei.hms.ads.banner.BannerView
android:id="@+id/hw_banner_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
hwads:adId="testw6vs28auh3"
hwads:bannerSize="BANNER_SIZE_320_50"/>
</RelativeLayout>

The following sample code shows how to obtain BannerView:

BannerView bannerView=findViewById(R.id.hw_banner_view);

Coding

Add BannerView to the code, and set the ad slot ID and ad size.

BannerView bannerView = new BannerView(this);
// "testw6vs28auh3" is a dedicated test ad slot ID.
bannerView.setAdId("testw6vs28auh3");
bannerView.setBannerAdSize(BannerAdSize.BANNER_SIZE_320_50);
FrameLayout adFrameLayout = findViewById(R.id.ad_frame);
adFrameLayout.addView(bannerView);

Step 2: Loading an Ad

After adding BannerView, load an ad using the loadAd() method in the BannerView class.

...
import com.huawei.hms.ads.AdParam;
import com.huawei.hms.ads.BannerAdSize;
import com.huawei.hms.ads.banner.BannerView;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Obtain BannerView.
BannerView bannerView = findViewById(R.id.hw_banner_view);
// Set the ad slot ID and ad size,"testw6vs28auh3" is a dedicated test ad slot ID.
bannerView.setAdId("testw6vs28auh3");
bannerView.setBannerAdSize(BannerAdSize.BANNER_SIZE_320_50);
// Create an ad request to load an ad.
AdParam adParam = new AdParam.Builder().build();
bannerView.loadAd(adParam);
}
}

(Optional) Step 3: Listening for Ad Events

You can listen for ad events using the methods in the AdListener class.

bannerView.setAdListener(adListener);
private AdListener adListener = new AdListener() {
@Override
public void onAdLoaded() {
// Called when an ad is loaded successfully.
}
@Override
public void onAdFailed(int errorCode) {
// Called when an ad fails to be loaded.
}
@Override
public void onAdOpened() {
// Called when an ad is opened.
}
@Override
public void onAdClicked() {
// Called when a user taps an ad.
}
@Override
public void onAdLeave() {
// Called when a user has left the app.
}
@Override
public void onAdClosed() {
// Called when an ad is closed.
}
};

For details about the methods, please refer to AdListener in the API Reference.

2. Ad Sizes

The following table lists the sizes of standard banner ads applicable to phones.

3. Smart Banner

Smart banner ads are displayed in the same width as screens in any size and orientation on devices. When loading an ad, the HUAWEI Ads SDK creates an ad view in the same width as the screen according to its orientation on the device. The ad height is determined by the height of the screen in this orientation.

The following table lists the smart banner ad heights supported by different screen widths.

On a mobile phone, the height of a smart banner ad is 50 dp when the screen is in portrait mode, and 32 dp in landscape mode. On a tablet, the height of a smart banner ad is usually 90 dp, regardless of whether the screen is in portrait or landscape mode.

When an ad image is insufficient to occupy the allocated screen space, the system places the image in the middle and fills the remaining space on both left and right sides.

When using a smart banner ad, specify the ad size by BANNER_SIZE_SMART and the width by match_parent. In addition, you need to specify the ad height by wrap_content because the height may vary on different devices.

Caution:

Smart banner ads are not supported in the Chinese mainland, and users may not receive it.

4. Testing a Banner Ad

When testing banner ads, use the dedicated test ad slot ID to obtain test ads. This avoids invalid ad clicks during the test. The test ad slot ID is used only for function commissioning. Before releasing your app, apply for a formal ad slot ID and replace the test ad slot ID with the formal one.

The following table lists the dedicated ad slot ID for banner ad testing.

You can download the sample code for banner ads and execute the code. The following screen will be displayed.