Facebook native ads in GridView : MediaView displays a grey rectangle

Question

I integrated a Facebook native Ad into a GridView. For now, I display test Ads. It works fine except for the one playing a video.

The MediaView plays a video just fine if the user doesn't interacts with the GridView. When the GridView is being scrolled, the video is paused and resumed when the Ad reappears on the screen.

After scrolling the grid up and down a few times, the MediaView doesn't show the video anymore and simply displays a grey rectangle.

Out of curiosity, I tried to run Ui Automatic Viewer on my device when the MediaView is grey. I noticed something interesting but I can't really make sense of.

In the View hierarchy, I can see the GridView with a some children FrameLayout (container for the Views given by the adapter). This includes the native ad and the other views.

But when the MediaView is grey, its FrameLayout doesn't appear in the View hierarchy ! But it is rendered just fine on the screen !

I'm very puzzled by what I see.

Also, when I integrated these ads in a RecyclerView, I didn't have this problem (or at least didn't notice it).

Let's talk about the code. I have a reference that points on the Facebook native ad View.

Suggestions welcome :)

Here is the code of the adapter that supplies Views to the GridView :

public class AdapterGridGallery extends BaseAdapter implements AdListener {

    private static int POSITION_AD = 4;
    private List<QuizzModel> listQuizzes;

    int heightViews;
    FragmentGallery fragmentGallery;

    View facebookAdView;
    private NativeAd facebookNativeAd;
    private boolean nativeAdSet = false;

    public AdapterGridGallery(FragmentGallery fragment, int height) {
        heightViews = height;
        fragmentGallery = fragment;
        facebookNativeAd = new NativeAd(fragment.getContext(), "my_tag");
        facebookNativeAd.setAdListener(this);
        facebookNativeAd.loadAd();
    }

    public void updateData(List<QuizzModel> list) {
        listQuizzes = list;
        notifyDataSetChanged();
    }

    @Override
    public int getCount() {
        return listQuizzes != null ? listQuizzes.size() + 1 : 0;
    }

    @Override
    public Object getItem(int i) {
        return listQuizzes.get(i);
    }

    @Override
    public long getItemId(int i) {
        return listQuizzes.get(i).getId();
    }

    @Override
    public int getItemViewType(int position) {
        if (position == POSITION_AD)
            return 0;
        else
            return 1;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup viewGroup) {
        View viewQuizz = null;
        switch (getItemViewType(position)) {
            case 0:
                if (facebookAdView == null) {
                    facebookAdView = LayoutInflater.from(viewGroup.getContext())
                            .inflate(R.layout.view_facebook_native, viewGroup, false);
                    //Settings the height of the view
                    AbsListView.LayoutParams params = (AbsListView.LayoutParams) facebookAdView.getLayoutParams();
                    params.height = heightViews;
                    params.width = AbsListView.LayoutParams.MATCH_PARENT;
                    facebookAdView.setLayoutParams(params);
                }

                viewQuizz = facebookAdView;
                viewQuizz.setTag(0);

                if (facebookNativeAd.isAdLoaded()) {
                    if (!nativeAdSet) {
                        Log.d("NativeAdList", "update views resources");
                        nativeAdSet = true;

                        ImageView nativeAdIcon = (ImageView) facebookAdView.findViewById(R.id.native_ad_icon);
                        TextView nativeAdTitle = (TextView) facebookAdView.findViewById(R.id.native_ad_title);
                        TextView nativeAdBody = (TextView) facebookAdView.findViewById(R.id.native_ad_body);
                        MediaView nativeAdMedia = (MediaView) facebookAdView.findViewById(R.id.native_ad_media);
                        TextView nativeAdSocialContext = (TextView) facebookAdView.findViewById(R.id.native_ad_social_context);
                        Button nativeAdCallToAction = (Button) facebookAdView.findViewById(R.id.native_ad_call_to_action);


                        nativeAdSocialContext.setText(facebookNativeAd.getAdSocialContext());
                        nativeAdCallToAction.setText(facebookNativeAd.getAdCallToAction());
                        nativeAdTitle.setText(facebookNativeAd.getAdTitle());
                        nativeAdBody.setText(facebookNativeAd.getAdBody());
                        // Downloading and setting the ad icon.
                        NativeAd.Image adIcon = facebookNativeAd.getAdIcon();
                        NativeAd.downloadAndDisplayImage(adIcon, nativeAdIcon);
                        // Download and setting the cover image.
                        nativeAdMedia.setNativeAd(facebookNativeAd);
                        nativeAdMedia.setAutoplay(true);
                        facebookNativeAd.registerViewForInteraction(facebookAdView);
                        nativeAdCallToAction.setVisibility(View.VISIBLE);
                    } else {
                        Log.d("NativeAdList", "views resources already set");
                    }
                } else {
                    Log.d("NativeAdList", "nativeAdCallToAction is set invisible");
                    nativeAdCallToAction.setVisibility(View.INVISIBLE);
                }
                break;
            case 1:
                view = new CustomView();
            }
            return view;
    }

    @Override
    public void onError(Ad ad, AdError adError) {
    }

    @Override
    public void onAdLoaded(Ad ad) {
        notifyDataSetChanged();
    }

    @Override
    public void onAdClicked(Ad ad) {

    }
}

Here is a screenshot of Ui Automator Viewer.

Answer 1

As you said

when I integrated these ads in a RecyclerView, I didn't have this problem (or at least didn't notice it).

I interpreted that recycler view work perfectly fine for you. Then instead of trying to redo same thing in gridview simply use LayoutManager to convert recycler view as grid or list.