Adjust GridView with ImageViews to different screen sizes, Android

Question

I'd so appreciate if someone could advise on below.

My GridView has 3 columns that will be filled with ImageViews:

 <GridView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/grid_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:layout_marginRight="10dp"
        android:layout_marginLeft="10dp"
        android:numColumns="3"
        android:columnWidth="0.3dp"
        android:horizontalSpacing="20dp"
        android:verticalSpacing="20dp"
        android:stretchMode="columnWidth">
    </GridView>

The Adapter that adds ImageViews into the grid cells:

@Override
public View getView(int position, View convertView, ViewGroup parent) {

    ImageView imageView = new ImageView(mContext);
    imageView.setImageResource(mThumbIds.get(position));
    imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
    imageView.setLayoutParams(new GridView.LayoutParams(300, 300));//problem here

    return imageView;
}

My images are all of the size 358x385px.

It works fine on bigger screens but fails on smaller ones (for example 4", 800x480). I'm not sure how to set LayoutParams to be like 1/3 of the screen width and the height to form a square.

I wouldn't like to add more images with appropriate sizes for different screen densities, instead I want to resize ImageViews only.

try to set value of margin left -right and horizontalSpacing-verticalSpacing through values not hard coded PLUS change image view property imageView.setScaleType(ImageView.ScaleType.FIT_CENTER); to FIT_XY . — Radhey, Nov 14 '16 at 04:53
@Radhey, and what should be the size of ImageView to form a square? — Gyuzal, Nov 14 '16 at 05:07
that is depends on your app screens , you have to calculate ratio for your image view width and height and set it in to different values folder,then access their values not directly put it (300,300) ,for calculation refer ic_launcher icon of different folder . — Radhey, Nov 14 '16 at 05:51
for reference plz refer http://stackoverflow.com/questions/5350624/set-icon-for-android-application and http://stackoverflow.com/questions/32860815/how-to-define-dimens-xml-for-every-different-screen-size-in-android. — Radhey, Nov 14 '16 at 05:51

score 0 · Accepted Answer · answered Nov 14 '16 at 05:31

Follow this code for squre gridview to all device compitible.

Step :1 Create one class SquareImageView.class that extends Imageview.

public class SquareImageView extends ImageView {

public SquareImageView(Context context) {
    super(context);
}

public SquareImageView(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public SquareImageView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    setMeasuredDimension(getMeasuredWidth(), getMeasuredWidth()); //Snap to width
}
}

Step :2 Change your adapter like this.

@Override
public View getView(int position, View convertView, ViewGroup parent) {

SquareImageView imageView = new SquareImageView (mContext);
imageView.setImageResource(mThumbIds.get(position));
imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);

return imageView;
}

And your xml like this

<GridView
    android:id="@+id/grid_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:numColumns="3"
    android:gravity="center"
    android:padding="3dp"
    android:stretchMode="columnWidth"
    android:horizontalSpacing="2dp"
    android:verticalSpacing="2dp"
    />

And test in small screen device..It will help you

Adjust GridView with ImageViews to different screen sizes, Android

1 Answers1

Linked