I am trying to get the same nice UI effect guys at Whatsapp did. Each time I receive some image, not matter of its size, I can see blurred thumbnail in a matter of 1 sec, and over it an indicator that the real image is being downloaded.
How do they do this? I want to achieve the same effect when users download images from our server. I am not sure if they are doing some server-side image processing, or there is a built-in feature in Android SDK which can do this.
Let's say a user requests an image of 4MB. Almost instantly he clicks download, a blurred thumbnail of the image will appear over the screen and download status indicator over it. I am mainly interested how to get image preview so quickly, literally in a matter of 1 sec (feels like being instantly).
PS. Similar effect has StackOverflow when you try to upload an image. When you drag it to the upload popup, you see its preview almost instantly. I guess Stackoverflow does this by using client side scripting, which we cannot apply in Android app. But this is a good showcase of what I need (in case you don't use Whatsapp).
Basically what is happening in these situations is you need to request a blurred thumbnail from the server (Usually very small so it downloads quickly), and then begin the download of the full image. This is something that has to be done by the server.
Update:
You can now use a technology like progressive jpeg to achieve the same effect without having your server store two separate images. Progressive jpegs basically encode a very low quality image in the first bytes of an image, and then as the image continues to load the quality improves. This may not be the exact effect you are looking for, but it should be able to show a quick low quality preview while loading in the full sized image. Currently the only way to load these on Android is with Facebook's Fresco library.
I have another theory. I think the method used here is that before publishing the message, they have some algorithm to generate a lightweight fuzzy low-quality picture (in the sender) and then send the contents of that array (a few bytes as a byte[] array maybe) along the published message .. now once the receiver receives the message, he can instantly display that fuzzy image and get the full image by doing a full request to the server .. What makes me think this is that if they are going to request the thumbnail from the server then why not have a detailed thumbnail ? it can be small in size as well .. why have a fuzzy thumbnail that is only a mere shallow representation of the original one and not complete like thumbnails we see in the web.
I believe that there are two part in this process
First is message part which is loaded from api server which will have text contents of the message and very small/blurred image (Base64 encoded string of the image) with url to actual video. example
{message:"Hi this is my video uploaded..", thumbnail:"..base64 string of image", url:"...url to video file with key or without"}
Second is Media part which starts when user click on download button after seeing the preview image from url served with message.
While uploading the message we can also so the same thing either we
generate thumbnail/blurred image and submit the message in two part
First upload message with thumbnail to api server and get key for media server
Submit video to media server with key provided by api server.
Or
First upload message to api server and get key for media server
Submit video to media server with key provided by api server and let
server generate thumbnail for video.
Here i believe that we are running two separate server one for handling static contents and another for api calls.
Hope you all agree with me or suggest any correction.
Related
I have a simple phototaking android app that allows the user to take a photo and save it. I allow the user to create multiple versions of the photo in the app - adding captions, filters, etc. After the user is finished, I upload the photo to Firebase storage. Here I upload a few files
The original raw bitmap that was taken using the camera
The finished bitmap with all edited captions and filters applied
The thumbnail of the the raw bitmap, and finally
The thumbnail of the finished image
The thumbnails and the full size images allow users to undertake future interactions with the app.
What would be the most efficient way to upload the images? Options that I know of are
Using 4 different upload tasks from the Android app. But this is taking a few seconds to finish all 4 uploads.
Using 2 upload tasks for the fullsize images and then using Firebase 'functions' to create the the thumbnails in the server. However, I would need to create the thumbnails locally in the app for display purposes before uploading, so it would mean creating the thumbnail in 2 places - app and the server. Also it would mean doing double error handling - one at the server side and the other on the app end.
Is there any other option?
Looking forward to whatever help I can get. As usual, feel free to ask for clarifications, via comments.
That depends on your scenario. If you are on "Spark" plan then using firebase functions too much might exceed your free quota of:
Invocation (125K/month)
GB-seconds (40K/month)
CPU-seconds (40K/month)
But if you can upgrade to "Flame" or "Blaze" then it won't be an issue and its the preferable way.
On the other hand, thumbnail file aren't too big that takes much time for uploading, unless you are on extremely slow connection, then uploading thumb files from app won't be an issue. You might not even notice the uploading time. It will be quick.
Currently, I'm downloading a list of ParseObjects that have a URL, which I then use to load gifs over the network into my list items. This is obviously quite slow for a list, and even using Glide and only displaying the first frame, it still takes several seconds to display anything into the view.
What I'd like to do, is write some custom Cloud Code to only send the client the first frame of the gif and use that as a preview to display in the list, then download the actual gif when the preview is clicked on. Obviously I would have to have the gifs uploaded as a ParseFile instead of just a URL but that isnt the issue.
Could this be done? If so, how?
I'm trying to create a CRUD android application.
Now, when the List Activity is shown, it will display the items created along with a thumbnail of the original image.
What is the best practice for displaying a thumbnail in an Android application with Volley? Should I generate a thumbnail for the images uploaded or just re-size the image at the client side?
It's hard to come up with a general answer for this questions because it all depends on how many images you're trying to download and how important showing the thumbnails is.
I would personally generate the thumbnails on the server side as soon as they are uploaded by the user. Doing this has several advantages:
All your app has to do is request the thumbnail and render it, which is much simpler and less CPU-intensive than using Volley's ImageRequest.
Smaller images means less data usage. You definitely don't want your app to download a 10MB 25-megapixel image over a 3G connection just to shrink it to a 100x100 thumbnail that the user might not even care about.
The only drawback that I can think of is that you might have to generate multiple thumbnails, one for each screen size (e.g. one for hdpi screens and another for xxhdpi). This is slightly more expensive on the server side but might make your UI look much better.
Also, remember to cache thumbnails in your app's cache directory so you don't have to re-request them every single time you want to show them.
I've got a really simple (so far) Android app, which basically shows your friends on a Google Map. Think Latitude.
The friends are represented as avatar pins, the images of which are downloaded from the internet.
When a "friend" is added, i fetch the avatar in a background thread. I then don't need to download the avatar again (i'll probably check for updates during app start, but not too fussed about that right now). The actual images will most likely come from a social network (Facebook, Google, Twitter, Gravatar, etc)
Now, the map view will basically always be displayed, so the images are essentially always present. I will however be performing image manupilation, stacking, etc for these avatars.
Given the above information, here are my questions:
Where should i cache these images? Looking at the docs, i feel like a Disk Cache would be the best option?
Should i think about creating an image sprite? Remember, these images don't live in the APK/resources, they are dynamically fetched. Perhaps i could create a per-friend sprite with all the different image sizes i will require?
I also have access to the server which returns these images (right now they just return a URL) - so should i enable this server to instead do image processing/resizing etc based on my requirements, or simply download the original image and then perform the processing on my client application?
You can use lazy loading to dynamically download the users images from the URl and store it in cache. I believe this link would help you out in this :
https://github.com/thest1/LazyList
My Problem deals with Memory, I have a Web service that provide me a List of Urls. Each URL corresponds to a large image. My Mobile app have to parse the xml provided by the web service and than show in a GridView these images. I tried several features in order to display images such as:
Multithreading
Lazy Loading
Reduce image size using inSampleSize ( this causes my app takes too long)
should i have to attach for each large image a thumbnail image, and make the web service return to me the list of all thumbnails, after that show these thumbnail to the user, and if he clicks on one of them than i have to show the large image in a separate view, i have this idea because i noticed when i show one image i don't get an outofMemory exception!!
Is this a reliable solution? is there a better way?
Welcome to one of the hardest issues on Android. First I would start by reading this new documentation google wrote on how to handle bitmaps. Its not a light read, but you probably need to read it all the way through. It has only been up for a few weeks so you may not have seen it. It details many of the things you mentioned such as multithreading, lazy loading, and down sampling. They also recommend using an image cache.
Downloading the large images for each image and then down sampling is going to be very inefficient. First the download size is larger than needed. Second you need to load it into memory to perform the down sample and third down sampling is somewhat slow.
I would have the web api return you a list of thumbnail urls and full image urls that you can lazy download as the view comes on screen and use the cache to keep them around a while. Make sure you down sample the sizes of the thumbnails as well. I would then when the user clicks on an image go download the full image and on the background when it arrives down sample it before displaying it.