Gridview and column size on multiple devices

Question

I'm trying to create a gridview that fits perfectly whatever the screensize is. When I read the many examples or SO answers about this subject, the only thing that I found is : put some "dimensions.xml" files in each values-size folder and let gridview adapt the number of column and automagic spacing. The problem is that sometimes, the spacing is too big and make the result really ugly.

My question is : what if I don't want to put a size and want to manage the gridview with a pixel precision ? Any example would be welcomed.

Just to be clear : for example I want x columns with 4 pixels spacer between each columns, so I need to calculate the better size of the columns for that and specify it to the gridview. The idea is to render things like in google play store app where there is always the same space between gridelement on every device (the column is adjusted to the screen size).

Edit : here's the code I'm using right now... It comes from an example of Romain Guy where he shows how to display a grid view.

    // This listener is used to get the final width of the GridView and then calculate the
    // number of columns and the width of each column. The width of each column is variable
    // as the GridView has stretchMode=columnWidth. The column width is used to set the height
    // of each view so we get nice square thumbnails.
    mGridView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
        @Override
        public void onGlobalLayout() {
            if (mAdapter.getNumColumns() == 0) {
                final int numColumns = (int) Math.floor((double) mGridView.getWidth() / (mImageThumbSize + mImageThumbSpacing));
                if (numColumns > 0) {
                    final int columnWidth = mGridView.getWidth() / numColumns - mImageThumbSpacing;
                    mAdapter.setNumColumns(numColumns);
                    mAdapter.setItemHeight(columnWidth);
                }
            }
        }
    });

mImageThumbSize and mImageThumbSpacing comes from dimension files. What I'm looking for is a way to calculate automatically the best number of columns according to the screen size. For example : low res phone 2 columns, phone 3 columns, small tablet 4, tablet 5, big tablet 6. The main issue is that a phone can give the same gridview size than a tablet so I can't rely on pure screen size calculation.

Answer 1

It is a really bad practice to use pixel like a dimension in an android application, because you have a wide range of resolutions from 240x320 to 800x1280 and more, for some resolutions 4pixels can look great but in other it does not. It is better if you use dp or sp (screen points).

Making a grid in the way you want is a bit complicated. I made one and I had to create a xml definition for each resolution (ldpi, mdpi, hdpi, xhdpi, xxhdpi), and set dimension for each one, basically the xml defined a grid (only one box) then a create my grid view like a set of all these grid definition.

Other thing you can do is calculate the screen resolution (widthxheight) in runtime and set specifics dimensions in pixels for each one.

For example this is my xml definition of a grid row for a hdpi resolution.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/relativeLayout"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@color/fondoPantalla"
    android:padding="10sp" >

    <ImageView
        android:id="@+id/imagen"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:src="@drawable/llamada" />

    <TextView
        android:id="@+id/texto"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/imagen"
        android:layout_centerHorizontal="true"
        android:text="@string/llamada"
        android:textColor="@color/letraTexto1"
        android:textSize="18sp" />

</RelativeLayout>

I set the grid rows in my activity for the GridView, I used 2 columns.

But it is really important define dimensions for all resolutions. Something generic for all dimensions does not exists. Try not to use pixels, because in some resolutions it can be excessive and in others it might not.

Answer 2

For calculate the with and height to the screen can user the next code, for know the specific resolution in point of the screen too.

Display display = getActivity().getWindowManager().getDefaultDisplay();
DisplayMetrics metrics = new DisplayMetrics();
display.getMetrics(metrics);

int width = display.getWidth();
int height = display.getHeight();

switch (metrics.densityDpi) {
    case DisplayMetrics.DENSITY_LOW:

        break;
    case DisplayMetrics.DENSITY_MEDIUM:

        break;
    case DisplayMetrics.DENSITY_HIGH:

        break;
    case DisplayMetrics.DENSITY_XHIGH:

        break;
    case DisplayMetrics.DENSITY_XXHIGH:

        break;
}

for set a pixel dimension to a view you need use a LayoutParams object (exist a lot of LayoutParams objects, you need user the LayoutParams of the View that contain the View that you are modifying) for example if I have a view in a RelativeLayout I need to user the LayoutParams of the RelativeLayout.

view.setLayoutParams(new android.widget.RelativeLayout.LayoutParams(width, width));