Android issue with image size in gridview

Question

I am trying to create a grid layout of cards similar to what is used in google play like this

enter image description here

The layout i am using and the layout obtained are these:

For GridView:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:background="#e5e5e5"
     >

    <GridView  
    android:id="@+id/gridview"
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"
    android:columnWidth="60dp"
    android:numColumns="2"
    android:layout_marginLeft="2dp"

    android:verticalSpacing="10dp"
    android:horizontalSpacing="10dp"
    android:stretchMode="columnWidth"
    android:gravity="center"
    />

</RelativeLayout>

for GridItem:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/bg_card"

>

<ImageView
    android:id="@+id/imgIcon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
     />

  <TextView
    android:id="@+id/txtTitle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="1dp"
    android:textSize="17sp"
    android:layout_below="@id/imgIcon"
    android:layout_marginTop="35dp"
    android:layout_centerInParent="true"/>
</RelativeLayout>

The output that I get is this:

enter image description here

The image size that i am using is 356x500. (I do get a somewhat well sized grid on using 300x300) The issues that i am facing are:

1.As this image shows, the cards are too big with lots of white spaces around the image and the image does not fit like in the google play store. How do i make the card be propotional to the image. The amount of white space changes with change in image size.
The card is "stuck" to the left edge of the screen . How do i keep spacing between the edge of the screen and the card.

Please help me in rectifying this issue. Thanks

Mohammod Hossain · Answer 1 · 2013-08-02T17:25:18.967

0

Space are bacause you used

android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"

Also edit your

<ImageView
    android:id="@+id/imgIcon"
    android:layout_width="300dp"
    android:layout_height="300dp"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
     />

in gridview use android:stretchMode="none" instead of android:stretchMode="columnWidth"

edited Aug 02 '13 at 17:25

answered Aug 02 '13 at 17:03

Mohammod Hossain

4,134
2
26
37

but isnt that for the space BETWEEN two cards? I changed it to 1dp but there is still lot of white space INSIDE every individual card around the image. Thanks – Shivam Bhalla Aug 02 '13 at 17:08
I am still getting the same result. There is still a lot of white space around the image and changing the spacing only reduces the space between the cards – Shivam Bhalla Aug 02 '13 at 17:19
space are depend on you screen size and how many image will be in per row and image size – Mohammod Hossain Aug 02 '13 at 17:22
so i need to change the image that i am using in order to achieve the desired layout? Isnt there any way i can strech the image to fit the card? – Shivam Bhalla Aug 02 '13 at 17:27
try to use android:stretchMode="none" in gridview layout and all codes will be unchanged – Mohammod Hossain Aug 02 '13 at 17:28
no changing the strech mode also doesnt work instead, the grid item become rectangles with very large height and very small width which are aligned to the left of the screen leaving the rest as blank.? – Shivam Bhalla Aug 02 '13 at 17:31
have you changed android:stretchMode="none" – Mohammod Hossain Aug 02 '13 at 17:34
add android:adjustViewBounds="true" – Mohammod Hossain Aug 02 '13 at 17:36
any thoughts on how to fix this? – Shivam Bhalla Aug 03 '13 at 06:43

score 0 · Answer 2 · answered Dec 26 '14 at 18:24

0

Put android:scaleType="fitStart" inside your

answered Dec 26 '14 at 18:24

zainoz.zaini

918
6
20

score 0 · Answer 3 · answered Mar 25 '17 at 06:40

0

Use imgIcon.setAdjustViewBounds(true); You can also do the same in the xml

answered Mar 25 '17 at 06:40

OrangePeel

9

Android issue with image size in gridview

3 Answers3