Android Grdiview not displaying correctly

Question

We have built an online shopping app.

We have two layouts for gridview. The first one:

<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"
android:paddingLeft="0dp"
android:paddingRight="0dp"
android:paddingTop="0dp"
android:paddingBottom="0dp"
tools:context=".HomeActivity">
<GridView
     android:id="@+id/gridView"
     android:numColumns="3"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
</RelativeLayout>

And the second one for each gridview cell:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/singleCell"
android:layout_width="345px"
android:layout_height="400px"
android:background="#E6E6E6">

 <ImageView
    android:contentDescription="@string/hello_world"
    android:id="@+id/profileImg"
    android:layout_width="fill_parent"
    android:layout_height="330px"
    android:scaleType="fitXY"
    android:layout_marginLeft="1px"
    android:layout_marginTop="2px"/>

<TextView
    android:id="@+id/friend_name"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:text="Name"
    android:textColor="#000000"
    android:textStyle="bold"
    android:layout_marginTop="340px"
    android:layout_marginLeft="20px"
    android:textSize="13sp">
</TextView>

</FrameLayout>

The problem is that in some devices the gridview is displayed correctly like this and the ratio is ok.

gridview is displayed correctly on some devices

but in several other devices, the images height and ratio changes and the image is displayed incorrectly.

gridview is displayed incorrectly on some devices

We would be happy if you give us a solution and help us. This is a critical problem as the gridcell image height changes and gets longer in some devices.

Answer 1

You can try with changing the scale type of Imageview. Write this line

android:scaleType="centerCrop" 

instead of

android:scaleType="fitXY"