HyBid Native - pubnative/pubnative-hybid-android-sdk GitHub Wiki
Native ads will be fetched using the HyBid SDK
Requirements:
- Ad Zone Id from the PubNative Publisher Dashboard
Code sample
You can find a demo app with code samples for this type of integration here.
Create native ad layout
Create the items in your user interface that will hold the native ad elements.
<RelativeLayout
android:id="@+id/ad_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white">
<ImageView
android:id="@+id/ad_icon"
android:layout_width="36dp"
android:layout_height="36dp"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp" />
<TextView
android:id="@+id/ad_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_toEndOf="@id/ad_icon"
android:layout_toRightOf="@id/ad_icon"
android:ellipsize="end"
android:maxLines="2"
android:textColor="@android:color/black"
android:textSize="16sp" />
<ImageView
android:id="@+id/ad_banner"
android:layout_width="match_parent"
android:layout_height="140dp"
android:layout_below="@id/ad_icon"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp" />
<TextView
android:id="@+id/ad_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/ad_banner"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:textColor="@android:color/black"
android:textSize="14sp" />
<RatingBar
android:id="@+id/ad_rating"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/ad_description"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:numStars="5"
android:rating="2"
android:isIndicator="true"
android:layout_marginTop="8dp"/>
<Button
android:id="@+id/ad_call_to_action"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_below="@id/ad_description"
android:layout_marginBottom="8dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:clickable="false" />
<FrameLayout
android:id="@+id/ad_choices"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true" />
</RelativeLayout>
There must always be a view containing all the ad elements. This is necessary in order to properly track the visibility of all the native elements.
IMPORTANT: The call to action button clickable property must be set to false. Otherwise the ad click will only work when the user clicks anywhere on the add except the button.
Create the attributes for the UI elements on the Java code:
private ViewGroup mAdContainer;
private ImageView mAdIcon;
private ImageView mAdBanner;
private TextView mAdTitle;
private TextView mAdDescription;
private FrameLayout mAdChoices;
private Button mAdCallToAction;
private RatingBar mAdRating;
Get the references to the actual elements from the XML layout:
mAdContainer = view.findViewById(R.id.ad_container);
mAdIcon = view.findViewById(R.id.ad_icon);
mAdBanner = view.findViewById(R.id.ad_banner);
mAdTitle = view.findViewById(R.id.ad_title);
mAdDescription = view.findViewById(R.id.ad_description);
mAdChoices = view.findViewById(R.id.ad_choices);
mAdCallToAction = view.findViewById(R.id.ad_call_to_action);
mAdRating = view.findViewById(R.id.ad_rating);
Request ad
Create a HyBidNativeAdRequest and a NativeAd attribute in your activity or fragment:
private NativeAd nativeAd;
private HyBidNativeAdRequest nativeAdRequest;
Make the ad request using the load method passing the zone ID and a listener.
private void loadNativeAd() {
HyBidNativeAdRequest nativeAdRequest = new HyBidNativeAdRequest();
nativeAdRequest.load("ZONE_ID", new HyBidNativeAdRequest.RequestListener() {
@Override
public void onRequestSuccess(NativeAd ad) {
renderAd(ad);
}
@Override
public void onRequestFail(Throwable throwable) {
//Ad failed to load
}
});
}
Display and tracking the ad
After successfully receiving the ad, you should use the native UI elements created before to display the ad on the screen.
private void renderAd(NativeAd ad) {
// Save a reference to the ad so when the activity or fragment will be
// destroyed then you can stop the tracking.
this.mNativeAd = ad;
mAdTitle.setText(ad.getTitle());
mAdDescription.setText(ad.getDescription());
mAdChoices.addView(ad.getContentInfo(getContext()));
mAdCallToAction.setText(ad.getCallToActionText());
mAdRating.setRating(ad.getRating());
// To load the images into the views you can use any library or your own
// implementation. This sample uses the Picasso Image Loading library
Picasso.get().load(ad.getBannerUrl()).into(mAdBanner);
Picasso.get().load(ad.getIconUrl()).into(mAdIcon);
}
After setting all the elements in the corresponding UI, the ad needs to be tracked. This will trigger the impression and click notifications to the PubNative servers once any of these events happen.
private void renderAd(NativeAd ad) {
// Save a reference to the ad so when the activity or fragment will be
// destroyed then you can stop the tracking.
this.mNativeAd = ad;
mAdTitle.setText(ad.getTitle());
mAdDescription.setText(ad.getDescription());
mAdChoices.addView(ad.getContentInfo(getContext()));
mAdCallToAction.setText(ad.getCallToActionText());
mAdRating.setRating(ad.getRating());
// To load the images into the views you can use any library or your own
// implementation. This sample uses the Picasso Image Loading library
Picasso.get().load(ad.getBannerUrl()).into(mAdBanner);
Picasso.get().load(ad.getIconUrl()).into(mAdIcon);
ad.startTracking(mAdContainerView, new NativeAd.Listener() {
@Override
public void onAdImpression(NativeAd ad, View view) {
}
@Override
public void onAdClick(NativeAd ad, View view) {
}
});
}
It is very important that the view which is passed as a parameter on the startTracking method is a view that contains all the native ad elements. Otherwise the impression and click tracking will not work properly and some parts of the ad will not be clickable.
onAdImpression and onAdClick just notify of clicks and impressions. No code needs to be added there. Use those callbacks in case you want to hide the ad after click or some similar use case.
Note: These samples use the Picasso Image library to load the images into the views. Any library or own implementation will work the same way.
Finally stop tracking the ad when the activity or fragment are destroyed
@Override
public void onDestroy() {
if (mNativeAd != null) {
mNativeAd.stopTracking();
}
super.onDestroy();
}