GridLayout(not GridView) - Spaces between the cells

29,144

Found the solution.

Making the following changes removed the spacings.

gridLayout = (GridLayout) findViewById(R.id.gridlayout_main);
gridLayout.setUseDefaultMargins(false);
gridLayout.setAlignmentMode(GridLayout.ALIGN_BOUNDS);
gridLayout.setRowOrderPreserved(false);

Refer to the image below.

enter image description here

Share:
29,144
Vamsi Challa
Author by

Vamsi Challa

Updated on July 25, 2022

Comments

  • Vamsi Challa
    Vamsi Challa almost 2 years

    I am using GridLayout(support) for displaying ImageViews in my application. There are 3 columns and 5 rows. The problem is that the cells in the GridLayout automatically get some space between them. I am not setting any padding or margin for the cells. Please refer to the image below. All cells are added dynamically and here is how I add these cells.

    Getting Screen Width and Height:

    Point size = new Point();
    getWindowManager().getDefaultDisplay().getSize(size);
    screenWidth = size.x;
    screenHeight = size.y;
    rowHeight = (int) (screenHeight * 0.2);
    

    Adding View to GridLayout:

        GridLayout.LayoutParams params = new GridLayout.LayoutParams(
                getSpec(rowColumn[0]), getSpec(rowColumn[1]));
    
        params.height = rowHeight;
    
        if (rowColumn[1].equalsIgnoreCase("col_full")) {
            params.width = (int) (screenWidth);
        } else if (rowColumn[1].equalsIgnoreCase("col_two_part")) {
            params.width = (int) (screenWidth * 0.6);
        } else {
            params.width = (int) (screenWidth * 0.3);
        }
    
        ImageButton image = (ImageButton) imageHashMap
                .get(reOrderedButtonsListCopy.get(i));
        image.setLayoutParams(params);
    
        gridLayout.addView(image, params);
    

    XML Layout:

    <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res/com.xx.xxx"
        android:id="@+id/scrollView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >
    
            <android.support.v7.widget.GridLayout
                xmlns:app="http://schemas.android.com/apk/res/com.xx.xxx"
                android:id="@+id/gridlayout_main"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_margin="2dp"
                app:columnCount="3"
                app:rowCount="5" >
            </android.support.v7.widget.GridLayout>
    
        </LinearLayout>
    
    </ScrollView>
    

    Current result:

    enter image description here

    The red lines show the spaces in between the cells. Also, there is some space on the left side of GridLayout. I have only given 2dp as layout_margin. Any reasons why this padding occurs?

    [EDIT]

    Making the following changes removed the spacings.

    gridLayout = (GridLayout) findViewById(R.id.gridlayout_main);
    gridLayout.setUseDefaultMargins(false);
    gridLayout.setAlignmentMode(GridLayout.ALIGN_BOUNDS);
    gridLayout.setRowOrderPreserved(false);
    

    Refer to the image below.

    enter image description here

  • G_V
    G_V over 9 years
    This is really good information, but I'd also like to point out that android:useDefaultMargins can be set to TRUE or FALSE in xml or overridden by providing a marginTop/Bottom/Left/Right. Personally I like uniformity so I create a <style> in style.xml, then put style=@style/YOURSTYLEHERE in the element. This makes re-use a lot simpler and doesn't stop you from inflating it to fill it dynamically later.
  • andrea.rinaldi
    andrea.rinaldi about 9 years
    The solution you found is correct and it really helped me out. But @G_V suggestion may help as well: it would be nice to edit the answer with its comment too :)
  • David Gay
    David Gay over 6 years
    Thanks for pointing me to useDefaultMargins and alignmentMode. Was exactly what I was looking for to add some spacing between the items.