Glide Image List not working in Android

Question

I'm following the "How do I use Glide guide found here: https://github.com/bumptech/glide

I've got the "simple view" example working but I'm having a problem with the "Image List" example.

The example from GitHub show's the following code. I can't figure out what to replace "myFragment" with. I've tried "this" but it doesn't work. Any help on figuring out what to replace "myFragment" with would be greatly appreciated.

Here's the GitHub example...

// For a simple image list:
@Override public View getView(int position, View recycled, ViewGroup container) {
    final ImageView myImageView;
    if (recycled == null) {
        myImageView = (ImageView) inflater.inflate(R.layout.my_image_view, container, false);
    } else {
        myImageView = (ImageView) recycled;
    }

    String url = myUrls.get(position);

    Glide
        .with(myFragment)
        .load(url)
        .centerCrop()
        .placeholder(R.drawable.loading_spinner)
        .crossFade()
        .into(myImageView);

    return myImageView;
}

Here's the code from my android project...

I have a list view in my MainActivity. Each row in the list will be populated with a custom view. To do that I have build a custom layout and a custom ArrayAdapter.

Here's the Layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:baselineAligned="false"
    android:orientation="vertical">

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

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="10"
            android:layout_marginBottom="10dp"
            android:id="@+id/postUserFirstName"/>

        <ImageView
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:id="@+id/postPicture"
            android:layout_gravity="center_horizontal"
            android:layout_marginBottom="10dp"
            android:layout_weight="1"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="10"
            android:layout_marginBottom="10dp"
            android:id="@+id/postCaption"/>

    </LinearLayout>

</LinearLayout>

Here's the custom Array Adapter

public class CustomAdapter extends ArrayAdapter<Post> {

    // We'll define a context and we will create a list of type Post that will hold all of our Post objects
    private final Context context;
    private final List<Post> customPosts;

    //constructor
    public CustomAdapter(Context context, List<Post> list) {

        super(context, R.layout.custom_post_layout, list);
        this.context = context;
        this.customPosts = list;

    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        //connect to custom_post_layout
        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View rowView = inflater.inflate(R.layout.custom_post_layout, parent, false);

        //assign views
        TextView postUserFirstName = (TextView) rowView.findViewById(R.id.postUserFirstName);
        ImageView postPicture = (ImageView) rowView.findViewById(R.id.postPicture);
        TextView postCaption = (TextView) rowView.findViewById(R.id.postCaption);

        //set values
        postUserFirstName.setText(customPosts.get(position).getUserFacebookName());
        Glide.with(this).load("https://example.jpg").into(postPicture);
        postCaption.setText(customPosts.get(position).getPostCaption());

        return rowView;
    }

}

Answer 1

Glide.with(context).load("https://example.jpg").into(postPicture);

Replace the myFragment with the context you get from the Activity or Fragment that calls the CustomAdapter constructor. That will do. Also, add a real image URL to check if the list loads the images or not. Note: You need to use the context object here instead of 'this' keyword because the Context object tells Glide what activity or fragment (indirectly the activity) is creating the event, and where the data is to be put while 'this' keyword simply references the current CustomAdapter class.

For example, let's consider you have an activity named MainActivity. Now in main activity you need to do this:

CustomAdapter adapter = new CustomAdapter(this, yourList);
yourListView.setAdapter(adapter);

If you have a fragment, let's say a fragment called MyFragment, you would do this:

CustomAdapter adapter = new CustomAdapter(getContext(), yourList);
yourListView.setAdapter(adapter);

Note: yourList is the list you might be having that you wish to give the ArrayAdapter as an input.

Answer 2

I finally found the problem. The issue was in the xml layout file under ImageView.

android:layout_height="0dp"

Changing this to a fixed height - for example 200dp - fixed the problem.

Thanks for all of the help.