How to show banner ads intermittently in gridview

Question

I am developing an android app that will have a screen similar to the following image -

Please notice the banner ad between the cells. As GridView does not support such spanning of columns I am at a loss as to what to do.

Please provide any suggestions you can. Thanks in advance.

Answer 1

You need to create two layouts for items in Gridview Adapter. One for what you want to show and other for adView and alternately place layout while creating view.

Check this to get more idea.

Answer 2

Well, I think I can give you examples of code ... First of all, I added AsymmetricGridView.

compile 'com.felipecsl.asymmetricgridview:library:2.0.1'

I use this guide. It turned out about such an addition adapter:

    ListAdapter ia = new PreviewsAdapter(mContext, currentPreviews).setAdsWidth(numRows);

    gridListView.setRequestedColumnWidth(Utils.dpToPx(mContext, 80));

   gridListView.setAllowReordering(true);
    AsymmetricGridViewAdapter asymmetricAdapter =
            new AsymmetricGridViewAdapter<>(mContext, gridListView, ia);

    gridListView.setAdapter(asymmetricAdapter);
    gridListView.setOnItemClickListener(gridviewOnItemClickListener);

Pay attention to numRows. Before adding a physical View we do not know how much we will have columns. And we can not know how many cells (wide) takes advertising.It is possible that you will be able to use the standard method AsymmetricGridView.

I had to use this terrible code ( In it clogged my constants.

    Display display = mContext.getWindowManager().getDefaultDisplay();
    Point size = new Point();

    if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB_MR2){
        display.getSize(size);
    } else {
        size.set(display.getWidth(), display.getHeight());
    }

    final int mSize;
    if(getResources().getConfiguration().orientation == Configuration.ORIENTATION_PORTRAIT) {
        mSize = Math.min(size.x, size.y);
    } else if (getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE) {
        mSize = Math.max(size.x, size.y) - Math.min(size.x, size.y);
    } else {
        mSize = Math.min(size.x, size.y);
    }

    int numRows = Math.round((float) mSize / (float) Utils.dpToPx(mContext, 100));
// 80  width cell item + 20 padding

All the magic in the adapter PreviewsAdapter extends BaseAdapter

Determine where there is advertising. I want in the middle

adsId  = currentPreviews.size() / 2;

Forge a number of entries. Our entries nums + ad

public int getCount() {
    return currentPreviews.size() + 1;
}

Now we will return the object. It's either our members or advertising.

public Object getItem(int position) {
    if(adsId != position) {
        if(position >= adsId) {
            position-=1;
        }
        return currentPreviews.get(position);
    } else {
        return new AdsItem(this.numRows, 1);
    }
}

Our object must implement AsymmetricItem. Advertising, too. Here is an example of the object class advertising.

public class AdsItem implements AsymmetricItem {

    private final int width;
    private final int height;


    public AdsItem(int adsWidth, int adsHeight) {
        width = adsWidth;
        height = adsHeight;
    }

    @Override
    public int getColumnSpan() {
        return width;
    }

    @Override
    public int getRowSpan() {
        return height;
    }

    @Override
    public int describeContents() {
        return 0;
    }

    @Override
    public void writeToParcel(Parcel parcel, int i) {

    }
}

getRowSpan, getColumnSpan determine the width and height of the object View in cells.

And here is the method of obtaining View:

   public View getView(int position, View convertView, ViewGroup parent) {
        if(adsId != position) {
            ImageView imageView;
            if (convertView == null) {
                imageView = new SquareImageView(mContext);
                imageView.setLayoutParams(new GridView.LayoutParams(GridView.LayoutParams.MATCH_PARENT, GridView.LayoutParams.MATCH_PARENT));
                imageView.setPadding(10, 10, 10, 10);
            } else {
                imageView = (SquareImageView) convertView;
            }

            AvatarPart ap = (AvatarPart) getItem(position);

            Bitmap b = imgs.get(ap.getFile());
            imageView.setImageBitmap(b);
            imageView.invalidate();
            return imageView;
        } else {
            String adId = mContext.getResources().getString(R.string.add_id);

            AdView mAdView = new AdView(mContext);
            mAdView.setPadding(0, 15, 0, 15);
            mAdView.setAdSize(AdSize.BANNER);
            mAdView.setAdUnitId(adId);
            AdRequest adRequest = new AdRequest.Builder()
                    .build();
            if(mAdView.getAdSize() != null )
                mAdView.loadAd(adRequest);

            return mAdView;
        }
    }

But I'm not sure about this line:

imageView = (SquareImageView) convertView;

I do not know whether to get there AdView. But while it is not broke: D

To handle clicks had to write another method.

public AvatarPart getItemWithoutAds(int position) {
    if(position == adsId) return null;
    if(position >= adsId) {
    position-=1;
}
    return currentPreviews.get(position);
}

This is certainly not the most beautiful code, but it works. Result:

Answer 3

On my opinion, the best way to do it is to use RecyclerView with GridLayoutManager. Simply provide SpanSizeLookup for GridLayoutManager that can determine size of each position. For example, first position need to ocupate full row

//Two items in a row
int spanCount = 2;
GridLayoutManager manager = new GridLayoutManager(getActivity(),spanCount);
manager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
            @Override
            public int getSpanSize(int position) {
                return (position == 0 ? spanCount : 1);
            }
        });

In your adapter provide 2 types of items - usual item and advertisement item

It is preferable to set item paddings via ItemDecoration.

I can provide more code if needed

Answer 4

Implement a custom ArrayAdapter, here is an example: Developing a custom adapter