Android GridView not working properly on smaller and bigger screen devices

Question

I have a GridView in my Android app, which is having images. I have 10 rows and 2 columns in the GridView. With that, I have same size images in every grid i.e. 20 images.

The grid code is,

<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/gridview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:columnWidth="140dp"
android:drawSelectorOnTop="true"
android:gravity="center"
android:numColumns="2"
android:stretchMode="columnWidth"
android:verticalSpacing="5dp"
android:focusable="true"
android:clickable="true"
/>

Meanwhile in the java code, I have used an Adapter. Here's the code, which sets the individual grid size and images, with the scaleType,

        imageView = new ImageView(mContext);
        imageView.setLayoutParams(new GridView.LayoutParams(340, 400));
        imageView.setScaleType(ImageView.ScaleType.FIT_XY);
        imageView.setPadding(10, 10, 10, 10);

It's working fine on device screen size 5'0, but on other devices such as 5'7, 4'5, it's not working in the same way. The grids (and their individual images) are somewhat hiding/ cropping. Even under 5'0, it is showing some extra space, which looks poor.

How GridView works correctly on different screen sizes.

Here's a sample, how is it looking like in 5'7,

Here's a sample, how is it looking like in 5'0. This is how I want it to be visible on every screen size.

Here's a sample, how is it looking like in 4'0. Here the images are getting overlapped.

Answer 1

This code works like a charm for me in the Adapter:

// create a new ImageView for each item referenced by the Adapter
    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView imageView;
        if (convertView == null) {  

            //Calculation of ImageView Size - density independent.
            //maybe you should do this calculation not exactly in this method but put is somewhere else.
            Resources r = Resources.getSystem();
            float px = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 60, r.getDisplayMetrics());


            imageView = new ImageView(mContext);
            imageView.setLayoutParams(new GridView.LayoutParams((int)px, (int)px));
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            //imageView.setPadding(8, 8, 8, 8);
            imageView.setBackgroundColor(Color.BLUE);
        } else {
            imageView = (ImageView) convertView;
        }

        imageView.setImageResource(mThumbIds[position]);
        return imageView;
    }

Source: https://stackoverflow.com/a/11485625/7639113

After adding the code above, I also create a different layout for bigger screen, something like this:

normal_layout.xml

<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/gridview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:numColumns="2"
android:verticalSpacing="5dp"
/>

bigscreen_layout.xml

<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/gridview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:numColumns="4"
android:verticalSpacing="5dp"
/>

Note that I set numColumns differently for those layouts above.

Here is how I created layout for different screen sizes:

1. Create new Android resource directory in res

2. Change resource type to layout, select smallest screen width for the available qualifiers, then click ">>"

3. Fill in 600 in the smallest screen width, Android Studio will automatically generate layout-sw600dp directory. Click OK.

4. Now all you have to do is place normal_layout.xml in the layout directory, and place bigscreen_layout.xml in the layout-sw600dp directory.

You can look at the different screen size detail in the official Android guide "Supporting Multiple Screens".

Answer 2

You can use item view for your GridView same as ListView in your adapter as below:

public View getView(int position, View convertView, ViewGroup parent) {
    ViewHolder holder;

    if (convertView == null) {
        convertView = LayoutInflater.from(mContext).inflate(R.layout.item_grid, null);

        holder = new ViewHolder();
        holder.mImage = (ImageView) convertView.findViewById(R.id.img);
        convertView.setTag(holder);
    } else {
        holder = (ViewHolder) convertView.getTag();
    }
    holder.mImage.setImageResource(imageIDs[position]);
    return convertView;
}

public class ViewHolder {
    private ImageView mImage;
}

I have created item_grid as below:

<?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="wrap_content"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/grid_image"
        android:layout_width="match_parent"
        android:layout_height="130dp" />
</LinearLayout>

Suggestion: You can use RecyclerView with GridLayoutManager with 2 columns