How to manage empty span in GridLayoutManager? - android

I am setting up contact directory in section recyclerview with grid layout manager, what my problem is that header is also set as an item in the span if the span is empty.
I tried using the SpanSizeLookup method. It's not working as I expected.
layoutManager = new GridLayoutManager(getActivity(), 3);
layoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
#Override
public int getSpanSize(int position) {
switch(adapterDocument.getItemViewType(position)){
case SectionedRecyclerViewAdapter.VIEW_TYPE_HEADER:
return 3;
case SectionedRecyclerViewAdapter.VIEW_TYPE_ITEM_LOADED:
return 1;
default:
return 1;
}
}
});
This is what I get
And this is what I really wants:
How to make header should be in next line with full width? Thank you.

there is something with your code, I changed the code in onCreateView from Example1 to:
sectionAdapter = new SectionedRecyclerViewAdapter();
for(char alphabet = 'A'; alphabet <= 'Z';alphabet++) {
List<String> contacts = getContactsWithLetter(alphabet);
if (alphabet == 'B' || alphabet == 'D') {
contacts = Collections.emptyList();
}
if (contacts.size() > 0) {
sectionAdapter.addSection(new ContactsSection(String.valueOf(alphabet), contacts));
}
}
RecyclerView recyclerView = (RecyclerView) view.findViewById(R.id.recyclerview);
GridLayoutManager glm = new GridLayoutManager(getContext(), 3);
glm.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
#Override
public int getSpanSize(int position) {
switch(sectionAdapter.getSectionItemViewType(position)) {
case SectionedRecyclerViewAdapter.VIEW_TYPE_HEADER:
return 3;
default:
return 1;
}
}
});
recyclerView.setLayoutManager(glm);
recyclerView.setAdapter(sectionAdapter);
and it's working fine, this is the result:

Related

How to change to GridLayoutManager column dynamically

I have a Recycler view with GridLayoutManager attached. By Default, it will display ONE COLUMN and if user will click on button, it will displays in TWO COLUMN.
adapter = new ProductAdapter(getActivity(), productList);
gridLayoutManager = new GridLayoutManager(getActivity(), 1);
setLayoutManager(true);
below is function where i am changing columns
private void setLayoutManager(boolean isList) {
if (isList) {
adapter.VIEW_TYPE = 0 ;
gridLayoutManager.setSpanCount(1);
//product_recycler_view.setLayoutManager(new LinearLayoutManager(getActivity(), LinearLayoutManager.VERTICAL, false));
product_recycler_view.setLayoutManager(gridLayoutManager);
} else {
adapter.VIEW_TYPE = 1 ;
gridLayoutManager.setSpanCount(2);
product_recycler_view.setLayoutManager(gridLayoutManager);
}
product_recycler_view.setAdapter(adapter);
adapter.notifyDataSetChanged();
// product_recycler_view.notify();
// product_recycler_view.notifyAll();
System.out.println("clicked isList "+ isList);
}
try this
private void setLayoutManager(boolean isList) {
if (isList) {
product_recycler_view.setLayoutManager(new LinearLayoutManager(this));
} else {
product_recycler_view.setLayoutManager(gridLayoutManager);
}
product_recycler_view.setAdapter(adapter);
adapter.notifyDataSetChanged();
// product_recycler_view.notify();
// product_recycler_view.notifyAll();
System.out.println("clicked isList "+ isList);
}

Grid Recyclerview with 3 columns in even number row and 4 columns in odd number row

How to create a Grid Recyclerview with 3 columns in even number row and 4 columns in odd number row?
lLayout = new GridLayoutManager(getActivity(), 4, LinearLayoutManager.VERTICAL, false); // MAX NUMBER OF SPACES
lLayout.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
#Override
public int getSpanSize(int position) {
return (position % 3 == 0 ? 3 : 4);
}
});
recyclerView = (RecyclerView) view.findViewById(R.id.recyclerView);
recyclerView.setLayoutManager(lLayout);
if (arrayList != null) {
adapter = new RecyclerViewAdapter(getActivity(), arrayList);
recyclerView.setAdapter(adapter);
}
Try this,
// Create a grid layout with 12 columns
// (least common multiple of 3 and 4)
GridLayoutManager manager = new GridLayoutManager(this, 12, GridLayoutManager.VERTICAL, false);
manager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
#Override
public int getSpanSize(int position) {
// 7 is the sum of items in one repeated section
switch (position % 7) {
// first three items span 3 columns each
case 0:
case 1:
case 2:
return 4;
// next four items span 2 columns each
case 3:
case 4:
case 5:
case 6:
return 3;
}
throw new IllegalStateException("internal error");
}
});
recyclerView.setLayoutManager(manager);
Try something like this
layoutManager = new GridLayoutManager(getActivity(), 4);
layoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
#Override
public int getSpanSize(int position) {
if (position % 3 == 0)
return 3;
else
return 4;
}
});
recyclerView.setLayoutManager(layoutManager);
Hope this helps

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;
}
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.

Set last grid to full width using GridLayoutManager (RecyclerView)

I am using a RecyclerView with GridLayoutManager to show some items in grid pattern. It's working good and showing items in 2 columns inside grid.
But when the number of items is odd, I want that the last item has to be full width (same as width of RecyclerView).
Is there anyway to do it using GridLayoutManager or I have to build custom design?
Please help.
You could use layoutManager.setSpanSizeLookup method from GridLayoutManager
Here is the way to use that
final GridLayoutManager layoutManager = new GridLayoutManager(context, 2);
layoutManager.setOrientation(LinearLayoutManager.VERTICAL);
layoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
#Override
public int getSpanSize(int position) {
if (mAdapter != null) {
switch (mAdapter.getItemViewType(position)) {
case 1:
return 1;
case 0:
return 2; //number of columns of the grid
default:
return -1;
}
} else {
return -1;
}
}
});
Now you have to determine the viewType in your adapter
#Override
public int getItemViewType(int position) {
return (position == getItemCount() - 1) ? 0 : 1; // If the item is last, `itemViewType` will be 0
}
Keep building better apps!!

update SpanSizeLookup after item removal in recyclerview

I am using GridLayoutManager for recyclerview with spansize of 1 and 2
GridLayoutManager.SpanSizeLookup spanSizeLookup = new GridLayoutManager.SpanSizeLookup() {
#Override
public int getSpanSize(int position) {
switch (adapter.getItemViewType(position)) {
case TYPE_HEADING:
return 1;
default:
return 2;
}
}
};
RecyclerAdapter adapter = new RecyclerAdapter(mContext, arrItems);
recyclerView.setLayoutManager(gridLayoutManager);
recyclerView.setAdapter(adapter);
The recyclerview shows perfectly. But then if I remove one item from the recyclerview the spansize reverses ie spansize for TYPE_HEADING becomes 2 and 1 otherwise.
Code to remove item.
arrItems.remove(position);
notifyItemRemoved(position);
How to fix this

Categories

Resources