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;
}
}

Are you open to using Picasso or Glide? – Lucas Crawford Sep 17 '15 at 00:53 — Lucas Crawford, Sep 17 '15 at 00:53

score 3 · Answer 1 · answered Sep 17 '15 at 01:00

3

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 (i.e. image_01234.jpg) where the end bit is a timestamp or what have you.

answered Sep 17 '15 at 01:00

Lucas Crawford

3,078
2
14
25

Thanks for the response. In my case where do I try your solution? In my onBindViewHolder or my MainActivity? – Equivocal Sep 17 '15 at 03:36
My issue was solved otherwise but thanks nonetheless – Equivocal Sep 17 '15 at 06:19
Hey I have another issue. I have an onClickListener attached to my viewholder and I want this to happen...When I click on one of those views you see in my screenshot; for example the first view which has the Title "Six", I want a new actvity to launch and in that activity the corresponding Parse object matching the view that was clicked in my RecyclerView to be displayed in that new actvity. Can you help me please, it is very important – Equivocal Sep 19 '15 at 02:07
To Pass the object from Activity -> Activity you need to probably serialize it or use a parcelable if the object doesn't have too much data. One second, i'll post code – Lucas Crawford Sep 19 '15 at 02:10
My problem was solved again. Once again thanks for your time – Equivocal Sep 20 '15 at 01:36

Erik Jhordan Rey · Accepted Answer · 2015-09-17T04:45:59.007

1

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

edited Sep 17 '15 at 04:45

answered Sep 17 '15 at 00:59

Erik Jhordan Rey

738
6
8

Thanks for the timely response but where exactly am i to put that line of code? In my adapter or myMainActivity(RecyclervViewActvity)? – Equivocal Sep 17 '15 at 03:47
So i ran into an error after attempting that solution, i posted the logcat above in my edited question – Equivocal Sep 17 '15 at 05:34
Okay so i fixed my error. It is displaying my image now in all the views. Thanks alot – Equivocal Sep 17 '15 at 06:10
Hey I have another issue. I have an onClickListener attached to my viewholder and I want this to happen...When I click on one of those views you see in my screenshot; for example the first view which has the Title "Six", I want a new actvity to launch and in that activity the corresponding Parse object matching the view that was clicked in my RecyclerView to be displayed in that new actvity. Can you help me please, it is very important – Equivocal Sep 19 '15 at 02:07
1

I created an full example which implements this feature https://github.com/erikcaffrey/AndroidDesignSupportLibrary If you have a question about it I can help you! – Erik Jhordan Rey Sep 19 '15 at 04:00
Okay thanks a lot. I will check it out and see if it can help me move forward. Will keep you posted. – Equivocal Sep 19 '15 at 04:12
My issue was resolved and it was all due to your suggestion. Thank you very much. You are very talented and I am once again grateful for you taking the time out to help with this issue. Many thanks. – Equivocal Sep 20 '15 at 01:38
Ok, another issue. Based on what you sent me in the link i was able to get the String information to display for each corresponding recycled view but, the image that is being displayed is not the image from parse. The image that is being displayed is my Drawable image instead. It seems as though the data for the image/url i got from Parse is not being carried over to the Detailed Activity – Equivocal Sep 20 '15 at 05:44
Do I have to get the URLs from Parse.com all over again in the Detailed Activity ? – Equivocal Sep 20 '15 at 05:50
I updated my question so you can see what I have cureently. I don't know why the images are not being sent over from one activity to the next. I can't see my Parse images on the Detailed Activity, I can only see my drawable. Resource image file. – Equivocal Sep 20 '15 at 06:09
Can you show me the code that send to Detail Activity? – Erik Jhordan Rey Sep 20 '15 at 14:37
Okay when I get home later today I will post it – Equivocal Sep 20 '15 at 16:46
Okay so guess what? I fixed the issue! lol Thank the Lord. I don't know if you found the time to work on finding a fix but nevertheless thanks for your previous help it was appreciated. – Equivocal Sep 22 '15 at 01:19
1

Awesome you fixed the issue! – Erik Jhordan Rey Sep 23 '15 at 04:16
Yeah most definitely :) – Equivocal Sep 24 '15 at 05:22

Displaying ParseFile Containing Images Using Their Urls In A RecyclerView

2 Answers2

Linked