On this page

Native Ad

Here is an example of what a native ad in splash looks like:


Native Format

Add ad view to the layout

The first step in displaying a native ad is to place an IkmWidgetAdView in the layout for the Activity or Fragment where the ad is to be shown.

  <com.ikame.android.sdk.widgets.IkmWidgetAdView
  android:id="@+id/adsView"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  app:ikwad_preview_layout="@layout/shimmer_loading_native" />

Load native ad with template

To simplify native ad integration, the SDK provides three pre-defined types of native ad: NORMAL_LAYOUT, EXIT_LAYOUT, and BANNER_LAYOUT. These templates allow for quick and flexible integration of native ads in different parts of your application.


NORMAL_LAYOUT	BANNER_LAYOUT	EXIT_LAYOUT

To load a native ad with a specific template, call the IkmWidgetAdView loadAd() method. You need to pass the ad unit ID (screen), the desired native template (IKNativeTemplate), and an IKShowWidgetAdListener to handle the ad events, including success or error states.

  fun loadAd(
    screen: String,
    template: IKNativeTemplate,
    listener: IKShowWidgetAdListener?
)

Parameters:

screen: considered as a unitId, our team will send you the screenAd list.
template: The IKNativeTemplate enum class defines the types of layout templates available for native ads within an application. This enumeration helps in selecting the appropriate ad layout type based on the usage context.
- NORMAL_LAYOUT: Standard layout typically used for in-content ad placements.
- EXIT_LAYOUT: Layout designed for use when the user is exiting the application, often used to grab attention one last time.
- BANNER_LAYOUT: Layout tailored for banner ads, usually placed at the top or bottom of the screen.
listener: The IKShowWidgetAdListener interface is designed to handle the events related to the display of widget ads. It provides callbacks for various stages of ad display, including when ads are shown, fail to show, or are clicked.
- onAdShowed(): Called when an ad is successfully displayed. This method is used to trigger any follow-up actions once the ad is shown.
- onAdShowFail(error: IKAdError): Invoked when there is a failure in displaying the ad. It takes an IKAdError object as a parameter, which contains details about what caused the failure.
- onAdClick(): Triggered when an ad is clicked by the user. This method can be used to handle user interaction with the ad.

Example

  val adsView: IkmWidgetAdView? = findViewById(R.id.adsView)

adsView.attackLifecycle(this.lifecycle)

adsView.loadAd(
    "home_native", IKNativeTemplate.NORMAL_LAYOUT,
    object : IKShowWidgetAdListener {
        override fun onAdShowed() {}
        override fun onAdShowFail(error: IKAdError) {
            adsView?.visibility = View.GONE
        }
    }
)

  IkmWidgetAdView adsView = findViewById(R.id.adsView);
   adsView.attachLifecycle(getLifecycle());
   adsView.loadAd("native_screen_id", IKNativeTemplate.NORMAL_LAYOUT, new IKShowWidgetAdListener() {
       @Override
       public void onAdShowed() {

       }

       @Override
       public void onAdShowFail(@NonNull IKAdError ikAdError) {

       }

       @Override
       public void onAdClick() {

       }
   });

Load native ad with custom layout

This method allows for loading an ad with a custom layout specified by the developer.The loadAd() function in the IkmWidgetAdView class allows you to load a native ad with a shimmer layout, a specific ad layout (IkmWidgetAdLayout), and an ad screen ID. This method enables the integration of native ads with custom loading animations (shimmer effects) while ensuring the ad is displayed within the provided layout.

  fun loadAd(
    @LayoutRes layoutShimmerRes: Int,
    layoutAd: IkmWidgetAdLayout,
    screen: String,
    listener: IKShowWidgetAdListener?
)

Parameters:

layoutShimmerRes: The resource ID of the shimmer layout that will be shown while the ad is loading. This allows you to create a smooth loading experience for the user.
layoutAd: The specific IkmWidgetAdLayout for rendering the native ad. This layout determines how the ad will be displayed in the UI.
screen: considered as a unitId, our team will send you the screenAd list.
listener: The IKShowWidgetAdListener interface is designed to handle the events related to the display of widget ads. It provides callbacks for various stages of ad display, including when ads are shown, fail to show, or are clicked.
- onAdShowed(): Called when an ad is successfully displayed. This method is used to trigger any follow-up actions once the ad is shown.
- onAdShowFail(error: IKAdError): Invoked when there is a failure in displaying the ad. It takes an IKAdError object as a parameter, which contains details about what caused the failure.
- onAdClick(): Triggered when an ad is clicked by the user. This method can be used to handle user interaction with the ad.

Example

  val adsView: IkmWidgetAdView? = findViewById(R.id.adsView)
adsView.attackLifecycle(this.lifecycle)
val adLayout = LayoutInflater.from(applicationContext).inflate(R.layout.layout_custom_admob, null, false) as IkmWidgetAdLayout
adLayout.titleView = findViewById(R.id.custom_headline)
adLayout.bodyView = findViewById(R.id.custom_body)
adLayout.callToActionView = findViewById(R.id.custom_call_to_action)
adLayout.iconView = findViewById(R.id.custom_app_icon)
adLayout.mediaView = findViewById(R.id.custom_media)
adsView.loadAd(
    R.layout.shimmer_loading_native,
    adLayout,
    "native_screen_id",
    object : IKShowWidgetAdListener {
        override fun onAdShowed() {}
        override fun onAdShowFail(error: IKAdError) {
            adsView?.visibility = View.GONE
        }
    }
)

  IkmWidgetAdView adsView = findViewById(R.id.adsView);
adsView.attachLifecycle(getLifecycle());
View adLayoutView = LayoutInflater.from(getApplicationContext())
        .inflate(R.layout.layout_custom_admob, null, false);
IkmWidgetAdLayout adLayout = (IkmWidgetAdLayout) adLayoutView;
adLayout.setTitleView(adLayout.findViewById(R.id.custom_headline));
adLayout.setBodyView(adLayout.findViewById(R.id.custom_body));
adLayout.setCallToActionView(adLayout.findViewById(R.id.custom_call_to_action));
adLayout.setIconView(adLayout.findViewById(R.id.custom_app_icon));
adLayout.setMediaView(adLayout.findViewById(R.id.custom_media));
adsView.loadAd(
        R.layout.shimmer_loading_native,
        adLayout,
        "native_screen_id", new IKShowWidgetAdListener() {
            @Override
            public void onAdShowed() {

            }

            @Override
            public void onAdShowFail(@NonNull IKAdError ikAdError) {

            }

            @Override
            public void onAdClick() {

            }
        });

Example ad view (R.layout.layout_custom_admob)

  <?xml version="1.0" encoding="utf-8"?>

<com.ikame.android.sdk.widgets.IkmWidgetAdLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:ignore="MissingDefaultResource,SpUsage">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginHorizontal="@dimen/ads_padding"
        android:layout_marginVertical="@dimen/ads_padding">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/custom_containerAds"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toTopOf="parent">

            <ImageView
                android:id="@+id/custom_app_icon"
                android:layout_width="@dimen/ads_icon_size"
                android:layout_height="@dimen/ads_icon_size"
                android:layout_centerVertical="true"
                android:layout_marginStart="16dp"
                android:adjustViewBounds="true"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                tools:ignore="ContentDescription" />

            <TextView
                android:id="@+id/custom_headline"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="@dimen/ads_padding"
                app:layout_goneMarginStart="@dimen/ads_margin_gone"
                android:ellipsize="end"
                android:fontFamily="@font/roboto_medium"
                android:maxLines="1"
                android:textColor="@color/ads_black"
                android:textSize="14dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@+id/custom_app_icon"
                app:layout_constraintTop_toTopOf="parent"
                tools:text="abv" />

            <TextView
                android:id="@+id/custom_body"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:lines="2"
                android:maxLines="2"
                android:textColor="@color/color_text_ads_des"
                android:textSize="10dp"
                app:layout_constraintEnd_toEndOf="@+id/custom_headline"
                app:layout_constraintStart_toStartOf="@+id/custom_headline"
                app:layout_constraintTop_toBottomOf="@+id/custom_headline"
                tools:text="adadad" />
        </androidx.constraintlayout.widget.ConstraintLayout>

        <com.ikame.android.sdk.widgets.IkmWidgetMediaView
            android:id="@+id/custom_media"
            android:layout_width="match_parent"
            android:layout_height="@dimen/sdk_native_height"
            android:layout_centerHorizontal="true"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="4dp"
            app:layout_constraintTop_toBottomOf="@+id/custom_containerAds" />

        <TextView
            android:id="@+id/custom_call_to_action"
            android:layout_width="100dp"
            android:layout_height="@dimen/ads_button_size"
            android:layout_alignParentEnd="true"
            android:layout_marginHorizontal="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            android:background="@drawable/bg_btn_ads_round"
            android:fontFamily="@font/roboto_medium"
            android:gravity="center"
            android:minWidth="50dp"
            android:paddingHorizontal="16dp"
            android:textColor="@color/color_white_ads"
            android:textSize="12dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="@id/custom_media"
            tools:text="install" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="15dp"
        android:layout_marginStart="1dp"
        android:background="@drawable/bg_text_ads_normal"
        android:gravity="center"
        android:paddingHorizontal="2dp"
        android:text="@string/txt_ad"
        android:textColor="@color/color_white_ads"
        android:textSize="10dp" />

</com.ikame.android.sdk.widgets.IkmWidgetAdLayout>

Preload an ad

The preloadNativeAd() function in the IKSdkController class is used to preload a native ad and store it in the SDK system, allowing you to prepare an ad in advance so that it can be displayed more quickly when needed. This method optimizes ad delivery by ensuring that the ad is loaded and ready before it is shown to the user.

warning

You should not call too many preloadNativeAd simultaneously to avoid affecting the ability to load ads and app performance. Let calculate the appropriate time to call preloadNativeAd.

  fun preloadNativeAd(
    screen: String,
    callback: IKLoadAdListener?
)

Parameters:

screen: considered as a unitId, our team will send you the screenAd list.
callback: The IKLoadAdListener interface is designed to manage responses related to the loading of ads. It provides callbacks for handling both the successful loading of ads and the scenarios where ad loading fails.
onAdLoaded(): Called when the ad is displayed. This method must be implemented to define the actions to be taken when an ad is shown.
onAdLoadFail(error: IKAdError): Invoked when there is a failure in loading the ad. It takes an IKAdError object as a parameter, which contains details about what caused the failure.

Example

  IKSdkController.preloadNativeAd("native_screen_id", object : IKLoadAdListener {
    override fun onAdLoaded() {
        // Ad loaded successfully
    }

    override fun onAdLoadFail(error: IKAdError) {
        // Handle ad load failure
    }
})

  IKSdkController.preloadNativeAd("native_screen_id", new IKLoadAdListener() {
       @Override
       public void onAdLoaded() {

       }

       @Override
       public void onAdLoadFail(@NonNull IKAdError ikAdError) {

       }
   });

Recall load current ad

Once you have successfully loaded the Ad before, if you want to reload the ad in that position. The loadAd function should not be called again. Use the recallLoadAd function

  fun reCallLoadAd(listener: IKShowWidgetAdListener?)

Parameters:

listener: The IKShowWidgetAdListener interface is designed to handle the events related to the display of widget ads. It provides callbacks for various stages of ad display, including when ads are shown, fail to show, or are clicked.
- onAdShowed(): Called when an ad is successfully displayed. This method is used to trigger any follow-up actions once the ad is shown.
- onAdShowFail(error: IKAdError): Invoked when there is a failure in displaying the ad. It takes an IKAdError object as a parameter, which contains details about what caused the failure.
- onAdClick(): Triggered when an ad is clicked by the user. This method can be used to handle user interaction with the ad.

Example

  if (adsView.getIsAdLoaded()) {
    adsView.reCallLoadAd(object : IKShowWidgetAdListener {
        override fun onAdShowed() {
        }

        override fun onAdShowFail(error: IKAdError) {
        }

        override fun onAdClick() {
        }
    })
}

  if (adsView.getIsAdLoaded()) {
    adsView.reCallLoadAd(new IKShowWidgetAdListener() {
        @Override
        public void onAdShowed() {

        }

        @Override
        public void onAdShowFail(@NonNull IKAdError ikAdError) {

        }

        @Override
        public void onAdClick() {

        }
    });
}

Mix icon and media view

From SDK version 3.00.490 or higher

In some cases, when you customize NativeAd to a small form, it can only display icons. But some ad networks do not return icons. Therefore, the UI/UX will be quite ugly. Below I will introduce a way to help solve that problem by replacing the icon with displaying mediaView.

Note: in mediaViewVideo you need to set the minimum width and height to 120dp according to policy.

XML layout sample (R.layout.layout_native_banner)

  <?xml version="1.0" encoding="utf-8"?>

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <com.ikame.android.sdk.widgets.IkmWidgetAdLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        tools:ignore="SpUsage">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:padding="4dp"
            android:layout_height="wrap_content">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toTopOf="parent"
            android:paddingVertical="6dp"
            android:paddingStart="8dp"
            android:paddingEnd="8dp">

            <FrameLayout
                android:id="@+id/tempNativeBannerIcon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent">

                <com.google.android.material.imageview.ShapeableImageView
                    android:id="@+id/tempNativeBanner_app_icon"
                    android:layout_width="72dp"
                    android:layout_height="72dp"
                    android:adjustViewBounds="true"
                    tools:ignore="ContentDescription" />

                <com.ikame.android.sdk.widgets.IkmWidgetMediaView
                    android:id="@+id/tempNativeBanner_appMediaView"
                    android:layout_width="72dp"
                    android:layout_height="72dp"
                    android:adjustViewBounds="true"
                    android:visibility="gone"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    tools:ignore="ContentDescription" />

                <com.ikame.android.sdk.widgets.IkmWidgetMediaView
                    android:id="@+id/tempNativeBanner_appMediaViewVideo"
                    android:layout_width="120dp"
                    android:layout_height="120dp"
                    android:adjustViewBounds="true"
                    android:visibility="gone"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    tools:ignore="ContentDescription" />
            </FrameLayout>

            <TextView
                android:id="@+id/tempNativeBanner_ad"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="top"
                android:layout_marginStart="12dp"
                android:fontFamily="@font/roboto_regular"
                android:gravity="center"
                android:minWidth="20dp"
                android:minHeight="14dp"
                android:text="@string/txt_ad"
                android:textColor="#ccc"
                android:textSize="9dp"
                app:layout_constraintBottom_toBottomOf="@id/tempNativeBanner_headline"
                app:layout_constraintStart_toEndOf="@id/tempNativeBannerIcon"
                app:layout_constraintTop_toTopOf="@id/tempNativeBanner_headline" />

            <TextView
                android:id="@+id/tempNativeBanner_headline"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="8dp"
                android:ellipsize="end"
                android:fontFamily="@font/roboto_medium"
                android:maxLines="1"
                android:textColor="#000"
                android:textSize="14dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@+id/tempNativeBanner_ad"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_goneMarginStart="12dp"
                tools:text="abv" />

            <androidx.appcompat.widget.AppCompatButton
                android:id="@+id/tempNativeBanner_call_to_action"
                android:layout_width="0dp"
                android:layout_height="36dp"
                android:layout_alignParentEnd="true"
                android:layout_marginTop="8dp"
                android:fontFamily="@font/roboto_medium"
                android:gravity="center"
                android:minWidth="64dp"
                android:paddingHorizontal="12dp"
                android:paddingVertical="6dp"
                android:textColor="@color/color_white_ads"
                android:textSize="12dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="@+id/tempNativeBanner_ad"
                app:layout_constraintTop_toBottomOf="@+id/tempNativeBanner_body"
                tools:text="install" />

            <TextView
                android:id="@+id/tempNativeBanner_body"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="4dp"
                android:ellipsize="end"
                android:maxLines="3"
                android:textSize="10dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="@+id/tempNativeBanner_ad"
                app:layout_constraintTop_toBottomOf="@+id/tempNativeBanner_headline"
                tools:text="adadad" />

        </androidx.constraintlayout.widget.ConstraintLayout>

        </androidx.constraintlayout.widget.ConstraintLayout>
    </com.ikame.android.sdk.widgets.IkmWidgetAdLayout>
</layout>

Example

  //Mix icon and media view
val nativeCustomMix = findViewById<IkmWidgetAdView>(R.id.main_ads_nativeCustomMix)
nativeCustomMix?.apply {
  val adLayout = LayoutInflater.from(applicationContext).inflate(
    R.layout.layout_native_banner_inlist,
    null, false
  ) as? IkmWidgetAdLayout
  adLayout?.titleView = adLayout?.findViewById(R.id.tempNativeBanner_headline)
  adLayout?.bodyView = adLayout?.findViewById(R.id.tempNativeBanner_body)
  adLayout?.callToActionView =
    adLayout?.findViewById(R.id.tempNativeBanner_call_to_action)
  adLayout?.iconView = adLayout?.findViewById(R.id.tempNativeBanner_app_icon)

  adLayout?.mediaMixView = adLayout?.findViewById(R.id.tempNativeBanner_appMediaView)
  adLayout?.mediaMixViewVideo =
    adLayout?.findViewById(R.id.tempNativeBanner_appMediaViewVideo)
  adLayout?.mediaMixViewVideo?.setMediaAdjustViewBounds(true)
  adLayout?.mediaMixView?.setMediaAdjustViewBounds(true)
  adLayout?.mediaMixView?.setMediaScaleType(ImageView.ScaleType.CENTER_CROP)
  adLayout?.isMixIconAndMediaView = true
  showWidgetAd(
    com.ikame.android.sdk.R.layout.shimmer_loading_native_banner,
    adLayout!!, "native_screen_id"
  )
}

  //Mix icon and media view
IkmWidgetAdView nativeCustomMix = findViewById(R.id.main_ads_nativeCustomMix);
if (nativeCustomMix != null) {
View adLayoutView = LayoutInflater.from(getApplicationContext())
.inflate(R.layout.layout_custom_admob, null, false);
IkmWidgetAdLayout adLayout = (IkmWidgetAdLayout) adLayoutView;
  adLayout.setTitleView(adLayout.findViewById(R.id.tempNativeBanner_headline));
adLayout.setBodyView(adLayout.findViewById(R.id.tempNativeBanner_body));
adLayout.setCallToActionView(adLayout.findViewById(R.id.tempNativeBanner_call_to_action));
adLayout.setIconView(adLayout.findViewById(R.id.tempNativeBanner_app_icon));

adLayout.setMediaMixView(adLayout.findViewById(R.id.tempNativeBanner_appMediaView));
adLayout.setMediaMixViewVideo(adLayout.findViewById(R.id.tempNativeBanner_appMediaViewVideo));

adLayout.getMediaMixViewVideo().setMediaAdjustViewBounds(true);
  adLayout.getMediaMixView().setMediaAdjustViewBounds(true);
  adLayout.getMediaMixView().setMediaScaleType(ImageView.ScaleType.CENTER_CROP);
  adLayout.setMixIconAndMediaView(true);
showWidgetAd(nativeCustomMix,R.layout.loading_custom_native, adLayout, "native_screen_id");
}

Destroy Ad

In certain scenarios, IkmWidgetAdView can be prone to memory leaks. Therefore, it is essential to destroy the ad when your Fragment or Activity is destroyed to manage resources properly.

  fun destroyAd()

Example

  override fun onDestroy() {
    super.onDestroy()
    adsView?.destroyAd()
}

  @Override
protected void onDestroy() {
    super.onDestroy();
    adsView.destroy();
}

Interstitial Ad

Full-screen Native Ad

Native Ad

Add ad view to the layout link

Load native ad with template link

Example link

Load native ad with custom layout link

Example link

Preload an ad link

Example link

Recall load current ad link

Example link

Mix icon and media view link

Example link

Destroy Ad link

Example link

Add ad view to the layout

Load native ad with template

Example

Load native ad with custom layout

Example

Preload an ad

Example

Recall load current ad

Example

Mix icon and media view

Example

Destroy Ad

Example