Item overlay when scroll up

Question

I've developed an android app, and in one screen there is a gridview with two items by row.

Each item is compounded by an image with a text below.

When the layout is loaded, it shows the elems on the right way, but when I scroll up the get the first ones, there is an overlay of the items that have a multiline text.

This is the code of the elems:

Layout

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <GridView
            android:id="@+id/atlas_list"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:numColumns="2"
            android:orientation="vertical"
            android:dividerHeight="15dp"
            android:layout_marginStart="20dp"
            android:layout_marginEnd="20dp"
            android:layout_marginBottom="15dp"
            android:divider="@android:color/transparent"/>
    </LinearLayout>
</RelativeLayout>

Item

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:layout_margin="10dp">

    <ImageView
        android:id="@+id/atlas_item_image"
        android:layout_width="match_parent"
        android:layout_height="90dp"
        android:layout_gravity="center"
        android:layout_margin="15dp"/>

    <TextView
        android:id="@+id/atlas_item_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:textStyle="bold"
        android:textColor="@android:color/holo_blue_dark"
        android:fontFamily="casual"
        android:textAlignment="center"/>

</LinearLayout>

The code for adding items to the GridView is:

final GridView gridView = findViewById(R.id.atlas_list);
AtlasItemAdapter adapter = new AtlasItemAdapter(activity, atlasItems);
gridView.setAdapter(adapter);

where AtlasItemAdapter is a custom class extending ArrayAdapter<AtlasItem>, overriding the getView method.

You can check the app in the Play Store to reproduce the behaviour.

Thank you in advance

Answer 1

I'm not pretty sure why this happens, but what I'd do is: use a RecyclerView with a GridLayoutManager as the LayoutManeger.

Here are the files:

layout.xml:

 <android.support.v7.widget.RecyclerView
    android:id="@+id/atlasList"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

Activity.java:

RecyclerView myRecycler = findViewById(R.id.atlasList);
RecyclerView.LayoutManager mLayoutManager = new GridLayoutManager(context, 2);
myRecycler.setLayoutManager(mLayoutManager);
MyAdapter adapter = new MyAdapter(atlasList);
myRecycler.setAdapter(adapter);

Adapter.java:

class MyAdapter extends RecyclerView.Adapter<Viewholder> {
    private List<Atlas> list;
    public MyAdapter(List<Atlas> atlasList) { this.list = atlasList; }

    // needed methods of RecyclerView.Adapter class
}