Gyuzal R Gyuzal R - 25 days ago 5
Android Question

Adjust GridView with ImageViews to different screen sizes, Android

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.

Answer

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