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

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);

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

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