Menu

Drawadvertising

1. Introduction

Draw ads are a special type of native ad rendering. They are generally displayed in full-screen mode and are


native_draw_demo_pic_thumb

suitable for full-screen page-turning information flow ads. Among them

Draw advertising implementation rendering methods include self-rendering and template-type ads. The effect of a general Draw advertisement is as follows:

2. Integration suggestions

   (1) Start the application to load ads through ATNative.makeAdRequest. Request ads in advance so they can be displayed quickly when ads need to be triggered.

   (2) It is recommended to call entryAdScenario(placementId,scenarioId) after entering the displayable advertising scene to count the current advertising space Cache status, specific statistical description can be viewed in Advertising scenarios Data that distinguishes different business scenarios

    (3) It is forbidden to execute the ad loading method in the onNativeAdLoadFail callback, otherwise it will cause a lot of useless requests and may cause the application to freeze.

   (4) Use ATNative.getNativeAd to obtain whether the advertising object is empty at the location where native advertising needs to be displayed: < /p>

  • Empty: Re-executeATNative.makeAdRequest to load ads
  • Not empty: Display the advertising object of NativeAd. At this time, you can directly execute ATNative.makeAdRequest to preload the next advertisement (You can preload the next ad directly after calling ATNative.getNativeAd)

   (5) It is recommended to configure a preset strategy: to improve the ad loading effect of the first cold start. For specific instructions and access tutorials, see SDK preset strategy usage instructions

Notes

Pangolin, Pangle:

•Be sure to pass in Activity when creating an ATNativeAdView instance

3. Sample code

For detailed sample code, please view Demo: TopOn SDK Demo, including Draw advertising integration method Please refer to the Demo: NativeDrawVideoActivity.java

3.1 Loading ads

ATNative atNative;
NativeAd mNativeAd;

int adViewWidth;
int adViewHeight;

public void loadNativeAd() {
  if (atNative == null) {
     //Initialize ad loading object
      atNative = new ATNative(this, nativeTopOnPlacementID, new ATNativeNetworkListener() {
                @Override
                public void onNativeAdLoaded() {
                    Log.i(TAG, "onNativeAdLoaded");
                }

                @Override
                public void onNativeAdLoadFail(AdError adError) {
                    //Note: It is prohibited to execute the advertising loading method in this callback for retry, otherwise it will cause a lot of useless requests and may cause the application to freeze.
                    //AdError,Please refer to https://docs.toponad.com/#/zh-cn/android/android_doc/android_test?id=aderror
                    Log.i(TAG, "onNativeAdLoadFail:" + adError.getFullErrorInfo());
                }
            });
   }

    //发起广告请求
    atNative.makeAdRequest();
}

3.2 Display Advertising

ATNativeAdView mATNativeAdView; //Container that must be created for rendering advertisements
View mSelfRenderView; //A container for developers to customize layouts

public void showNativeAd(ViewGroup adContainer, int adViewWidth) {
     /*
     In order to calculate the scene arrival rate, relevant information can be consulted“ https://newdocs.toponad.com/docs/1RWLAv “

Call the "Enter Advertising Scene" method when the advertising triggering conditions are met, for example:

**If an advertisement pops up after the cleaning is completed, it will be called at the end of the cleaning;

*1. First call "entryAdScenario"

*2. Can calling "ATNative # checkAdStatus # isReady" display

*3. Finally, call "getNativeAd" to display

*4. Scenario ID is passed in to the backend funnel report to receive scene data (not mandatory)
     */
  ATNative.entryAdScenario("your Native placementID", "your scenarioID");
  if (atNative == null){ 
      return; 
  } 
  if(!atNative.checkAdStatus().isReady()){
    return;
  }
  
  if (mATNativeAdView == null) {
     mATNativeAdView = findViewById(R.id.native_ad_view); //Can be defined in XML layout
  }
  if (mSelfRenderView == null) {
     mSelfRenderView = mATNativeAdView.findViewById(R.id.native_selfrender_view); //Can be defined in XML layout
  }

  NativeAd nativeAd = atNative.getNativeAd();
  //Developers can directly use ATNative # makeAdRequest to initiate preloading of the next advertisement after calling getNativeAd
  //loadNativeAd();

    if (nativeAd != null) {     
      if (mNativeAd != null) {
           mNativeAd.destory();
      }

      mNativeAd = nativeAd;
            mNativeAd.setNativeEventListener(new ATNativeEventListener() {
            @Override
            public void onAdImpressed(ATNativeAdView view, ATAdInfo atAdInfo) {
                //ATAdInfo can distinguish between advertising platforms and obtain advertising space IDs for advertising platforms
                //please refer to https://newdocs.toponad.com/docs/JSLSJN
                Log.i(TAG, "native ad onAdImpressed:\n" + atAdInfo.toString());   
            }

            @Override
            public void onAdClicked(ATNativeAdView view, ATAdInfo atAdInfo) {
                Log.i(TAG, "native ad onAdClicked:\n" + atAdInfo.toString());
            }

            @Override
            public void onAdVideoStart(ATNativeAdView view) {
                Log.i(TAG, "native ad onAdVideoStart");
            }

            @Override
            public void onAdVideoEnd(ATNativeAdView view) {
                Log.i(TAG, "native ad onAdVideoEnd");
            }

            @Override
            public void onAdVideoProgress(ATNativeAdView view, int progress) {
                Log.i(TAG, "native ad onAdVideoProgress:" + progress);
            }
        });

     ATNativePrepareInfo nativePrepareInfo;

      if (!mNativeAd.isNativeExpress()) {
            //Self rendering and Draw advertising
            nativePrepareInfo = new ATNativePrepareInfo();

            bindSelfRenderView(this, mNativeAd.getAdMaterial(), mSelfRenderView, nativePrepareInfo)

            mNativeAd.renderAdContainer(mATNativeAdView, mSelfRenderView);
       } else {
           //Template rendering
            mNativeAd.renderAdContainer(mATNativeAdView, null);
       }

        mNativeAd.prepare(mATNativeAdView, nativePrepareInfo);       
    } 
}
public static void bindSelfRenderView(Context context, ATNativeMaterial adMaterial, View selfRenderView, ATNativePrepareInfo nativePrepareInfo) {
        int padding = dip2px(context, 5);
        selfRenderView.setPadding(padding, padding, padding, padding);
        TextView titleView = (TextView) selfRenderView.findViewById(R.id.native_ad_title);
        TextView descView = (TextView) selfRenderView.findViewById(R.id.native_ad_desc);
        TextView ctaView = (TextView) selfRenderView.findViewById(R.id.native_ad_install_btn);
        TextView adFromView = (TextView) selfRenderView.findViewById(R.id.native_ad_from);
        FrameLayout iconArea = (FrameLayout) selfRenderView.findViewById(R.id.native_ad_image);
        FrameLayout contentArea = (FrameLayout) selfRenderView.findViewById(R.id.native_ad_content_image_area);
        final ATNativeImageView logoView = (ATNativeImageView) selfRenderView.findViewById(R.id.native_ad_logo);
        View closeView = selfRenderView.findViewById(R.id.native_ad_close);

        // bind view
        List<View> clickViewList = new ArrayList<>();//click views

        String title = adMaterial.getTitle();
        // title
        if (!TextUtils.isEmpty(title)) {
            titleView.setText(title);
            nativePrepareInfo.setTitleView(titleView);//bind title
            clickViewList.add(titleView);
            titleView.setVisibility(View.VISIBLE);
        } else {
            titleView.setVisibility(View.GONE);
        }

        String descriptionText = adMaterial.getDescriptionText();
        if (!TextUtils.isEmpty(descriptionText)) {
            // desc
            descView.setText(descriptionText);
            nativePrepareInfo.setDescView(descView);//bind desc
            clickViewList.add(descView);
            descView.setVisibility(View.VISIBLE);
        } else {
            descView.setVisibility(View.GONE);
        }

        // icon
        View adIconView = adMaterial.getAdIconView();
        String iconImageUrl = adMaterial.getIconImageUrl();
        iconArea.removeAllViews();
        final ATNativeImageView iconView = new ATNativeImageView(context);
        if (adIconView != null) {
            iconArea.addView(adIconView);
            nativePrepareInfo.setIconView(adIconView);//bind icon
            clickViewList.add(adIconView);
            iconArea.setVisibility(View.VISIBLE);
        } else if (!TextUtils.isEmpty(iconImageUrl)) {
            iconArea.addView(iconView);
            iconView.setImage(iconImageUrl);
            nativePrepareInfo.setIconView(iconView);//bind icon
            clickViewList.add(iconView);
            iconArea.setVisibility(View.VISIBLE);
        } else {
            iconArea.setVisibility(View.INVISIBLE);
        }

        // cta button
        String callToActionText = adMaterial.getCallToActionText();
        if (!TextUtils.isEmpty(callToActionText)) {
            ctaView.setText(callToActionText);
            nativePrepareInfo.setCtaView(ctaView);//bind cta button
            clickViewList.add(ctaView);
            ctaView.setVisibility(View.VISIBLE);
        } else {
            ctaView.setVisibility(View.GONE);
        }

        // media view
        View mediaView = adMaterial.getAdMediaView(contentArea);
        int mainImageHeight = adMaterial.getMainImageHeight();
        int mainImageWidth = adMaterial.getMainImageWidth();
        int realMainImageWidth = context.getResources().getDisplayMetrics().widthPixels - dip2px(context, 10);
        int realMainHeight = 0;
        FrameLayout.LayoutParams mainImageParam = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT
                , FrameLayout.LayoutParams.WRAP_CONTENT);
        if (mainImageWidth > 0 && mainImageHeight > 0 && mainImageWidth > mainImageHeight) {
            realMainHeight = realMainImageWidth * mainImageHeight / mainImageWidth;
            mainImageParam.width = realMainImageWidth;
            mainImageParam.height = realMainHeight;
        } else {
            mainImageParam.width = FrameLayout.LayoutParams.MATCH_PARENT;
            mainImageParam.height = realMainImageWidth * 600 / 1024;
        }

        contentArea.removeAllViews();
        if (mediaView != null) {
            if (mediaView.getParent() != null) {
                ((ViewGroup) mediaView.getParent()).removeView(mediaView);
            }
            mainImageParam.gravity = Gravity.CENTER;
            mediaView.setLayoutParams(mainImageParam);
            contentArea.addView(mediaView, mainImageParam);
            clickViewList.add(mediaView);
            contentArea.setVisibility(View.VISIBLE);
        } else if (!TextUtils.isEmpty(adMaterial.getMainImageUrl())) {
            ATNativeImageView imageView = new ATNativeImageView(context);
            imageView.setImage(adMaterial.getMainImageUrl());
            imageView.setLayoutParams(mainImageParam);
            contentArea.addView(imageView, mainImageParam);

            nativePrepareInfo.setMainImageView(imageView);//bind main image
            clickViewList.add(imageView);
            contentArea.setVisibility(View.VISIBLE);
        } else {
            contentArea.removeAllViews();
            contentArea.setVisibility(View.GONE);
        }


        //Ad Logo
        String adChoiceIconUrl = adMaterial.getAdChoiceIconUrl();
        Bitmap adLogoBitmap = adMaterial.getAdLogo();
        if (!TextUtils.isEmpty(adChoiceIconUrl)) {
            logoView.setImage(adChoiceIconUrl);
            nativePrepareInfo.setAdLogoView(logoView);//bind ad choice
            logoView.setVisibility(View.VISIBLE);
        } else if (adLogoBitmap != null) {
            logoView.setImageBitmap(adLogoBitmap);
            logoView.setVisibility(View.VISIBLE);
        } else {
            logoView.setImageBitmap(null);
            logoView.setVisibility(View.GONE);
        }

        String adFrom = adMaterial.getAdFrom();

        // ad from
        if (!TextUtils.isEmpty(adFrom)) {
            adFromView.setText(adFrom);
            adFromView.setVisibility(View.VISIBLE);
        } else {
            adFromView.setVisibility(View.GONE);
        }
        nativePrepareInfo.setAdFromView(adFromView);//bind ad from


        FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(dip2px(context, 40), dip2px(context, 10));//ad choice
        layoutParams.gravity = Gravity.BOTTOM | Gravity.RIGHT;
        nativePrepareInfo.setChoiceViewLayoutParams(layoutParams);//bind layout params for ad choice
        nativePrepareInfo.setCloseView(closeView);//bind close button

        nativePrepareInfo.setClickViewList(clickViewList);//bind click view list

        if (nativePrepareInfo instanceof ATNativePrepareExInfo) {
            List<View> creativeClickViewList = new ArrayList<>();//click views
            creativeClickViewList.add(ctaView);
            ((ATNativePrepareExInfo) nativePrepareInfo).setCreativeClickViewList(creativeClickViewList);//bind custom view list
        }
    }

public static int dip2px(Context context, float dipValue) {
        float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dipValue * scale + 0.5f);
}

3.4 Destroy ads

public void destroyAd() {
    if (mNativeAd != null) {
        mNativeAd.destory();
    }
}

4. Creative description Self-rendering creative API description

Previous
Template advertising
Next
advanced settings
Last modified: 2025-05-30Powered by