gridview organized items like instagram

Question

I'm wroking in android app were I get my pictures from parse.com in a gridview, everything works well and my images are shown but not in the look I want to. my result

and this is how i want it to lookf like instagram look

This is the code for my grid :

<GridView 
    android:id="@+id/gridview"
    android:layout_height="match_parent" 
    android:layout_width="match_parent" 
    android:numColumns="3"
    android:horizontalSpacing="1dp"
    android:verticalSpacing="1dp"
    android:layout_below="@+id/header_shadow"
    android:listSelector="#00FFFFFF"/>

and this is my item :

<ImageView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/photo"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:scaleType="fitXY"/>

the pictures are saved in square dimensions, the thumbnails are shown in 200x200

Answer 1

Try using wrap_content or the actual image dimensions in the imageview rather than match_parent and a scaleType of center. fitXY allows your images to scale, not keeping their aspect ratio.

See http://www.techrepublic.com/article/clear-up-ambiguity-about-android-image-view-scale-types-with-this-guide/

Also this guide has a lot of detail about the different fit types

http://www.peachpit.com/articles/article.aspx?p=1846580&seqNum=2

Answer 2

Add this in your layout. It should fix your problem:

public class SquareImageView extends AppCompatImageView {
    public SquareImageView(Context context) {
        super(context);
    }

    public SquareImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public SquareImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, widthMeasureSpec);
    }
}