Why are my ImageViews being distorted on scrolling down?

Question

I am facing a peculiar problem. I have a gridview of Music Genres. In each grid item we can display upto 3 thumbnail images in cascaded fashion (similar to the Genres of Google Play Music). However as I scroll down the page and scroll back I find all the images in the different grid items have randomly shuffled.

proper layout https://i.stack.imgur.com/yc06v.png

distorted layout(random image) https://i.stack.imgur.com/DxoMC.png

Here is the segment of code that deals with the imageviews:

String[] al_id ={MediaStore.Audio.Albums.ALBUM_ID};
    String orderby = MediaStore.Audio.Albums.ALBUM_ID;
    Cursor albumcursor = context.getContentResolver().query(uri, al_id,null, null, orderby);
    Set<Long> set  = new LinkedHashSet<Long>();


    if(tempcursor.moveToFirst()){

        do{
            long id = tempcursor.getLong(tempcursor.getColumnIndexOrThrow(MediaStore.Audio.Media.ALBUM_ID));
            set.add(id);
        }while(tempcursor.moveToNext());

    }


    if(set.size()==1 ){
        Iterator<Long> it = set.iterator();

        long id = it.next();  
        ImageView albumArt = (ImageView) view.findViewById(R.id.albumart_zero);
        Bitmap img = getAlbumart(context, id);
        if(img != null)
            albumArt.setImageBitmap(img);
        else{
            Bitmap def = getDefaultAlbumArt(context);
            albumArt.setImageBitmap(def);

        }
    }
    else if(set.size()==2){
        Iterator<Long> it = set.iterator();
        long id = it.next();
        ImageView albumArt1 = (ImageView) view.findViewById(R.id.albumart_one);
        albumArt1.setScaleType(ImageView.ScaleType.FIT_XY);
        Bitmap img = getAlbumart(context, id);
        if(img != null)
            albumArt1.setImageBitmap(img);
        else{
            Bitmap def = getDefaultAlbumArt(context);
            albumArt1.setImageBitmap(def);

        }
        long id2 = it.next();
        ImageView albumArt2 = (ImageView) view.findViewById(R.id.albumart_two);
        albumArt2.setScaleType(ImageView.ScaleType.FIT_XY);
        Bitmap img2 = getAlbumart(context, id2);
        if(img2 != null)
            albumArt2.setImageBitmap(img2);
        else{
            Bitmap def = getDefaultAlbumArt(context);
            albumArt2.setImageBitmap(def);

        }
    }
    else if(set.size()>=3){
        Iterator<Long> it = set.iterator();

        long id = it.next();
        ImageView albumArt1 = (ImageView) view.findViewById(R.id.albumart_one);
        albumArt1.setScaleType(ImageView.ScaleType.FIT_XY);
        Bitmap img = getAlbumart(context, id);
        if(img != null)
            albumArt1.setImageBitmap(img);
        else{
            Bitmap def = getDefaultAlbumArt(context);
            albumArt1.setImageBitmap(def);

        }

        long id2 = it.next();
        ImageView albumArt2 = (ImageView) view.findViewById(R.id.albumart_two);
        albumArt2.setScaleType(ImageView.ScaleType.FIT_XY);
        Bitmap img2 = getAlbumart(context, id2);
        if(img2 != null)
            albumArt2.setImageBitmap(img2);
        else{
            Bitmap def = getDefaultAlbumArt(context);
            albumArt2.setImageBitmap(def);

        }

        long id3 = it.next();
        ImageView albumArt3 = (ImageView) view.findViewById(R.id.albumart_three);
        albumArt3.setScaleType(ImageView.ScaleType.FIT_XY);
        Bitmap img3 = getAlbumart(context, id3);
        if(img3 != null)
            albumArt3.setImageBitmap(img3);
        else{
            Bitmap def = getDefaultAlbumArt(context);
            albumArt3.setImageBitmap(def);

        }
    }

And here is the grid item layout:

<LinearLayout
android:layout_width="160dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="@color/metalList"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:elevation="4dp"
xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:clipToPadding="false"
    android:background="#E9E0D5">
    <ImageView
        android:id="@+id/albumart_zero"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="top"
        android:scaleType="centerCrop"
        android:layout_alignParentLeft="true"
        android:elevation="0dp"
        />

    <ImageView
        android:id="@+id/albumart_two"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_gravity="top"
        android:layout_alignParentRight="true"
        android:layout_margin="0dp"
        android:elevation="2dp"
        />
    <ImageView
        android:id="@+id/albumart_three"
        android:layout_width="80dp"
        android:layout_height="800dp"
        android:layout_gravity="top"
        android:layout_marginLeft="40dp"
        android:elevation="4dp"
        />
    <ImageView
        android:id="@+id/albumart_one"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_gravity="top"
        android:layout_margin="0dp"
        android:layout_alignParentLeft="true"
        android:elevation="10dp"
        />
</RelativeLayout>
<TextView
    android:id="@+id/genre_name"
    android:layout_height="25dp"
    android:layout_width="match_parent"
    android:textColor="@color/metalTextB"
    android:layout_marginTop="3dp"
    android:layout_marginLeft="10dp"
    android:textSize="16sp"
    android:typeface="sans"
    android:text="Genre"
    android:scrollHorizontally="true"
    android:ellipsize="end"
    android:maxLines="1"/>
<TextView
    android:id="@+id/genre_count"
    android:layout_width="match_parent"
    android:layout_height="15dp"
    android:layout_below="@id/genre_name"
    android:layout_marginLeft="15dp"
    android:layout_marginBottom="3dp"
    android:textColor="@color/metalTextS"
    android:textSize="13sp"
    android:text="artist"
    android:typeface="sans"
    android:scrollHorizontally="true"
    android:ellipsize="end"
    android:maxLines="1"/>
</LinearLayout>

Please help.

I guees you´re facing this problem because images have different resolutions, so you can use android:scaleType="" — Rene Limon, Aug 17 '15 at 18:02
@MidasLefko It gets the album art from ALBUM_ID of the media file. I have used exactly same methods in other views and have got perfect result. — Aritra Bhattacharyya, Aug 17 '15 at 18:22
It uses a thread or AsyncTask? If so, that might work elsewhere and mess up an adapter view like gridview where the views are recycled... — MidasLefko, Aug 17 '15 at 18:23
@MidasLefko No. I don't know how to use them. I am a novice. No idea about AsyncTask. Its simply a method in the same class. — Aritra Bhattacharyya, Aug 17 '15 at 18:24

score 0 · Answer 1 · answered Aug 17 '15 at 23:03

I realised that it has something to do with ImageViews being uninitialised. I noticed that of all the grid items the ones where all ImageViews were initialised did not get affected by the shuffling effect. Once I initialised all the image views with a default image, it worked perfectly.

Why are my ImageViews being distorted on scrolling down?

1 Answers1