(Android - xml) Gridview and ImageView scale type centerCrop

Question

I'm trying to show a list of images in a GridView, and I want to crop only the center of the images in this list. So below is the layout of each image item:

<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/place_image"
        android:src="@drawable/ic_res"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:scaleType="centerCrop"/>

And here is the layout that contains the grid view:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <LinearLayout android:id="@+id/upload_view"
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  android:orientation="vertical"
                  android:background="#f6f6f6"
                  android:padding="10dp"
                  android:visibility="gone">
        <LinearLayout android:layout_width="match_parent"
                      android:layout_height="wrap_content"
                      android:orientation="horizontal">
            <ImageButton android:id="@+id/photo_select"
                    android:layout_width="50dp"
                    android:layout_height="40dp"
                    android:scaleType="fitXY"
                    android:src="@drawable/ic_photo"/>
            <EditText android:id="@+id/photo_caption"
                      android:layout_width="match_parent"
                      android:layout_height="wrap_content"
                      android:hint="@string/caption"
                      android:inputType="textMultiLine"/>
        </LinearLayout>
        <TextView  android:id="@+id/photo_path"
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:text="" />

        <Button android:id="@+id/photo_upload"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/upload_photo"
                android:textStyle="bold"
                android:textColor="#ffffff"
                android:layout_gravity="right"/>
    </LinearLayout>
    <TextView android:id="@+id/no_photos"
              android:layout_height="wrap_content"
              android:layout_width="match_parent"
              android:gravity="center"
              android:textStyle="bold"
              android:textSize="20dp"
              android:text="@string/no_photos"
              android:visibility="gone" />
    <GridView android:id="@+id/grid_photos"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="20dp"
            android:columnWidth="120dp"
            android:numColumns="auto_fit"
            android:verticalSpacing="10dp"
            android:horizontalSpacing="10dp"
            android:stretchMode="columnWidth"
            android:gravity="center" />
</LinearLayout>

And here is the result I got:

This is weird because the images are all cropped in a strange way like that. Below is one of my original images:

I've never encountered this problem so if any of you are familiar with this, please help me find the reason of this. Thank you!

P.s: I guess this can only be the problem of the xml layout so I don't think it is necessary to include my android source code here. But if it really is, please let me know where the problem may come from and I'll edit this question with my code.

Answer 1

The reason is GridView clears all the layout params set for the tiles and it set its own layout params so better you add your ImageView inside a RelativeLayout. This is the same with all the AdapterView like ListView,Gallery etc.