How to properly implement feed(similar to Facebook/Instagram) in Android?

Question

I am very new to Android. I am trying to create a social app which contains lot of images and some metadata. It has a screen which is similar to the feed on Facebook. I want to make this screen as smooth and standard as possible.

Here are the libraries I am using: OkHttp, Picasso, Retrofit, Gson.

Right now, I am fetching all the json in one go, since I have seeded dummy values in backend and the response is small enough. But, in future, it will have the previous and next fields to limit the json response.

Some of the questions that I have right now:

1. I am using Picasso with OkHttp. Does that cache images in disk too or only in memory?

2. What are the best practices on caching the feed? Since the majority of content is images, should I just let Picasso handle the caching or should I cache some items on my own? Heard about DiskLruCache library from JakeWharton but not tried it. Should I go with it?

3. How to keep some feed contents(like 3 or 4) in either direction of scroll in cache so that scrolling appears smooth and that images don't start loading after coming in the view.

4. How to automatically handle json response using previous and next fields when the user scrolls all the content that was fetched in this one go. Basically I want to trigger requests based on the number of contents scrolled based on cursors.

5. Suppose there is a like button and the user click it, should I change the number of likes in the UI and side by send a POST request to update counter or should I send the request and wait for the updated counter from server before updating it in the UI?

I have already gone through the source code of Instamaterial and got to learn some amazing things. But it does not demonstrates the whole backend integration.

I just want to know if there are any other open source apps which I can study or learn from. If you know any tutorials that would help too. I just want to make the app experience as smooth as possible and want to learn some best practices.

Answer 1

1. This will cache to disk as well as memory. If you set Picasso to debug mode it will display an indicator that describes where the image was loaded from (memory/disk/network)

2. If you don't mind Picasso having control over how long things are cached etc. then it should be fine to let it handle the caching. I'm also pretty sure that Picasso uses DiskLruCache

3. If your main concern here is the images, they will all be cached and shouldn't need to load after they have done so once (until it updates). You can also register a callback with Picasso in order to change the logic around showing or hiding placeholders.

4. I think that what you are looking for is a scroll listener on your listview (I assume you are using a list view). When it gets past a certain position (5/6) start loading the next 10. If you are using a recyclerview you can do this with the onScrollStateChanged function in the scroll listener and use the LinearLayoutManagerto call findLastVisibleItemPosition

5. It shouldn't really matter which approach you go with. If you think that it will take a long time for it to update the server counter (which it shouldn't) then it is probably best to update it locally first.

Answer 2

1.I would suggest you to checkout Image Management Library by Facebook that is Fresco that is pretty awesome and mature as compared to other Image Loading Library.

2.Fresco handles all the things caching of images with 3 Tier architecture ( BITMAP_MEMORY_CACHE, ENCODED_MEMORY_CACHE and DISK_CACHE). It also reduces OOM(Out Of Memory) issues. When image in a view goes out of screen it automatically recycles the bitmap, hence releasing the memory.

3.For that you have implement Pagination, yeah for sure you might have to send the previous record item position or index, so that you can fetch the items succeeding it.

4.For providing user the smooth experience in your app, you should increment the counter and send the post request to your backend simultaneously.

you can also checkout this tutorial Facebook like Feed.