CODEWITHSUNDEEP
androidgridviewandroid-gridview
Soyeon Kim
Soyeon Kim

Reputation: 608

GridView's column is not a straight line when scrolling

I was developing a Android GridView containing many images. When scroll up after scroll to the bottom of the list, the list's column is no longer a straight line.

Screenshot :

enter image description here enter image description here

The more strange is reaction does not occur in another list (in paralympic tab of screenshot) even using same adapter and GridView. But other page has a less item. So I think whether the difference in the item count. (Just my guess) There are 40 items in the problem list.

Code :

<?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:padding="5dp"
    android:background="@color/white">

    <GridView
        android:id="@+id/sports_gridView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="4dp"
        android:columnWidth="80dp"
        android:gravity="center"
        android:numColumns="auto_fit"
        android:stretchMode="columnWidth"/>

</LinearLayout>

adapter

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingLeft="5dp"
    android:paddingRight="5dp"
    android:paddingTop="10dp"
    android:paddingBottom="20dp"
    android:background="@color/white">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/sports_iv_item_icon"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginRight="10dp"
            android:layout_centerHorizontal="true"/>

    </RelativeLayout>


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/sports_tv_item_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:gravity="center"
            android:textSize="12dp"
            android:textColor="@color/black"
            android:layout_centerHorizontal="true"/>

    </RelativeLayout>


</LinearLayout>

Why Is This phenomenon is happening? How can I fix it?

Thanks all :)

Upvotes: 3

Views: 440

Answers (1)

Tamas
Tamas

Reputation: 221

GridView doesn't really support items with varying height, so you can do the following:

  • Let all of your items be the same height: in this case it's quite simple, add android:lines="2" to sports_tv_item_title, to make all of your titles 2 lines tall.
  • Use a custom android staggered gridview, like https://github.com/etsy/AndroidStaggeredGrid (first hit of google)
  • I belive a RecyclerView with a StaggeredLayoutManager can do the same for you.

Upvotes: 1

Related Questions