Htykuut

i'm new to Xamarin android(which is very similar to android). I created a Gridview having images(from google images) with title the images stored in local db as a blob. when i scrolling it down its totally messing up. Here my code

activity_main.xml

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:minWidth="25px"

    android:minHeight="25px">

    <android.support.design.widget.TabLayout

        android:id="@+id/tablayout_navigation"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:background="#A5BFB6"

        android:layout_alignParentTop="true"

        android:elevation="6dp"

        android:minHeight="?attr/actionBarSize"

        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

    <android.support.v4.view.ViewPager

        android:id="@+id/pager"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:layout_margin="2dp" />

</LinearLayout>

album1_fragment.xml

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

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

             xmlns:fab="http://schemas.android.com/apk/res-auto"

             android:layout_width="match_parent"

             android:layout_height="match_parent"



             android:id="@+id/album_frame_layout">



   <GridView xmlns:android="http://schemas.android.com/apk/res/android"

   android:id="@+id/albumsGridView"

   android:layout_width="fill_parent" 

   android:layout_height="fill_parent"

   android:columnWidth="100dp"

   android:numColumns="2"

   android:stretchMode="columnWidth"

   android:gravity="center"

    />        



</FrameLayout>

album_adapter.xml

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:orientation="vertical"

    android:padding="5dp">



    <ImageView

        android:id="@+id/albumImageView"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginRight="10px"

        android:layout_gravity="center" />



    <TextView

        android:id="@+id/albumName"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:fontFamily="trebuchet"

        android:textSize="15sp"

        android:lines="2"

         android:layout_marginTop="5px"

        android:textStyle="bold" />



</LinearLayout>

AlbumAdapter.cs

public class AlbumAdapter : BaseAdapter<Albums>

    {

        public List<Albums> albumData;

        public List<Albums> _items;

        Activity context;





        public AlbumAdapter(Activity context, IEnumerable<Albums> albumData)

        {

            _items = albumData.OrderBy(s => s.AlbumName).ToList();



            this.context = context;

        }





        public override Albums this[int position]

        {

            get

            {

                return _items[position];

            }

        }



        public override int Count

        {

            get

            {

                return _items.Count;

            }

        }





        public override long GetItemId(int position)

        {

            return position;

        }



        public override View GetView(int position, View convertView, ViewGroup parent)

        {

            var view = convertView;

            var albums = _items[position];

            AlbumHolder holder;



            if (view == null)

            {



                view = LayoutInflater.From(parent.Context).Inflate(Resource.Layout.album_gridview_adapter, parent, false);



                var albumImage = view.FindViewById<ImageView>(Resource.Id.albumImageView);

                var albumName = view.FindViewById<TextView>(Resource.Id.albumName);

                albumName.SetTextColor(Color.Black);





                view.Tag = new AlbumHolder()

                {

                    AlbumCover = albumImage,

                    AlbumName = albumName

                };



                holder = (AlbumHolder)view.Tag;

                holder.AlbumCover.SetImageBitmap(ByteArrayToImageSourceConverter.ImageConverter(_items[position].AlbumCover));

                holder.AlbumName.Text = _items[position].AlbumName;

            }

            else

            {

                holder = (AlbumHolder)view.Tag;

            }



            return view;

        }



    }

ByteArrayToImageSourceConverter : to convert byte data into bitmap

 public static class ByteArrayToImageSourceConverter

    {



        public static Bitmap ImageConverter(byte albumImage)

        {

            Bitmap bitmap = BitmapFactory.DecodeByteArray(albumImage, 0, albumImage.Length);



            return bitmap;

        }

    }

here the output:
screen shot of my app

and how the above screen to convert like this:
screen shot of music player

Here the project source:https://github.com/udayoleti/XAMARIN

thanks in advance.