-jio-start-block-type-3
¶ Native Ads-jio-style-title ¶ IntroductionNative ads come in three types – Native Banner (320x50), Native Billboard (300x250) and Native Carousel. Customize to match your app's layout or use pre-defined rendering by the SDK.
|
 |
 |
-jio-end-block-type-3
Complete GETTING STARTED section and INITIALIZE SDK section before starting this section.
-jio-start-block-type-3
¶ Native BannerNative Banner is sized at 320x50 for In-Feed integration. Customize Native Banner for a seamless fit or use default SDK layout. |
|
-jio-end-block-type-3
-jio-start-block-type-3
¶ Native BillboardNative Billboard is sized at 300x250 for Content Stream. Customize Native Billboard for Mastheads or carousels or use default SDK layout. |
|
-jio-end-block-type-3
-jio-start-block-type-2
-jio-style-title
¶ Default Native Rendering and Customization (Banner & Billboard)
Use SDK's pre-defined layout for Native Banners and Billboards or tailor Native Banners and Billboards to your app's design using provided customization options.
-jio-style-title
¶ Native Ad Display Setup (Banner & Billboard)
Insert the provided Relative Layout code snippet into your app's custom_native_layout to create a container for Native Carousel Ads. This container ensures proper alignment, visibility control.
<RelativeLayout
android:id= ”@+id/ adview”
android:layout_width= ”wrap_content”
android:layout_height= ”wrap_content”
android:gravity= ”center”
android:background= ”@android:color/ transparent”
android:layout_gravity= ”center”
android:visibility= ”gone” />
-jio-style-title
¶ Caching Native Ads (Banner & Billboard)
Cache Native ads by initializing a JioAdView, setting up an ad listener, creating an ad container, adding the ad view, and initiating the caching process with a single call to jioAdViewNative?.cacheAd().
var jioAdViewNative : JioAdView
// context passed here should be Activity context.
jioAdViewNative = JioAdView (this,”<ADSPOT_KEY_GOES_HERE>“, JioAdView.AD_TYPE.CUSTOM_NATIVE)
jioAdViewNative!!.setAdListener(object: JioAdListener() {
override fun onAdFailedToLoad(jioAdView: JioAdView?, jioAdError: JioAdError?) {
// Error Callback
}
override fun onAdPrepared(jioAdView: JioAdView?) {
// Success callback
}
override fun onAdClosed( jioAdView: JioAdView?,isVideoCompleted: Boolean,isEligibleForReward: Boolean) {
// When Ad is closed
}
override fun onAdRender(jioAdView: JioAdView?){
// When ad is rendered on screen
}
override fun onAdMediaEnd(jioAdView: JioAdView?) {
// When media ended
}
})
val nativeContainer = findViewById<FrameLayout>(R.id.nativeAdContainer)
jioAdViewNative?.cacheAd()
Possible ad Formats can be
1. INFEED (320x50)
2. CONTENT_STREAM
3. CUSTOM_NATIVE
Incase of CUSTOM_NATIVE, Pass required size through below API:
setCustomImageSize(width: Int, height: Int)
//Example:
//jioAdView.setCustomSize(720, 250)
-jio-style-title
¶ Displaying Native Ad (Banner & Billboard)
Upon invoking the loadAd() API, the SDK dynamically attempts to render the native ad within the designated container. This action can be triggered either in response to an app event or integrated within the onAdPrepared() callback, providing flexibility in ad display management.
If(jioAdViewNative.getAdState() == JioAdView.AdState.PREPARED) {
jioAdViewNative?.addView(jioAdViewNative?.getAdView())
jioAdViewNative?.loadAd()
}
-jio-style-title
¶ Managing Native Ads (Banner & Billboard)
-jio-style-title
Lifecycle Management
Ensure proper lifecycle management by calling jioAdViewNative.onDestroy() within the onDestroy() method of the activity to destroy the native ad object
override fun onDestroy() {
if (jioAdViewNative != null) {
jioAdViewNative.onDestroy()
}
super.onDestroy()
}-jio-style-title
¶ Customizing Native Ads (Banner & Billboard)
Add required elements with tags for individual functionality: Icon layout, Title, Description, CTA Button by enabling customization by calling
jioadView.setCustomNativeAdContainer(nativeImageLayout: Int, videoAdLayout: Int)Parameter description for setCustomNativeAdContainer() API are as below
-jio-tables
| Parameter Name | Description |
|---|---|
| nativeImageLayout | To customize native elements, utilize this layout. |
| videoAdLayout | To customize video elements, utilize this layout. |
¶ Customizing Title
Displays the ad title with specified styling
<TextView
android:id=”@+id/jio_ads_title”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_centerHorizontal=”true”
android:layout_marginTop=”2dp”
android:ellipsize=”end”
android:gravity=”center”
android:maxLines=”1”
android:paddingStart=”2dp”
android:paddingEnd=”1dp”
android:tag=”@string/jio_native_title”
android:textColor=”@color/jio_black”
android:textSize=”10sp”
android:extStyle=”bold” tools:ignore=”SmallSp” />
¶ Customizing Description
Displays the ad description below the title, centered horizontally, and truncated if necessary.
<TextView
android:id=”@+id/jio_ads_desc”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_below=”@+id/jio_ads_title”
android:layout_centerHorizontal=”true”
android:layout_marginTop=”3dp”
android:ellipsize=”end”
android:gravity=”center”
android:paddingStart=”2dp”
android:paddingEnd=”1dp”
android:tag=”@string/jio_native_description”
android:textColor=”@color/jio_text_color”
android:textSize=”7sp” />
¶ Customizing Icon Layout
Container for the ad icon with specified dimensions and padding.
<FrameLayout android:padding=”2dp”
android:id=”@+id/native_icon_layout”
android:layout_width=”48dp”
android:layout_height=”48dp”
android:layout_centerVertical=”true”
android:layout_gravity=”center_vertical”
android:tag=”@string/jio_na tive_icon_layout” />
¶ Customizing Media Layout
Container for displaying the Native Ad's media content, either main image or video, with specified dimensions and styling.
<RelativeLayout
android:id=”@+id/fb_media_view”
android:layout_width=”300dp”
android:layout_height=”157dp”
android:layout_alignParentTop=”true”
android:layout_marginLeft=”1.5dp”
android:layout_marginRight=”1.5dp”
android:descendantFocusability=”afterDescendants”
android:focusable=”true”
android:gravity=”center”
android:tag=”@string/jio_native_media_layout”
android:visibility=”visible” />
jio_native_media_layout: This tag should be used only for customizing main image and video
¶ Customizing Button (CTA)
Displays a button with specified styling, aligned to the end
<RelativeLayout
android:id=”@+id/fb_media_view”
android:layout_width=”300dp”
android:layout_height=”157dp”
android:layout_alignParentTop=”true”
android:layout_marginLeft=”1.5dp”
android:layout_marginRight=”1.5dp”
android:descendantFocusability=”afterDescendants”
android:focusable=”true”
android:gravity=”center”
android:tag=”@string/jio_native_media_layout”
android:visibility=”visible” />
jio_native_media_layout: This tag should be used only for customizing main image and video
¶ Customizing Custom Image
<FrameLayout
android:id="@+id/jio_custom_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:clickable="true"
android:tag="@string/jio_native_custom_image_layout" />
jio_native_custom_image_layout: This tag should be used only for customizing custom image and video
¶ Customizing Sponsor
<TextView
android:id=”@+id/jio_ads_sponsored”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:Text="Ad"/>
¶ Customizing Video Player Container
Refer Customize Instream Video Ads for details.
¶ Customizing Mute/Unmute Button
Refer Customize Instream Video Ads for details.
¶ Customizing Play / Pause Button
Refer Customize Instream Video Ads for details.
¶ Customizing Video Ad progress counter
Refer Customize Instream Video Ads for details.
jio_native_media_layout and jio_native_custom_image_layout tags cannot be used together at the same time and can be used only one tag at a time
-jio-end-block-type-2
-jio-start-block-type-3
¶ Native CarouselNative carousels allow advertisers to display multiple content cards within a single ad unit, creating an interactive and engaging experience for users to tell a comprehensive brand story.
Features: 1. Showcase series of products or related creatives in one ad unit 2. 1-10 swipe able container view with individual card CTAs and descriptions 3. Expandable/Collapsible Carousels for non-disruptive monetization 4. Customizable UI to match look and feel of app interface 5. Supported for mobile and CTV 6. Supported Aspect Ratios are 1:1, 3:4, 16:9 and 9:16 |
 |
-jio-end-block-type-3
-jio-start-block-type-2
¶ Carousel Layout Setup
Call the below API before cacheAd() to pass carousel Layout.
To get Carousel Ad, calling below API is mandatory.
jioAdView?.setCustomNativeAdContainer(R.layout.jio_custom_native_layout)Insert the provided Relative Layout code snippet into your app's custom_native_layout to create a container for Native Carousel Ads. This container ensures proper alignment, visibility control.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:tag="@string/jio_carousel_ad"
android:visibility="gone" />“jio_carousel_ad” width should always be “match_parent” and height should always be “wrap_content”.
“jio_carousel_ad” should be always used with Relative layout only.
¶ Caching & Displaying Native Carousel Ad
Refer Caching Native Ads and Displaying Native Ad sections
¶ Complete XML Reference (Native Carousel)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/adView_new"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingTop="8dp"
android:paddingBottom="8dp">
<LinearLayout
android:id="@+id/ll_sponser"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:orientation="horizontal">
<TextView
android:id="@+id/jio_sponsored"
android:layout_width="15dp"
android:layout_height="15dp"
android:layout_gravity="center"
android:layout_marginEnd="2dp"
android:gravity="center"
android:paddingLeft="2dp"
android:paddingRight="2dp"
android:text="Ad"
android:textColor="#000000"
android:textSize="8sp"
android:visibility="visible" />
<FrameLayout
android:id="@+id/jio_custom_adChoiceView"
android:layout_width="15dp"
android:layout_height="15dp"
android:layout_gravity="center"
android:focusable="true"
android:gravity="top|end"
android:orientation="vertical"
android:paddingLeft="1dp"
android:paddingRight="1dp"
android:tag="@string/jio_native_adchoice_layout"
android:visibility="visible" />
</LinearLayout>
<RelativeLayout
android:id="@+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true">
<TextView
android:id="@+id/jio_custom_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="5dp"
android:layout_marginEnd="16dp"
android:layout_toEndOf="@+id/jio_custom_icon"
android:ellipsize="end"
android:maxLines="1"
android:paddingLeft="8dp"
android:paddingRight="8dp"
tools:text="Title"
android:tag="@string/jio_native_title" />
<TextView
android:id="@+id/jio_custom_desc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/jio_custom_title"
android:layout_marginStart="8dp"
android:layout_marginTop="1sp"
android:layout_marginEnd="16dp"
android:layout_toEndOf="@+id/jio_custom_icon"
android:ellipsize="end"
android:paddingLeft="8dp"
android:paddingRight="8dp"
tools:text="Description"
android:tag="@string/jio_native_description" />
<FrameLayout
android:id="@+id/jio_custom_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:maxWidth="120dp"
android:maxHeight="80dp"
android:minWidth="50dp"
android:minHeight="50dp"
android:tag="@string/jio_native_icon_layout" />
</RelativeLayout>
<RelativeLayout
android:id="@+id/rl_media"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/header"
android:gravity="center">
<RelativeLayout
android:id="@+id/jio_custom_media_view"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_gravity="bottom|center"
android:focusable="true"
android:gravity="bottom|center"
android:tag="@string/jio_native_media_layout" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:tag="@string/jio_carousel_ad"
android:visibility="gone" />
</RelativeLayout>
<Button
android:id="@+id/jio_custom_cta"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/rl_media"
android:layout_gravity="center"
android:clickable="true"
android:ellipsize="end"
android:focusable="true"
android:gravity="center"
android:tag="@string/jio_native_cta"
android:textAlignment="center"
android:textColor="#ffffff"
android:textSize="15dp" />
</RelativeLayout>
¶ Carousel along with Media Layout / Custom Image
To add native Carousel Ad along with Media Layout / Custom Image, below code snippet needs to be used.
<RelativeLayout
android:id="@+id/rl_media"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/header"
android:gravity="center">
<RelativeLayout
android:id="@+id/jio_custom_media_view"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_gravity="bottom|center"
android:focusable="true"
android:gravity="bottom|center"
android:tag="@string/jio_native_media_layout" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:tag="@string/jio_carousel_ad"
android:visibility="gone" />
</RelativeLayout>
"@string/jio_carousel_ad" or
"@string/jio_native_media_layout" or
"@string/jio_native_custom_image_layout" should be always used with Relative layout only.
¶ Customizing Native Carousel Items
If you want to customize carousel item layout then below API needs to be called by passing custom layout (R.layout.custom_carousal_item).
jioAdView?.setCarouselItemLayout(R.layout.custom_carousal_item, false)
For Second argument ("shouldApplyAnimationOnFocus"), Pass "true" for TV or STB.
Above API (“setCarouselItemLayout()”) needs to be called before cacheAd()
¶ Complete XML for Reference (Customizing Native Carousel)
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:elevation="0dp"
app:cardCornerRadius="4dp"
android:padding="1dp"
android:background="@color/jio_white">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/jio_white"
android:orientation="vertical">
<RelativeLayout
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="152dp"
android:contentDescription=""
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:tag="@string/jio_native_carousel_image"/>
<TextView
android:layout_width="110dp"
android:layout_height="wrap_content"
android:layout_marginHorizontal="2dp"
android:layout_marginTop="8dp"
android:singleLine="true"
android:tag="@string/jio_native_carousel_title"
android:textSize="14sp"
android:textStyle="bold"
android:paddingHorizontal="1dp"
tools:text="@tools:sample/lorem/random" />
<TextView
android:layout_width="110dp"
android:layout_height="wrap_content"
android:layout_marginHorizontal="2dp"
android:layout_marginTop="5dp"
android:maxLines="1"
android:paddingHorizontal="1dp"
android:tag="@string/jio_native_carousel_description"
android:textSize="10sp"
tools:text="@tools:sample/lorem/random" />
</LinearLayout>
</androidx.cardview.widget.CardView>-jio-end-block-type-2
-jio-start-block-type-3
¶ Expandable AdsProduct Notes comes here
|
-jio-end-block-type-3
-jio-start-block-type-2
To achieve expandable/collapse functionality in Native or Carousel ad follow below steps
1. Use imageView and tag with jio_native_expand_ad_button tag.
<ImageView
android:id="@+id/iv_expand_collapse"
android:layout_width="40dp"
android:layout_height="40dp"
android:visibility="visible"
android:layout_marginEnd="8dp"
android:tag="JioExpandCollapseButton"
android:src="@drawable/jio_ic_collapse"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />2. Create RelativeLayout as ad container and tag with jio_expandable_container tag.
<RelativeLayout
android:id="@+id/collapse_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:tag="@string/jio_expandable_container">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="4dp"
android:tag="@string/jio_native_media_layout"
tools:background="@color/jio_blue" />
<RelativeLayout
android:id="@+id/media"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:tag="@string/jio_carousel_ad"
tools:background="@color/jio_blue" />
</RelativeLayout>
Put all the elements which are needed to be expanded/collapsed inside android:tag=" jio_expandable_container " view group TAG.
¶ Callbacks for expand/collapse
jioadListener?. onAdMediaCollapse(jioAdview:JioAdView)
jioadListener?. onAdMediaExpand (jioAdview:JioAdView)-jio-end-block-type-2