Glide messes up gridlayout

Question

I'm trying to make a grid view to dynamically load images and data from a web server, but if i try to use Glide to load the image it messes up my layout, im a newbie on android programming so please be patient

the correct layout is this:

but if i enable Glide it shows like this:

As you can see there is a wide gap at the bottom that shouldn't be there

Here is my Grid Adapter:

public class GridViewAdapter extends BaseAdapter {

    private Context mContext;
    ArrayList<HashMap<String, String>> hotelsList;

    TextView hotelNameTv;
    TextView hotelDistanceTv;
    ImageView hotelImage;


    public GridViewAdapter(Context c, ArrayList<HashMap<String, String>> hotelsList ) {
        mContext = c;
        this.hotelsList = hotelsList;
    }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return hotelsList.size();
    }

    @Override
    public Object getItem(int position) {
        // TODO Auto-generated method stub
        return hotelsList.get(position);
    }

    @Override
    public long getItemId(int position) {
        // TODO Auto-generated method stub
        return 0;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        // TODO Auto-generated method stub
        View grid;
        LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        if (convertView == null) {

            grid = new View(mContext);
            grid = inflater.inflate(R.layout.hotel_item, null);

            hotelNameTv = (TextView) grid.findViewById(R.id.hotelName);
            hotelDistanceTv = (TextView) grid.findViewById(R.id.hotelDistance);
            hotelImage = (ImageView) grid.findViewById(R.id.hotelImage);

            HashMap<String, String> hotel=hotelsList.get(position);
            hotelNameTv.setText(hotel.get("name"));
            hotelDistanceTv.setText(hotel.get("distancemsg"));

            /*
            Glide.with(mContext)
                    .load("http://192.168.0.6/hoteles360ws/img/kron02.jpg")
                    .into(hotelImage);
                    */

        } else {
            grid = (View) convertView;
        }

        return grid;
    }

}

Here is my Activity Main resource File:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:background="@color/windowBackground">

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:orientation="vertical">

        <include
            android:id="@+id/toolbar"
            layout="@layout/toolbar" />

        <GridView
            android:id="@+id/hotelsGrid"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:verticalSpacing="@dimen/small_margin"
            android:horizontalSpacing="@dimen/small_margin"
            android:stretchMode="columnWidth"
            android:numColumns="2"
            android:padding="10dp" />

    </LinearLayout>

</android.support.design.widget.CoordinatorLayout>

And my item resource file

<RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#FFFFFF"
        android:elevation="30dp"
        >

        <TextView
            android:text="Hotel Name"
            android:layout_width="match_parent"
            android:layout_height="56sp"
            android:gravity="center_vertical"
            android:id="@+id/hotelName"
            android:textAppearance="@android:style/TextAppearance.Material.Large"
            android:textColor="@color/colorPrimary"
            android:paddingLeft="5sp" />

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/hotel"
            android:id="@+id/hotelImage"
            android:adjustViewBounds="true"
            android:scaleType="fitCenter"
            android:cropToPadding="false"
            android:layout_below="@+id/hotelName"
            android:layout_alignParentStart="true" />

        <TextView
            android:text="Hotel Distance"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/hotelDistance"
            android:background="#222222"
            android:textAppearance="@android:style/TextAppearance.Material.Inverse"
            android:layout_below="@+id/hotelImage"
            android:layout_alignParentStart="true"
            android:padding="5sp"
            android:textColor="@color/gold" />

    </RelativeLayout>
</RelativeLayout>

Thanks for your help!!!

Umm, your entire getView function is messed up. It won't properly work for any view that's been recycled- it won't work if you scroll at all. — Gabe Sechan, Jan 09 '17 at 02:25
mmm i'll try to completely rewrite my getview function to see if that works, im not shure if i can make it though because im just learning android programming :P — Chico3001, Jan 09 '17 at 02:29
Your problem is that anything that sets a value to a View should come after the if statement- you need to do it no matter if its a recycled view or a new view. — Gabe Sechan, Jan 09 '17 at 02:30

score 0 · Answer 1 · answered Jan 09 '17 at 03:13

Not sure what i did... first i changed my get view to this:

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    // TODO Auto-generated method stub

    if(convertView == null){
        final LayoutInflater layoutInflater = LayoutInflater.from(mContext);
        convertView = layoutInflater.inflate(R.layout.hotel_item, null);
    }

    final TextView hotelName = (TextView)convertView.findViewById(R.id.hotelName);
    final TextView hotelDistance = (TextView)convertView.findViewById(R.id.hotelDistance);
    final ImageView hotelImage = (ImageView)convertView.findViewById(R.id.hotelImage);

    HashMap<String, String> hotel=hotelsList.get(position);
    hotelName.setText(hotel.get("name"));
    hotelDistance.setText(hotel.get("distancemsg"));

    Glide.with(mContext)
            .load("http://192.168.0.6/hoteles360ws/img/kron02.jpg")
            .into(hotelImage);

    return convertView;
}

And it didn't worked...

But then i changed from glide to picasso, it worked perfectly...

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    // TODO Auto-generated method stub

    if(convertView == null){
        final LayoutInflater layoutInflater = LayoutInflater.from(mContext);
        convertView = layoutInflater.inflate(R.layout.hotel_item, null);
    }

    final TextView hotelName = (TextView)convertView.findViewById(R.id.hotelName);
    final TextView hotelDistance = (TextView)convertView.findViewById(R.id.hotelDistance);
    final ImageView hotelImage = (ImageView)convertView.findViewById(R.id.hotelImage);

    HashMap<String, String> hotel=hotelsList.get(position);
    hotelName.setText(hotel.get("name"));
    hotelDistance.setText(hotel.get("distancemsg"));

    Picasso.with(mContext)
            .load("http://192.168.0.6/hoteles360ws/img/kron02.jpg")
            .into(hotelImage);

    return convertView;
}

I'll be very grateful if someone explains me what happened...

score 0 · Answer 2 · edited May 23 '17 at 12:01

0

You can check this link below. Gridview in Android is quite studpid. (I suggest you use Recyclerview with GridLayoutManager)

How to have a GridView that adapts its height when items are added

edited May 23 '17 at 12:01

Community

1
1

answered Jan 09 '17 at 04:09

RoShan Shan

2,924
1
18
38

Glide messes up gridlayout

2 Answers2