How to Set Different Columns for Rows in Android Gridview

How to set different columns for rows in android gridview

I have something similar and i solved with the new RecyclerView.

I created a Fragment with an a RecyclerView.
RecyclerView on xml:

<android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/filter_subtypes" android:layout_width="match_parent" android:layout_height="match_parent" />

On your Fragment/Activity (OnViewCreated in my fragment case).
I find the RecyclerView and set an Adapter- a normal Adapter class inherit from RecyclerView.Adapter< YOUR VIEW HOLDER class >-
And then i create a GridLayoutManager

final GridLayoutManager mng_layout = new GridLayoutManager(this.getActivity(), TOTAL_CELLS_PER_ROW/*In your case 4*/);



Then i override this method to set a dynamic numbers of columns (cells)

mng_layout.setSpanSizeLookup( new GridLayoutManager.SpanSizeLookup() {
@Override
public int getSpanSize(int position) {
switch( adapterSubtype.getItemViewType(position) ) {
case FilterSubtypesAdapter.TYPE_LOW:
return TOTAL_CELLS_PER_ROW;
case FilterSubtypesAdapter.TYPE_HIGH:
return 2;
default:
return -1;
}
}
});
myRecyclerView.setLayoutManager(mng_layout);

With this you will get dynamic numbers of cell on your rows.

EXTRA:
Then if you are using the same view/type view on your adapter, you will get the same w & h view. You will need to create 2 xml views for TYPE_HIGH and other view for TYPE_LOW.

So, in your adapter, you need to have 2 kind of data (1 for high images and 1 for low images).
You must override this methods

@Override
public SubtypeViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = null;
if (viewType==TYPE_HIGH) {
view = inflater.inflate(R.layout.item_image_high, parent, false);
} else {
view = inflater.inflate(R.layout.item_image_low, parent, false);
}
return new SubtypeViewHolder(view, viewType);
}

@Override
public int getItemViewType(int position) {
return (list.get(position).getType()==Subtype_type.HIGH) ? TYPE_HIGH : TYPE_LOW;
}

I hope i was clear, any problem tell me.

GridView with Different Columns in Each row

You can try this library according to your need. Alternatively you can edit the source code for you requirements.

It is simple android TagView library.

Android grid view Change number of columns depending on data

You need to spacify viewType in recycler adapter.

DEMO HERE

public class RVStatisticAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {

private List<Statistic> mList;

public RVStatisticAdapter(List<Statistic> list) {
this.mList = list;
}

@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view;

switch (viewType) {
case CITY_TYPE:
view = LayoutInflater.from(parent.getContext()).inflate(R.layout.statistic_row_one, parent, false);
return new CityViewHolder(view);
case EVENT_TYPE:
view = LayoutInflater.from(parent.getContext()).inflate(R.layout.statistic_row_two, parent, false);
return new EventViewHolder(view);
}
return null;
}

@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
Statistic object = mList.get(position);
if (object != null) {
switch (object.getType()) {
case CITY_TYPE:
((CityViewHolder) holder).mTitle.setText(object.getTitle());
((CityViewHolder) holder).no.setText(object.getNo());
((CityViewHolder) holder).playerone.setText(object.getPlayer_one());

break;
case EVENT_TYPE:
((EventViewHolder) holder).mTitle.setText(object.getTitle());
((EventViewHolder) holder).no.setText(object.getNo());
((EventViewHolder) holder).playerone.setText(object.getName());
((EventViewHolder) holder).playertwo.setText(object.getPlayer_two());
break;
}
}
}

@Override
public int getItemCount() {
if (mList == null)
return 0;
return mList.size();
}

@Override
public int getItemViewType(int position) {
if (mList != null) {
Statistic object = mList.get(position);
if (object != null) {
return object.getType();
}
}
return 0;
}

public static class CityViewHolder extends RecyclerView.ViewHolder {
private TextView mTitle,no,playerone;

public CityViewHolder(View itemView) {
super(itemView);
mTitle = (TextView) itemView.findViewById(R.id.tv_title);
no = (TextView) itemView.findViewById(R.id.tv_no);
playerone = (TextView) itemView.findViewById(R.id.tv_player_one);

}
}

public static class EventViewHolder extends RecyclerView.ViewHolder {
private TextView mTitle,no,playerone,playertwo;

public EventViewHolder(View itemView) {
super(itemView);
mTitle = (TextView) itemView.findViewById(R.id.tv_title);
no = (TextView) itemView.findViewById(R.id.tv_no);
playerone = (TextView) itemView.findViewById(R.id.tv_player_one);
playertwo = (TextView) itemView.findViewById(R.id.tv_player_two);
}
}
}

GridView with different column width in rows

See code below

I have created demo and working fine

  rv = (RecyclerView) findViewById(R.id.rv);
final MyAdapter adapter = new MyAdapter();
rv.setAdapter(adapter);
GridLayoutManager mLayoutManager = new GridLayoutManager(this, 2);
rv.setLayoutManager(mLayoutManager);

mLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
@Override
public int getSpanSize(int position) {
if (adapter.getItemCount() == 1) {
return 2;
} else if (adapter.getItemCount() == 2) {
return 1;
} else if (adapter.getItemCount() == 3) {
if (position == 0) {
return 2;
} else {
return 1;
}
} else {

return 1;

}

}
});

How to make a grid with 2 columns with different sizes?

You can use Linear layout with weight and weight sum for it. It dynamically divides the screen according to ratio. what u want. Use below scatch to understand the pattern

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/tempo_activity"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="10">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="7">

<!--add 30% content here -->

</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="3">

<!--add 70% content here -->

</LinearLayout>

</LinearLayout>

</LinearLayout>

GridView with different number of columns according to the number of row

Finally I have solved this problem.I have tried with Raghunandan and user3278416's suggestion.And did all the stuff in runtime except Table layout.Here is the xml file:

 <ScrollView  android:layout_width="match_parent"
android:layout_height="match_parent">
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/table_layout"
>


And the the two layouts one is for small layout(the second row) and one is for large one(first row):

  <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="130dp"
android:layout_height="160dp"
android:layout_margin="3dp"
android:background="@drawable/big_product_bg" >
<ImageView
android:id="@+id/img_offersrowlayout"
android:layout_width="120dp"
android:layout_height="80dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:scaleType="fitXY"
android:src="@drawable/img_bydefault" />

<TextView
android:id="@+id/txt_title_offerrowlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/img_offersrowlayout"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="8dp"
android:gravity="center_horizontal"
android:singleLine="true"
android:text="BenQ Digital camera"
android:textColor="@color/green_app"
android:textSize="15dp"
android:textStyle="bold" />

The small one:

<RelativeLayout
android:layout_width="90dp"
android:layout_height="160dp"
android:layout_margin="3dp"
android:background="@drawable/big_product_bg" >

<ImageView
android:id="@+id/img_offersrowlayout"
android:layout_width="90dp"
android:layout_height="80dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:scaleType="fitXY"
android:src="@drawable/img_bydefault" />

<TextView
android:id="@+id/txt_title_homesmallrowlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/img_offersrowlayout"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="8dp"
android:gravity="center_horizontal"
android:singleLine="true"
android:text="BenQ Digital camera"
android:textColor="@color/green_app"
android:textSize="15dp"
android:textStyle="bold" />

Now the Java Code:

 int leftMargin_small=2;
int topMargin_small=5;
int rightMargin_small=2;
int bottomMargin_small=5;

int j = 0;
while (Show.size()>j) {

try {
LayoutInflater inflater = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
TableRow.LayoutParams param = new TableRow.LayoutParams(
LayoutParams.MATCH_PARENT,
LayoutParams.MATCH_PARENT, 1.0f);
param.setMargins(leftMargin_small, topMargin_small, rightMargin_small, bottomMargin_small);
LinearLayout layout1 = new LinearLayout(getApplicationContext());
TableRow.LayoutParams param_layout = new TableRow.LayoutParams(
LayoutParams.MATCH_PARENT,
LayoutParams.MATCH_PARENT, 1.0f);
layout1.setLayoutParams(param_layout);
View question = inflater.inflate(R.layout.offers_rowlayout, null);

question.setLayoutParams(param);
//question.setId(pos);
TextView title = (TextView) question.findViewById(R.id.txt_title_offerrowlayout);
title.setText(""+">>"+Show.get(j).get("name"));

View question1 = inflater.inflate(R.layout.offers_rowlayout, null);
//question.setId(pos);
question1.setLayoutParams(param);
TextView title1 = (TextView) question1.findViewById(R.id.txt_title_offerrowlayout);
title1.setText(""+">>"+Show.get(j+1).get("name"));

View question_small = inflater.inflate(R.layout.home_row_small_layout, null);
//question.setId(pos);
question_small.setLayoutParams(param);
TextView title_small = (TextView) question_small.findViewById(R.id.txt_title_homesmallrowlayout);
title_small.setText(""+">>"+Show.get(j).get("name"));

View question1_small = inflater.inflate(R.layout.home_row_small_layout, null);
//question.setId(pos);
question1_small.setLayoutParams(param);
TextView title1_small = (TextView) question1_small.findViewById(R.id.txt_title_homesmallrowlayout);
title1_small.setText(""+">>"+Show.get(j+1).get("name"));

View question2_small = inflater.inflate(R.layout.home_row_small_layout, null);
//question.setId(pos);
question2_small.setLayoutParams(param);
TextView title2_small = (TextView) question2_small.findViewById(R.id.txt_title_homesmallrowlayout);
title2_small.setText(""+">>"+Show.get(j+2).get("name"));
if (gett) {
TableRow tr = new TableRow(getApplicationContext());

TableLayout.LayoutParams trParams = new TableLayout.LayoutParams(
TableLayout.LayoutParams.MATCH_PARENT,
TableLayout.LayoutParams.MATCH_PARENT,1);
// trParams.setMargins(leftMargin, topMargin, rightMargin, bottomMargin);
tr.setLayoutParams(trParams);
layout1.addView(question);
layout1.addView(question1);
tr.addView(layout1);
tablee.addView(tr);
gett = false;
j = j+2;
}
else
{
TableRow tr = new TableRow(getApplicationContext());

TableLayout.LayoutParams trParams = new TableLayout.LayoutParams(
TableLayout.LayoutParams.MATCH_PARENT,
TableLayout.LayoutParams.MATCH_PARENT,1);

layout1.addView(question_small);
layout1.addView(question1_small);
layout1.addView(question2_small);
tr.addView(layout1);
tablee.addView(tr);
gett = true;
j = j+3;
}

} catch (Exception e) {
e.printStackTrace();
}

}

Here Show is the arraylist of hashmap type and tablee is the tablelayout object which I have made in Xml file.



Related Topics



Leave a reply



Submit