Column GridView is not straight line when scrolling

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

Screenshot:

enter image description hereenter image description here

The weirder is that the reaction doesn't occur in another list (in the paralympic screenshot tab) even using the same adapter and GridView. But there are fewer items on the other page. So I wonder if there will be a difference in position. (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 happening? How can I fix this?

Thanks everyone :)

+3


source to share


1 answer


The GridView doesn't support items with different heights, so you can do the following:



  • Make all your items the same height: in this case, it's quite easy to add android: lines = "2" to sports_tv_item_title so that all your titles are 2 lines high.
  • Use a custom android checkerboard like https://github.com/etsy/AndroidStaggeredGrid (first google click)
  • I believe the RecyclerView using the StaggeredLayoutManager can do the same for you.
+1


source







All Articles