FORUMS

Ads Kit - Adding a Banner Ad

1,030 posts
Thanks Meter: 1,109
 
By XDARoni, XDA Community Manager on 2nd June 2020, 05:08 AM
Post Reply Email Thread
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:
Code:
<?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.
Code:
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.
Code:
...
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.
Code:
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.
Post Reply Subscribe to Thread

Guest Quick Reply (no urls or BBcode)
Message:
Previous Thread Next Thread
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes