Recyclerview - Facebook Native Ads - Not clickable

Question

I am implementing Facebook Native Ads in RecyclerView. The ads load fine, but the ads are not clickable. Other general items in my RecyclerView are clickable as i implemented OnClickListener for them. How do i get the facebook ads clickable? Can someone help me with this?

Here is my code:

 private class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {

    private static final int VIEW_ITEM_TYPE = 0;
    private static final int VIEW_FACEBOOK_AD_TYPE = 1;

    Context context;

    public RecyclerViewAdapter(Context context) {
        this.context = context;
    }


    @Override
    public int getItemViewType(int position) {

        if (listItems.get(position).isAd())
            return VIEW_FACEBOOK_AD_TYPE;
        else
            return VIEW_ITEM_TYPE;
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

        if (viewType == VIEW_ITEM_TYPE) {
            View v = LayoutInflater.from(parent.getContext())
                    .inflate(R.layout.item_recyclerview, parent, false);
            return new CustomViewHolder(v);
        } else if (viewType == VIEW_FACEBOOK_AD_TYPE) {
            View v = LayoutInflater.from(parent.getContext())
                    .inflate(R.layout.item_recyclerview_dashboard_fb_ad, parent, false);
            return new FacebookAdViewHolder(v);
        }

        return null;
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {

        Video video = listItems.get(position);

        if (video.isAd()) {

            FacebookAdViewHolder facebookAdViewHolder = (FacebookAdViewHolder) holder;

            View adView = NativeAdView.render(context, nativeAd, NativeAdView.Type.HEIGHT_300);

            List<View> clickableViews = new ArrayList<>();
            clickableViews.add(adView);
            clickableViews.add(facebookAdViewHolder.nativeAdContainer);

            nativeAd.registerViewForInteraction(facebookAdViewHolder.nativeAdContainer, clickableViews);
            facebookAdViewHolder.nativeAdContainer.addView(adView);
        } else {
            CustomViewHolder customViewHolder = (CustomViewHolder) holder;
            Glide.with(context).load(URL_PART_1 + video.getVideoId() + URL_PART_2).into(customViewHolder.imageView);
            customViewHolder.textViewTitle.setText(video.getTitle());
        }
    }

    @Override
    public int getItemCount() {
        return listItems == null ? 0 : listItems.size();
    }

    private class CustomViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {

        ImageView imageView;
        TextView textViewTitle;

        public CustomViewHolder(View itemView) {
            super(itemView);
            itemView.setOnClickListener(this);
            imageView = itemView.findViewById(R.id.imageView);
            textViewTitle = itemView.findViewById(R.id.textView_title);
        }

        @Override
        public void onClick(View v) {

            ...
            ....
            .....

            // Un-necessary code

        }
    }

    private class FacebookAdViewHolder extends RecyclerView.ViewHolder {

        LinearLayout nativeAdContainer;

        public FacebookAdViewHolder(View facebookAd) {
            super(facebookAd);
            nativeAdContainer = facebookAd.findViewById(R.id.native_ad_container);
        }


    }

}

Answer 1

Ok, for those who are looking to integrate Facebook Ads to an android app using RecyclerView, here is the solution:

Here is a link to the sample, which has the implementation:

https://origincache.facebook.com/developers/resources/?id=audience-network-sdk-4.25.0.zip

Also, for quick code snippets:

item_recylerview_fb_ad.xml

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

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="10dp"
    android:paddingTop="10dp">

    <ImageView
        android:id="@+id/native_ad_icon"
        android:layout_width="50dp"
        android:layout_height="50dp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:paddingLeft="5dp">

        <TextView
            android:id="@+id/native_ad_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:lines="1"
            android:textColor="@android:color/black"
            android:textSize="18sp" />

        <TextView
            android:id="@+id/native_ad_body"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:lines="2"
            android:textColor="@android:color/black"
            android:textSize="15sp" />
    </LinearLayout>
</LinearLayout>

<com.facebook.ads.MediaView
    android:id="@+id/native_ad_media"
    android:layout_width="match_parent"
    android:layout_height="240dp"
    android:gravity="center" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="5dp">

    <TextView
        android:id="@+id/native_ad_social_context"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="3"
        android:ellipsize="end"
        android:lines="2"
        android:paddingRight="5dp"
        android:textColor="@android:color/black"
        android:textSize="15sp" />

    <Button
        android:id="@+id/native_ad_call_to_action"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:gravity="center"
        android:textSize="16sp" />
</LinearLayout>

Activity.java

// Activity should implement NativeAdsManager.Listener
public class MainActivity extends AppCompatActivity implements 
NativeAdsManager.Listener

// Listeners for NativeAdsManager
@Override
public void onAdsLoaded() {
    mRecyclerViewAdapter.notifyDataSetChanged();
}

@Override
public void onAdError(AdError error) {
}

// Probably in onCreate()
NativeAdsManager mNativeAdsManager;
String placement_id = "Your ad placement id";
mNativeAdsManager = new NativeAdsManager(this, placement_id, 5);
mNativeAdsManager.loadAds();
mNativeAdsManager.setListener(this);

// Your CustomViewHolder class
private class FacebookAdViewHolder extends RecyclerView.ViewHolder {

        MediaView mvAdMedia;
        ImageView ivAdIcon;
        TextView tvAdTitle;
        TextView tvAdBody;
        TextView tvAdSocialContext;
        Button btnAdCallToAction;

        public FacebookAdViewHolder(View facebookAd) {
            super(facebookAd);

            mvAdMedia = facebookAd.findViewById(R.id.native_ad_media);
            tvAdTitle = facebookAd.findViewById(R.id.native_ad_title);
            tvAdBody = facebookAd.findViewById(R.id.native_ad_body);
            tvAdSocialContext = facebookAd.findViewById(R.id.native_ad_social_context);
            btnAdCallToAction = facebookAd.findViewById(R.id.native_ad_call_to_action);
            ivAdIcon = facebookAd.findViewById(R.id.native_ad_icon);
        }

    }

   // Finally your onBindViewHolder method
    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {

        Video video = listItems.get(position);

        if (holder.getItemViewType() == VIEW_FACEBOOK_AD_TYPE) {

            NativeAd ad;

            if (mAdItems.size() > position / 3) {
                ad = mAdItems.get(position / 3);
            } else {
                ad = mNativeAdsManager.nextNativeAd();
                mAdItems.add(ad);
            }

            if (ad != null) {
                FacebookAdViewHolder facebookAdViewHolder = (FacebookAdViewHolder) holder;
                facebookAdViewHolder.tvAdTitle.setText(ad.getAdTitle());
                facebookAdViewHolder.tvAdBody.setText(ad.getAdBody());
                facebookAdViewHolder.tvAdSocialContext.setText(ad.getAdSocialContext());
                facebookAdViewHolder.mvAdMedia.setNativeAd(ad);
                facebookAdViewHolder.btnAdCallToAction.setText(ad.getAdCallToAction());
                NativeAd.Image adIcon = ad.getAdIcon();
                NativeAd.downloadAndDisplayImage(adIcon, facebookAdViewHolder.ivAdIcon);
                ad.registerViewForInteraction(facebookAdViewHolder.itemView);
            }

        } else {
            CustomViewHolder customViewHolder = (CustomViewHolder) holder;
            Glide.with(context).load(URL_PART_1 + video.getVideoId() + URL_PART_2).into(customViewHolder.imageView);
            customViewHolder.textViewTitle.setText(video.getTitle());
        }
    }

Again, as i mentioned earlier, the link provided above has the solution.

Answer 2

You have to add this to your FacebookAdViewHolder in order to make native ad container clickable.

private static class AdViewHolder extends RecyclerView.ViewHolder {

    TextView nativeAdTitle;
    Button nativeAdCallToAction;
    FrameLayout nativeAdContainer;
    ImageView nativeAdIcon;

AdViewHolder(View view) {
        super(view);
        nativeAdContainer = view.findViewById(R.id.fb_native_ad_container);
        nativeAdTitle = (TextView) view.findViewById(R.id.native_ad_title);
        nativeAdSocialContext = (TextView) view.findViewById(R.id.native_ad_social_context);
        nativeAdCallToAction = (Button) view.findViewById(R.id.native_ad_call_to_action);
        nativeAdIcon = (ImageView) view.findViewById(R.id.native_ad_icon);

    }
public void bindView(NativeAd ad) {
    nativeAdSocialContext.setText(ad.getAdSocialContext());
            nativeAdCallToAction.setText(ad.getAdCallToAction());
            nativeAdTitle.setText(ad.getAdTitle());
            NativeAd.Image adIcon = ad.getAdIcon();
            NativeAd.downloadAndDisplayImage(adIcon, nativeAdIcon);
            List<View> clickableViews = new ArrayList<>();
            clickableViews.add(nativeAdTitle);
            clickableViews.add(nativeAdCallToAction);
            ad.registerViewForInteraction(nativeAdContainer, clickableViews);
       } }