Native Facebook Ads in GridView: MediaView Displays a Gray Rectangle

Question

I have included my own Facebook ad in GridView. While I'm showing test ads. It works great, except the video plays.

MediaView plays video very well if the user does not interact with the GridView. When a GridView is projected, the video pauses and resumes when the ad reappears on the screen.

Scrolling up and down the grid several times , MediaView no longer shows the video and just displays a gray rectangle.

Out of curiosity, I tried to run the Ui Automatic Viewer on my device when the MediaView is gray. I noticed something interesting, but I can’t understand.

In the view hierarchy, I see a GridView with some FrameLayout children (a container for the views given by the adapter). This includes your own ad and other submissions.

But , when the MediaView is gray , its FrameLayout does not appear in the view hierarchy ! But on the screen it is displayed just fine!

I am very puzzled by what I see.

Also, when I included these ads in RecyclerView, I did not have this problem (or at least did not notice).

Tell us about the code. I have a link that points to my own type of advertising on Facebook.

Suggestions are welcome :)

Here is the adapter code that passes 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 the Ui Automator Viewer.

Answer 1

As you said

when I included these ads in RecyclerView, I did not have this problem (or at least did not notice it).

I realized that viewing recyclers is great for you. Then, instead of trying to repeat the same thing in a gridview, just use the LayoutManager to transform the recycler view as a grid or list .