1

I want to show some image thumbnails (images are square) in a GridView with these constraints that each row shows exactly two image and images fit the screen width (except padding and margins) but have a max width and height (for example 1 inch)
I've read questions but can't resolve the problem. Can you please help me.

GridView xml:

<GridView
    android:id="@+id/gridview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:horizontalSpacing="10dp"
    android:numColumns="2"
    android:scrollbarStyle="outsideOverlay"
    android:scrollbars="vertical"
    android:stretchMode="columnWidth"
    android:verticalScrollbarPosition="right"
    android:verticalSpacing="10dp"
    android:padding="10dp" />

GridView items xml: 

<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/thumbnail"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:scaleType="fitXY"
    android:maxWidth="72pt"
    android:maxHeight="72pt"
    />

I've added two pictures to show what exactly I want

Grid view in a 4 inches mobile

Grid view in a 7 inches tablet

First picture (4 inches cell phone) is exactly what I want, but as screen width grows (tablets or landscape orientation) like image 2, I want to enlarge the image items. (Note that there is a max width size so result in this mode is not same as cell phone pictured in image 1)

Alireza Farahani
  • 2,238
  • 3
  • 30
  • 54

4 Answers4

1

you will have to calculate the needed horizontal spacing yourself.

since the result is in pixels, and you probably want to handle with real sizes (like inch or DPs), you will first need to convert your constraints to pixels. for example, in order to convert DPs to pixels, use:

float px = someDpValue * context.getResources().getDisplayMetrics().density;

then, you can use this method to get the size of the gridView, and then you will be able to do calculations and set the gridView and its adapter accordingly.

you will probably need to set the horizontal spacing and the height of each column.

do note that if the imageViews inside the grid will be given with non-square images, they will keep their aspect ratio, so you will have to deal with it too. you can use center-crop as scaling type, or just stretch the images.

Community
  • 1
  • 1
android developer
  • 114,585
  • 152
  • 739
  • 1,270
  • Thanks a lot. I've improved my question because I think it wasn't clear enough. Assuming I have GridView size in pixel, how can I achieve those two state that I pictured in my question? – Alireza Farahani Aug 06 '13 at 08:06
  • do you also assume anything about the resolution (width,height) of the input images ? for the measurement unit , you can use inch (for example , use "1.5in" ). also, i'm not sure what is now the problem. you just have to calculate the sizes you need according to the constraints you've decided about. – android developer Aug 06 '13 at 08:46
0

Have You tried to set layout_width of ImageView in GridView's item layout to match_parent?

Kostek
  • 147
  • 13
0

You need to extend imageview to create an imageview where the height always matches the width. Then use this view instead of the stock imageview and set layout width and height to match_parent. And remove the maxWidth and maxHeight.

w.donahue
  • 10,790
  • 13
  • 56
  • 78
0

This is something I've just tested:

Because you add GridView in xml it has been drawn in moment when you are setting adapter so onMeasure was called. In that matter you can get gridView's width (real value) using GridView.getWidth() and pass it to the adapter's instance. Then you can use it to set width and height of items (in getView() method), of course you have to manually calculate margins, but paddings work perfectly if defined in item's layout xml

Kostek
  • 147
  • 13