GridView items overlapping each other

Question

Please check my attached image. I am facing this issue when the product name is more than one line. I am confused what should i do now.

In my gridview i am facing this issue. How can i solve this? Here is my gridview xml code.

<GridView
    android:id="@+id/productGrid"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:numColumns="2"
    android:verticalSpacing="4dp"
    android:horizontalSpacing="3dp"
    android:focusable="true"
    android:stretchMode="columnWidth"
    android:fitsSystemWindows="true">

</GridView>

Here is my grid item xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <android.support.v7.widget.CardView
        android:id="@+id/card"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardCornerRadius="8dp"
        app:cardPreventCornerOverlap="true"
        app:contentPadding="8dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <ImageView
                android:id="@+id/iv_productImage"
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:layout_gravity="center"
                android:src="@drawable/avatar"/>
            <TextView
                android:id="@+id/tv_productName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:gravity="center"
                android:layout_gravity="center"
                android:text="Bread Trimmer"
                android:textSize="17sp"
                android:textStyle="bold"/>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:gravity="center"
                android:layout_gravity="center"
                android:layout_marginTop="4dp"
                android:layout_marginBottom="4dp">
                <ImageView
                    android:layout_width="15dp"
                    android:layout_height="15dp"
                    android:src="@drawable/coin"/>
                <TextView
                    android:id="@+id/tv_productPrice"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="1049999999999990"
                    android:layout_marginLeft="5dp"
                    android:layout_marginStart="5dp"
                    android:textColor="#FAAD18"
                    android:textSize="17sp"/>
            </LinearLayout>

            <TextView
                android:id="@+id/btn_buy"
                android:layout_width="wrap_content"
                android:layout_gravity="center"
                android:paddingLeft="12dp"
                android:paddingRight="12dp"
                android:layout_height="wrap_content"
                android:text="Get Now"
                android:textColor="#FFFFFF"
                android:focusable="false"
                android:textSize="16sp"
                android:gravity="center"
                android:background="@drawable/buy_background"
                android:textStyle="bold"
                android:textAllCaps="false"/>
        </LinearLayout>

    </android.support.v7.widget.CardView>

</RelativeLayout>

This is single item. I am confused where did i made mistake. Please help. Thanks.

score 1 · Accepted Answer · answered Jun 24 '18 at 13:20

1

solution 1

you can add this attribute to your tv_productName

    android:ellipsize="end"
    android:singleLine="true"
    android:maxLines="1"

this lines add ... to end of your TextView text

solution 2

use this library for your tv_productName TextView

autofittextview

this library fit your TextView size to prevent overlaping

solution 3

this is a bad solution but it work you can add margin to your parent layout(RelativeLayout)

android:layout_margin="5dp"

answered Jun 24 '18 at 13:20

Radesh

13,084
4
51
64

I tried 3rd solution first. It didn't worked. Then i tried 1st solution. It worked :) Thanks for your help. It could be more interesting if the gridview takes the height of max height item. I don't know is it possible or not. Anyway Thanks again. – Arif Rahman Jun 24 '18 at 13:36
yes max height very good i need it too but don't find anything usefull – Radesh Jun 24 '18 at 13:41

score -1 · Answer 2 · answered Jun 24 '18 at 12:18

-1

I think the problem is. Your text view. The name of the product. As the product name increases the whole text view get divided and spread vertically. Like Rhinestones Rose watch the watch is in the vertical position related to the upper text which is creating the issue. I guess. Try to use small text and check if that's the issue or not and if that's the issue you can easily be able to solve it I guess and plz let me know if it works. Thanks .

answered Jun 24 '18 at 12:18

Karsh Soni

170
1
12

Hi, Thanks for your answer. But i tried that before i post here. It work like that way But i need the whole text. Do you have any idea about that? – Arif Rahman Jun 24 '18 at 12:27
https://stackoverflow.com/questions/2617266/how-to-adjust-text-font-size-to-fit-textview @ArifRahman I hope this may help you. and plz let me know if this works – Karsh Soni Jun 24 '18 at 12:59

GridView items overlapping each other

2 Answers2