How to set an Android GridView with different column sizes

Question

I have a GridView in my main layout as follows:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <GridView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/gridview"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="center"
        android:horizontalSpacing="1dp"
        android:stretchMode="columnWidth"
        android:verticalSpacing="1dp" />

</LinearLayout>

which produces a grid like this

the contents of each cell is a layout like this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:background="@drawable/btn_measurement" >

    <Button
        android:id="@+id/numerical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="---" />

</LinearLayout>

But I want the 4th column to be one-third of other columns and I just can't.

I checked the links:

GridView with different column sizes and Android GridView Column Stretching

but they were of no help. :(

if you think that I need to change my solution entirely please be more precise than just giving a general clue. Thanx

Selfopinionated

you need a staggered View . see github.com/gabrielemariotti/cardslib\ – Insoluble

Answer 1

Use a RecyclerView (instead of GridView) with a custom GridLayoutManager, as shown here under 'Variable span size': http://blog.sqisland.com/2014/12/recyclerview-grid-with-header.html

You would basically make each regular column take up 3x, and the smaller column take up 1x.

GridLayoutManager manager = new GridLayoutManager(this, 10); // 3 cols of 3 + 1 col of 1
manager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
  @Override
  public int getSpanSize(int position) {
    if (position % 4 == 3)
       return 1; // Fourth column is 1x
    else
       return 3; // Remaining columns are 3x
  }
});
recyclerView.setLayoutManager(manager);

Moue

Answer 2

use this code to make size of column small but here u have to apply some logic . the 4 th column you want it to be small so u have to override the getView() method and then give use some variable and check that if that variable is 3 or 7 or 11... then make the size of button small . i think u got my point....

    int logic =3;
    public View getView(int position, View convertView, ViewGroup parent) {
          Button btn;
          LinearLayout layout;
          if (convertView == null) {

            convertView = inflate the layout and initialize convertview

          if(position % logic==0)
    converView..setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT,
                                                                LinearLayout.LayoutParams.FILL_PARENT,
                                                              (float) 0.3));


        btn = new Button(context);
        btn.setGravity(Gravity.RIGHT);
        btn.setPadding(5, 5, 5, 5);


        layout = new LinearLayout(context);
        layout.setOrientation(0);
        layout.setPadding(5, 5, 5, 10);

        btn.setText(names[position]);

        layout.addView(btn);
    }
    else {
        layout = (LinearLayout) convertView;
        btn = (Button) layout.getChildAt(0);
        btn.setText(names[position]);

    }

    return layout;
}

Brine

Well, this reduces the size of the title TextView and the buttons inside the 4th column, but won't reduce the size of the 4th column specifically. Meaning that only the buttons and the TextView will shrink, not the column. – Selfopinionated

ok u are right but now u can do this to converView by setting layoutparams – Brine

converView..setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT, (float) 0.3)); At this line covertView is null, so obviously it will give an exception here. What to do with it? – Efferent

you check/debug it and see .. its not null. – Brine

converView..setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT, (float) 0.3)); At this line covertView is null, so obviously it will give an exception here. What to do with it? It is throwing null pointer exception. – Beverlybevers

@KailashDabhi Hey your solution is not working. It is throwing null pointer exception – Devotion

Answer 3

I once use this solution

GridView with different column sizes

By using List View instead of Grid view, and put 4 buttons in one horizontal linear layout for each item. But you need an extra work to detect the button click, but I think it's doable

Another work that I can find is by using 3rd party library such as this one https://github.com/felipecsl/AsymmetricGridView

Weller