Displaying ParseFile Containing Images Using Their Urls In A RecyclerView

Question

I have three images stored in a table on Parse.com and I would like to display those three images using their URLs.

I have retrieved the URLs of the three images and they are displayed in the RecyclerView. You can see this in my screen shot image.

So how do I display these three images using their URLs?

MY MAIN ACTIVITY:

public class RecyclerViewActivity extends Activity {

private List<Person> persons;
private RecyclerView rv;



@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.recyclerview_activity);

    rv=(RecyclerView)findViewById(R.id.rv);

    LinearLayoutManager llm = new LinearLayoutManager(this);
    rv.setLayoutManager(llm);
    rv.setHasFixedSize(true);

    initializeData();
    initializeAdapter();
}

private void initializeData(){
    persons = new ArrayList<>();

    //Query to load String data into the card view/recycler view
    ParseQuery<ParseObject> query = ParseQuery.getQuery("events");
    query.findInBackground(new FindCallback<ParseObject>() {
        @Override
        public void done(List<ParseObject> objects, ParseException e) {

            if (e == null) {

                for (int i = 0; i < objects.size(); i++) {



                    persons.add(new Person(objects.get(i).getString("name"), objects.get(i).getString("shortinfo"), objects.get(i).getParseFile("image"), img[i]));

                }
            } else {
                // something went wrong
            }


            initializeAdapter();
        }
    });

     }

private void initializeAdapter(){
    RVAdapter adapter = new RVAdapter(persons);
    rv.setAdapter(adapter);
}
}

MY ADAPTER:

public class RVAdapter extends RecyclerView.Adapter<RVAdapter.PersonViewHolder> {

public static class PersonViewHolder extends RecyclerView.ViewHolder {

    CardView cv;
    TextView personName;
    TextView personAge;
    ParseImageView personPhoto;
    TextView personPhoto1;

    PersonViewHolder(View itemView) {
        super(itemView);
        cv = (CardView)itemView.findViewById(R.id.cv);
        personName = (TextView)itemView.findViewById(R.id.person_name);
        personAge = (TextView)itemView.findViewById(R.id.person_age);
        personPhoto = (ParseImageView)itemView.findViewById(R.id.person_photo);
        personPhoto1 = (TextView)itemView.findViewById(R.id.person_photo1);

    }
}

List<Person> persons;

RVAdapter(List<Person> persons){
    this.persons = persons;
}

@Override
public void onAttachedToRecyclerView(RecyclerView recyclerView) {
    super.onAttachedToRecyclerView(recyclerView);
}

@Override
public PersonViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
    View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item, viewGroup, false);
    PersonViewHolder pvh = new PersonViewHolder(v);
    return pvh;
}

@Override
public void onBindViewHolder(PersonViewHolder personViewHolder, int i) {
    personViewHolder.personName.setText(persons.get(i).name);
    personViewHolder.personAge.setText(persons.get(i).age);
    personViewHolder.personPhoto.setParseFile(persons.get(0).photoId);
    personViewHolder.personPhoto1.setText(persons.get(i).photoId1);
    //personViewHolder.personPhoto.setParseFile(persons.get(2).photoId);


}

@Override
public int getItemCount() {
    return persons.size();
}
}

MY CLASS CONTAINING MY DATA FOR THE RECYCLER VIEW:

class Person {
String name;
String age;
ParseFile photoId;
String photoId1;

Person(String name, String age, ParseFile photoId,String photoId1) {
    this.name = name;
    this.age = age;
    this.photoId = photoId;
    this.photoId1 = photoId1;
}
}

Answer 1

I'll show you an example. This example will rely on using Picasso (Glide also works!) Because you will probably will be needing to do this for a number of images, and using Picasso saves time.

First, add picasso via Gradle:

compile 'com.squareup.picasso:picasso:2.5.2'

Second, do the following example for a single image:

ParseFile image = persons.get(i).getParseFile("imageName");
Uri imageUri = Uri.parse(image.getUrl());
Picasso.with(context).load(uri.toString()).into(imageView);

Notice how easy this is, and since you are saving the Parse, save the files with appropriate naming (ie image_01234.jpg) where the end bit is a timestamp or what have you.

Answer 2

I recommend you use a library like Picasso, Glide, Fresco, ImageRequest(Volley) that has many features can facilitate you this task.

Picasso.with(context).load("http://www.tecnologia.net/wp-content/uploads/2015/05/Los-mejores-trucos-para-Android.png").into(yourImageView);

Glide.with(context).load("http://www.tecnologia.net/wp-content/uploads/2015/05/Los-mejores-trucos-para-Android.png").into(yourImageView);

You shoud use a imageView

Glide.with(context).load("your_link_from_parse").into(yourImageView);

Your Adapter

    public class RVAdapter extends RecyclerView.Adapter<RVAdapter.PersonViewHolder> {

        public static class PersonViewHolder extends RecyclerView.ViewHolder {

            CardView cv;
            TextView personName;
            TextView personAge;

            ParseImageView personPhoto;
            TextView personPhoto1;

            PersonViewHolder(View itemView) {
                super(itemView);
                cv = (CardView)itemView.findViewById(R.id.cv);
                personName = (TextView)itemView.findViewById(R.id.person_name);
                personAge = (TextView)itemView.findViewById(R.id.person_age);
                personPhoto = (ParseImageView)itemView.findViewById(R.id.person_photo);
                personPhoto1 = (TextView)itemView.findViewById(R.id.person_photo1);

            }
        }

        List<Person> persons;

        RVAdapter(List<Person> persons){
            this.persons = persons;
        }

        @Override
        public void onAttachedToRecyclerView(RecyclerView recyclerView) {
            super.onAttachedToRecyclerView(recyclerView);
        }

        @Override
        public PersonViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
            View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item, viewGroup, false);
            PersonViewHolder pvh = new PersonViewHolder(v);
            return pvh;
        }

        @Override
        public void onBindViewHolder(PersonViewHolder personViewHolder, int i) {
            personViewHolder.personName.setText(persons.get(i).name);
            personViewHolder.personAge.setText(persons.get(i).age);
            //personViewHolder.personPhoto.setParseFile(persons.get(0).photoId);
//personPhoto should be ImageView or your CustomImageView
    Glide.with(personViewHolder.personPhoto.getContext())
                    .load(persons.get(0).photoId)
                    .fitCenter()
                    .into(personViewHolder.personPhoto);
            personViewHolder.personPhoto1.setText(persons.get(i).photoId1);
            //personViewHolder.personPhoto.setParseFile(persons.get(2).photoId);


        }

        @Override
        public int getItemCount() {
            return persons.size();
        }
        }

do not forget to import the library in your proyect.

Look this link http://inthecheesefactory.com/blog/get-to-know-glide-recommended-by-google/en