Native Integration

Native Ads Integration for Android

Native ads let you easily monetize your app in a way that’s consistent with its existing design.

Prerequisites

Before integrating native ads in your app, you’ll need to go through the steps in our Getting Started Guide to integrate the SDK into your project.

if you mediation others ads (facebook、yahoo、mopub、admob)，you’ll need to go through the steps in our[Pegasi mediation others ads](https://github.com/CMAdSDK/android_sdk/wiki/Pegasi mediation others ads)

#Sample code And obtain Native Ads Steps

obtain sample code:

For a complete example, check out the pegasi-sample.

obtain Native Ads Steps:

1.Create NativeAdManager and set posid or INativeAdLoaderListener

2.Load Native Ad

3.Custom a layout for display Native Ad

4.Add the NativeAd View to the nativeAdContainer and display Native Ad

#Load Native ads in your app ###Check your AndroidManifest.xml file Be sure you have the following permissions:

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />

**Note:**The INTERNET permission is required which is used to access the internet to get ad. The ACCESS_NETWORK_STATE or ACCESS_WIFI_STATE permission are optional which used for checking whether there is avaible Internet connection(suggest configure them).

if you integrated Mopub or Admob ads , Please declare the following activities:

<!--for Mopub -->
 <activity android:name="com.mopub.mobileads.MoPubActivity"
        android:configChanges="keyboardHidden|orientation|screenSize"/>
 <activity android:name="com.mopub.mobileads.MraidActivity"
        android:configChanges="keyboardHidden|orientation|screenSize"/>
 <activity android:name="com.mopub.common.MoPubBrowser"
        android:configChanges="keyboardHidden|orientation|screenSize"/>
 <activity android:name="com.mopub.mobileads.MraidVideoPlayerActivity"
        android:configChanges="keyboardHidden|orientation|screenSize"/>
<!--for Mopub-->

Add this tag to your to use Google Play Services:

<meta-data android:name="com.google.android.gms.version"
        android:value="@integer/google_play_services_version" />

Important Note: If compiling against API Level below 13, exclude screenSize from the manifest entries. ###1.Create NativeAdManager and set posid or INativeAdLoaderListener

		//setp1 : create nativeAdManager
        //The first parameter：Context
        //The second parameter: posid
        nativeAdManager = new NativeAdManager(this, mAdPosid);

        //setp2 : set callback listener(INativeAdLoaderListener)
        nativeAdManager.setNativeAdListener(new INativeAdLoaderListener() {
            @Override
            public void adLoaded() {
              //load success
            }

            @Override
            public void adFailedToLoad(int i) {
              //load failed
            }

            @Override
            public void adClicked(INativeAd iNativeAd) {
               //ad click
            }
        });

###2.Load Native Ad

  nativeAdManager.loadAd();

###3.Custom a layout for display Native Ad custom a layout for Native ad ,see native_ad_layout.xml from the pegasi-sample for a full example.

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:background="@drawable/ad_border"
    android:layout_height="wrap_content" >
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:padding="10dp" >
             <ImageView
                 android:id="@+id/big_iv_icon"
                ...
                />
            <TextView
                android:id="@+id/big_main_title"
                ...
                />

            <TextView
                android:id="@+id/big_sub_title"
                ...
                />

            <Button
                android:id="@+id/big_btn_install"
                ...
                />
    </RelativeLayout>
</LinearLayout>
// If you want to display the three pictures advertising , you need to add a layout file as below: 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:background="@drawable/ad_border"
    android:layout_height="wrap_content" >
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <ImageView
            android:id="@+id/iv_pic1"
           ...
            />

        <ImageView
            android:id="@+id/iv_pic2"
           ...
            />

        <ImageView
            android:id="@+id/iv_pic3"
           ...
            />
    </LinearLayout>

</LinearLayout> 

Init native ad data for layout,see OrionNativeAdview.java from the pegasi-sample for a full example.

            //step1: Your Ad layout
			/Filling not connected to three graphics style ads
            mNativeAdView = View.inflate(mContext, R.layout.native_ad_layout, this);
            //get image url
            String mainImageUrl = ad.getAdCoverImageUrl();
            if (!TextUtils.isEmpty(mainImageUrl)) {
                ImageView imageViewMain = (ImageView) mNativeAdView
                        .findViewById(R.id.iv_main);
                imageViewMain.setVisibility(View.VISIBLE);
                VolleyUtil.loadImage(imageViewMain, mainImageUrl);
            }

			//Access Triple Image ads filling style
			if(ad.getAdTypeName().equals(Const.KEY_CM) && ((Ad)ad.getAdObject()).getAppShowType() == Ad.SHOW_TYPE_NEWS_THREE_PIC){
                mNativeAdView = View.inflate(mContext,R.layout.native_ad_three_pics,this);
				//获取三图的广告图片uri
                List<String> pics = ad.getExtPics();
                ImageView img1 = (ImageView)mNativeAdView.findViewById(R.id.iv_pic1);
                ImageView img2 =(ImageView)mNativeAdView.findViewById(R.id.iv_pic2);
                ImageView img3 = (ImageView)mNativeAdView.findViewById(R.id.iv_pic3);
                List<ImageView> imgList = new ArrayList<ImageView>();
                imgList.add(img1);
                imgList.add(img2);
                imgList.add(img3);
                if(!pics.isEmpty()) {
                    for (int i = 0; i < imgList.size(); i++) {
                        VolleyUtil.loadImage(imgList.get(i), pics.get(i));
                    }
                }
            }else{
			 mNativeAdView = View.inflate(mContext, R.layout.native_ad_layout, this);
            //get image url
            String mainImageUrl = ad.getAdCoverImageUrl();
            if (!TextUtils.isEmpty(mainImageUrl)) {
                ImageView imageViewMain = (ImageView) mNativeAdView
                        .findViewById(R.id.iv_main);
                imageViewMain.setVisibility(View.VISIBLE);
                VolleyUtil.loadImage(imageViewMain, mainImageUrl);
           		 }
			}


			//get image iconUri
			String iconUrl = ad.getAdIconUrl();
            ImageView iconImageView = (ImageView) mNativeAdView
                    .findViewById(R.id.big_iv_icon);
            if (iconUrl != null) {
                VolleyUtil.loadImage(iconImageView, iconUrl);
            }
            //fill ad data
            TextView titleTextView = (TextView) mNativeAdView.findViewById(R.id.big_main_title);
            TextView subtitleTextView = (TextView) mNativeAdView.findViewById(R.id.big_sub_title);
            Button bigButton = (Button) mNativeAdView.findViewById(R.id.big_btn_install);
            TextView bodyTextView = (TextView) mNativeAdView.findViewById(R.id.text_body);
            titleTextView.setText(ad.getAdTitle());
            subtitleTextView.setText(ad.getAdSocialContext());
            bigButton.setText(ad.getAdCallToAction());
            bodyTextView.setText(ad.getAdBody());

        if (mNativeAd != null) {
            mNativeAd.unregisterView();
        }

        mNativeAd = ad;
        // step2: register view for ad
        mNativeAd.registerViewForInteraction(mNativeAdView);

Note: you have to bind(registerView) the ad with the mAdView,this step is necessary，if don't , click of the ad will not effective.

 // step2: register view for ad
 mNativeAd.registerViewForInteraction(mNativeAdView);

**notice:**unregisterView should be used when the ad no need to show.

 // unregister view for ad
 mNativeAd.unregisterView();

Importance Note: If integrated the Admob ,you will provide two other layout for the Admob Ads .you can see admob_native_ad_layout_install.xml and admob_native_ad_layout_context.xml from the pegasi-sample for a full example. For example : admob_native_ad_layout_install.xml

<com.google.android.gms.ads.formats.NativeAppInstallAdView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <LinearLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:orientation="vertical"
            android:background="@drawable/ad_border"
            android:layout_height="wrap_content" >

            <ImageView
                 android:id="@+id/big_iv_icon"
                ...
                />
            <TextView
                android:id="@+id/big_main_title"
                ...
                />

            <TextView
                android:id="@+id/big_sub_title"
                ...
                />

            <Button
                android:id="@+id/big_btn_install"
                ...
                />
        </LinearLayout>
    </com.google.android.gms.ads.formats.NativeAppInstallAdView>

admob_native_ad_layout_context.xml

 <com.google.android.gms.ads.formats.NativeContentAdView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
        <LinearLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:orientation="vertical"
            android:background="@drawable/ad_border"
            android:layout_height="wrap_content" >

            <ImageView
                 android:id="@+id/big_iv_icon"
                ...
                />
            <TextView
                android:id="@+id/big_main_title"
                ...
                />

            <TextView
                android:id="@+id/big_sub_title"
                ...
                />

            <Button
                android:id="@+id/big_btn_install"
                ...
                />
        </LinearLayout>
    </com.google.android.gms.ads.formats.NativeContentAdView>

In addition to ,you need to bind view(see demo) :

 //step1: Your Ad layout
        // if integrate Admob Ad , you need notice :
        // Admob Ad layout  need  the root of the layout which provide by Admob Ad
        // if isDownLoadApp is true(direct download app) , use Layout Resource :R.layout.admob_native_ad_layout_install
        if (ad.getAdTypeName().equals(Const.KEY_AB) && ad.isDownLoadApp()) {
            mNativeAdView = View.inflate(mContext, R.layout.admob_native_ad_layout_install, this);
            mNativeAdView = mNativeAdView.findViewById(R.id.admob_native_install_adview);
            setAdmobInstallAdView((NativeAppInstallAdView) mNativeAdView);
        }

        else if(ad.getAdTypeName().equals(Const.KEY_AB) && !ad.isDownLoadApp()){
            // if isDownLoadApp is false (display by webview or other way) ,
            // use Layout Resource : R.layout.admob_native_ad_layout_context
            mNativeAdView = View.inflate(mContext, R.layout.admob_native_ad_layout_context, this);
            mNativeAdView = mNativeAdView.findViewById(R.id.admob_native_content_adview);
            setAdmobContentAdView((NativeContentAdView) mNativeAdView);
        }

        else if(ad.getAdTypeName().equalsIgnoreCase("mpbanner")) {
            //if mpbanner ,direct get View and add to parent view
            mNativeAdView = (View) ad.getAdObject();
            addView(mNativeAdView);
        } else {
            //if Ad resource from cm,fb,mopub ...
            // use Layout Resource : R.layout.native_ad_layout
            mNativeAdView = View.inflate(mContext, R.layout.native_ad_layout, this);

            String iconUrl = ad.getAdIconUrl();
            ImageView iconImageView = (ImageView) mNativeAdView
                    .findViewById(R.id.big_iv_icon);
            if (iconUrl != null) {
                VolleyUtil.loadImage(iconImageView, iconUrl);
            }
            //get image url
            String mainImageUrl = ad.getAdCoverImageUrl();
            if (!TextUtils.isEmpty(mainImageUrl)) {
                ImageView imageViewMain = (ImageView) mNativeAdView
                        .findViewById(R.id.iv_main);
                imageViewMain.setVisibility(View.VISIBLE);
                VolleyUtil.loadImage(imageViewMain, mainImageUrl);
            }

            Log.e("URL", mainImageUrl != null ? mainImageUrl : "mainImageUrl is null");


            TextView titleTextView = (TextView) mNativeAdView.findViewById(R.id.big_main_title);
            TextView subtitleTextView = (TextView) mNativeAdView.findViewById(R.id.big_sub_title);
            Button bigButton = (Button) mNativeAdView.findViewById(R.id.big_btn_install);
            TextView bodyTextView = (TextView) mNativeAdView.findViewById(R.id.text_body);

            //fill ad data
            titleTextView.setText(ad.getAdTitle());
            subtitleTextView.setText(ad.getAdTypeName());
            bigButton.setText(ad.getAdCallToAction());
            bodyTextView.setText(ad.getAdBody());
        }
        if (mNativeAd != null) {
            mNativeAd.unregisterView();
        }
        mNativeAd = ad;
        // step2: register view for ad
        mNativeAd.registerViewForInteraction(mNativeAdView);

Note: setAdmobInstallAdView() and setAdmobContentAdView() are used to binding view for Admob Layout . At the same time ,you must resiter mNativeAdView for ad.

    //register view for ad
    mNativeAd.registerViewForInteraction(mNativeAdView);

4.Display Native Ad

Add the NativeAd View to the nativeAdContainer and display Native Ad

 if(nativeAdManagerEx != null){

            INativeAd ad = nativeAdManagerEx.getAd();
            if (ad == null) {
                Toast.makeText(NativeAdSampleActivity.this,
                        "no native ad loaded!", Toast.LENGTH_SHORT).show();
                return;
            }
            if (mAdView != null) {
                // remove old ad view
                nativeAdContainer.removeView(mAdView);
            }
            //the mAdView is custom by publisher
            mAdView = OrionNativeAdview.createAdView(getApplicationContext(), ad);

            //add the mAdView into the layout of view container.
             nativeAdContainer.addView(mAdView);

        }