For years I’ve been an Android developer, and only in recent months have I gotten to dive back into the Android world (after years of iOS development).
In one of my previous jobs, I was responsible for an application that allows you as the user to download images into your phone and set them as a background for the home screen, lock screen, or both. This application requires pulling big JSON files with all the image information, each image having multiple fields such as title, URL, created date, etc…
On the main screen, I had to present a thumbnail (A thumbnail is a small image representation of a larger image) of each image. Tapping a thumbnail will direct the user to a screen where the image is shown full screen.
These 2 screens already required multiple versions of the same image. Since you can’t present a full-screen image with a thumbnail image because you’ll get a pixelated result which yields a bad user experience. On the other hand, We don’t want to present the full-screen image on the main screen (where we show many images on a screen) because it’ll cause a long load time of the screen. Which is again a bad user experience.
Other than that, each image has various sizes that we need to present, and let us not forget that the application supports multiple devices with different screen sizes, many manufacturers, phones, tablets, etc… which require different sizes of the image.
So how can we handle this? We have one image, but we need it in many different sizes. We can take it on the client side and manipulate the image on the device but that won’t be efficient. We can ask our server side (if we have one) to give us multiple URLs for each image but that will make the JSON response huge and hard to handle.
This is where Cloudinary comes in.
As you might have guessed the solution will be Cloudinary
Cloudinary is a platform that allows you to quickly and easily create, manage and deliver digital experiences across any browser, device, and bandwidth.
The first thing you need to do is go to the Cloudinary website and sign-up for a free account.
You can find the git repository for the Android SDK here.
To integrate Cloudinary into your app you can use:
//Gradle
implementation 'com.cloudinary:cloudinary-
android:2.2.0'//MavenCode language: PHP (php)//Maven
<dependency>
<groupId>com.cloudinary</groupId>
<artifactId>cloudinary-android</artifactId>
<version>2.2.0</version>
</dependency>Code language: HTML, XML (xml)
Once the package is integrated, we’ll need to set up our Cloudinary object.
Your API-Key and Cloud-Name will appear in the dashboard where you created your account.
Now that we have our Cloudinary object set and ready to use that’s where the MAGIC starts.
There are multiple ways to upload an asset to your cloud, via the API or the UI
UI —It’s as simple as dragging and dropping into your cloud.
API — You can upload through the code:
The only thing we’re missing here is the upload preset. An upload preset is a field we need to set through the UI. You can do this by going to the Cloudinary website, signing in, and clicking the settings icon at the top right. Click the upload option, scroll down and add a new upload preset, There are many options to customize an upload preset but I’m not going to dive into them in this blog. Check out the Cloudinary Academy to learn more about what’s possible with Cloudinary’s APIs.
Once the upload preset is created, be sure to put its name in the upload preset field in the unsignedfunction.
Yes, that simple to upload an asset to your cloud, once the image is there we can start using transformations!
Transformations are manipulations we can perform on an asset (image, video, etc…) there are many transformations and if you want to learn more than the examples I show here I suggest visiting Cloudinary’s documentation.
At the start of this article, I presented the problem where we have one asset, but we need it in many different sizes and aspect ratios. Let’s see how we can achieve that very easily using Cloudinary’s transformations: (I’m going to use an asset called sample)
The original image:
We want to create a thumbnail(250×250) for our main screen:
Let me explain the code line above. We’re using the MediaManager object we created before, we call the url() function and setting a new transformation where we give all the parameters we want to modify in the image, lastly we call generate with the asset name (sample).
This line of code will produce the following URL:
As we can see we got the 250×250 thumbnail we wanted, but the result could be improved. The “bee” which is the most interesting object in the image is cut off. What can we do? OH! Cloudinary has a few more tricks up its sleeve! Another COOL feature we can use “gravity” where we can ask Cloudinary to focus on the most interesting object in the image.
The output URL:
And as we can see the result is much better. The focus is on the bee.
Let’s try another scenario. We have a 2k image, which is quite a large file, and we don’t need it in its best form when we’re presenting it on the device. Roaming can’t always handle big bandwidth. To make the image lighter we can use the Cloudinary “quality” feature.
Here’s the original image (it weighs 5MB which is quite a large file)
With Cloudinary we can do the following:
This code will produce the following URL:
And it weighs 626.56 KB. So we reduced the size by a lot, and it’ll be easier to get this image on a mobile device.
As we saw in the blog, Cloudinary can answer the requirement to handle the same asset in many sizes and qualities. Not only that it has many other features! I encourage you to visit the documentation website to get the best out of the platform.
The Cloudinary SDK can also be found on iOS and 14 more languages you can find at Cloudinary’s git.
