Search code examples
androidgridandroid-recyclerviewandroid-cardviewgridlayoutmanager

How to get Recycler View First Four items in Grids and then in Linear Items


Hi I am having problems in items views alignment I want achieve First four items in a grid and the rest in linear views items , having one graph view and dynamic views in linear.

What I want to achieve

|Grid 0 | Grid 1 |
------------------
|Grid 2 | Grid 3 |
------------------
| LinearItem 0   |
------------------
| LinearItem 1   |

Problem I am having

|Grid 0 | Grid 1 |
------------------
|Grid 2 | Grid 3 |
------------------
| Linear Item 0  |
------------------
|Line1|

Last items returning in Grid Item view rather then fullWidth with Linear Item

Starting from MainActivity , Using GridLayout Manager with spanize

   recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
    recyclerView.setHasFixedSize(false);
 cardModelList = new ArrayList<>();


adapter = new CardAdapter(this, cardModelList);

mLayoutManager = new GridLayoutManager(this, 2);
        mLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
            @Override
            public int getSpanSize(int position) {
                switch (adapter.getItemViewType(position)) {
                    case 1:
                        return 1;
                    case 2:
                        return 2;
                   case 3:
                        return 3;
                    default:
                        return 1;
                }
            }
        });

recyclerView.setLayoutManager(mLayoutManager);
        recyclerView.addItemDecoration(new GridSpacingDashboard(2, dpToPx(1), true));
        recyclerView.setItemAnimator(new DefaultItemAnimator());
        recyclerView.setAdapter(adapter);

Then Method to Prepare Card on MainActivity

 private void prepareCards() {


    int[] covers = new int[]{
            R.drawable.card_users,
            R.drawable.card_unit,
            R.drawable.card_request,
            R.drawable.card_request_pending,
            R.drawable.stats_main,
            R.mipmap.coinsicon_cards,

    };

   String[] stats = new String[]{
           userStatsFormated,villasStatsFormated,reqStatsFormated,pendingreqStatsFormated,"",pendingCollectionFormated,
    };


    CardModel c = new CardModel(stats[0], "Number Of Users", "", covers[0],null);
    cardModelList.add(c);
    c = new CardModel(stats[1], "Number", "", covers[1],null);
    cardModelList.add(c);
    c = new CardModel(stats[2], "Total", "", covers[2],null);
    cardModelList.add(c);
    c = new CardModel(stats[3], "Request", "", covers[3],null);
    cardModelList.add(c);
    c = new CardModel(stats[4], "Graph", "", covers[3],null);
    cardModelList.add(c);
    c = new CardModel(stats[5], "Pending", "", covers[4],null);
    cardModelList.add(c);

Card Adapter starting from onCreateView Holder

   @Override
    public CardViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        CardViewHolder rcv = null;

        switch (viewType)

        {
            case 1:
                View layoutView = LayoutInflater.from(parent.getContext()).inflate(R.layout.card_view_sec, null);
                rcv = new TopGridCardView(layoutView);
                break;
            case 2:
                View layoutView3 = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_recycler_view, null);

                chart = (BarChart) layoutView3.findViewById(R.id.chart1);
                BARENTRY = new ArrayList<BarEntry>();
                BarEntryLabels = new ArrayList<String>();

                AddValuesToBARENTRY();
                AddValuesToBarEntryLabels();

                Bardataset = new BarDataSet(BARENTRY, "Projects");

                BARDATA = new BarData(BarEntryLabels, Bardataset);

                Bardataset.setColors(ColorTemplate.COLORFUL_COLORS);
                chart.setData(BARDATA);
                chart.animateY(3000);
                rcv = new GraphCardView(layoutView3);
                break;
            case 3:
                View layoutView2 = LayoutInflater.from(parent.getContext()).inflate(R.layout.card_view, null);
                rcv = new BottomCardView(layoutView2);
                break;
      }

return rcv;



@Override
    public void onBindViewHolder(CardViewHolder holder, final int position) {
        CardModel cardModel = cardList.get(position);

        if (holder.getItemViewType() == 1) {
            TopGridCardView vholder = (TopGridCardView) holder;
            vholder.secTitleStats.setText(cardModel.getCardTitles());
            vholder.secNumStats.setText(cardModel.getNumStats());
            vholder.secCardStats.setText(cardModel.getSecCartNumStats());
            if (position == 0) {
                vholder.secthumbnail.setBackgroundColor(Color.parseColor("#137927"));
            }
            if (position == 1) {
                vholder.secthumbnail.setBackgroundColor(Color.parseColor("#E91E63"));
            }
            if (position == 2) {
                vholder.secthumbnail.setBackgroundColor(Color.parseColor("#02BBD2"));
            }
            if (position == 3) {
                vholder.secthumbnail.setBackgroundColor(Color.parseColor("#9900FF"));
            }
            Glide.with(mContext).load(cardModel.getThumbnail()).into(vholder.secthumbnail);

        }

        else if (holder.getItemViewType() == 2) {
            GraphCardView vholder = (GraphCardView) holder;
            vholder.BarChart.setData(BARDATA);


        }

        else if (holder.getItemViewType() == 3) {
                 BottomCardView vholder = (BottomCardView) holder;
                 vholder.numStats.setText(cardModel.getNumStats());
                 vholder.image_title.setText(cardModel.getCardTitles());
            }
}

Here setting get Items count and position returns

@Override
public int getItemViewType(int position) {
    if (isPositionHeader(position)) {
        return 2;
    }
    return 1;
}


@Override
public int getItemCount(){
    return 6;
}



private boolean isPositionHeader(int position) {
        if (position == 4) {
            return position == 4;
        }
        return position == 6;
    }

Solution

  • Your issue is that your size span lookup is expecting 3 different item types when in fact you have only 2, namely either a value of 2 or 1. Change the code in the size span lookup to:

    switch (adapter.getItemViewType(position)) {
                        case 1: //this is for view type 1 (grid item)
                            return 1;
                        case 2: //this is for view type 2 (full width item)
                            return 2;
                        default:
                            return 1; //will default to grid item
                    }
    
    private boolean isPositionHeader(int position) {
            if (position == 4 || position == 5) {
                return true;
            }
        }
    

    The size span lookup only determines how many columns an item should span, so in your example depending on the view type it will either be 2 columns or 1.