Android — Easy Asset Management

For almost 3 years now I’ve been working in this great company called Cloudinary.
My position is to hold, maintain, and build SDKs for new mobile frameworks (Flutter, React Native, etc…).
Through my time at Cloudinary, I’ve come to understand the concepts, the solution, and how Cloudinary can serve me as a mobile developer and that’s what we’re here for today.

So recently I’ve built a new sample app complementary to the SDK package where you can see, feel, and even play with the Cloudinary SDK and solution, understand it, and see how it can fit your needs.

Here’s an overview of the app contents and what you can find

• Optimization
• Transformations
• Use cases such as localization, branding, and background normalization
• Uploading, including uploading large files and fetch upload
• Upload widget and image widget implementations
• Video, including the video player widget and video feeds

You can find our sample app here.

Setup

When the app starts the first thing you’ll need to do as a user is to put your cloud name, you can find your cloud name on the cloudinary platform here.

Once you have your cloud name you’ll need to put it into the EditText on screen.

Once you enter your cloud name the code will initialize our MediaManager class, which holds the Cloudinary configuration, we’ll use this class to perform URL generation, uploads, and more.

Delivery

As you can see in the following screen we’re under the Delivery tab.

This tab shows you various things you can do with the Cloudinary SDK.

Optimization

This screen allows you to see how optimization through Cloudinary will reduce the asset size and by that the amount of bandwidth the app consumes.

url = MediaManager.get().url().transformation(new Transformation().crop("scale").width(800).fetchFormat("avif").quality("auto").dpr("auto")).generate(publicId);

We’re using our MediaManager object to create our URL, and then we’re setting a new Transformation() ,

1. we’re using crop mode scale to keep the current asset aspect ratio.
2. we’re reducing the width to 800px
3. We are using AVIF as the format for the image, this will reduce the asset size (Pay attention that AVIF is supported for Android 12+).
4. We’re setting the quality to auto which will allow Cloudinary to optimize the image quality.
5. We’re setting the DPR to auto.
6. At the end of the line, we’re calling generate and giving it the asset name which is the publicId .

By doing all these steps we’re getting a much lighter more optimized asset.

Transform

In the transform, you can find various transformations that Cloudinary can help you with, from changing the asset size and aspect ratio to background removal, overlays, and recoloring different objects in an asset.

Use cases

In the use cases section, you can find a few use cases that Cloudinary consumers are using in their apps.

You can take different size images and set them all in a size that works for you

You can also brand your images easily.

Upload

In the next tab, next to Delivery, we can find the upload, the upload screen shows us multiple actions we can take

1. Upload — upload an asset from your phone to your cloud with 1 line of code.

MediaManager.get().upload(imageUri).unsigned(Utils.UPLOAD_PRESET).dispatch();

As you can see in the snippet above we need to give the upload function the asset URI, we want to make an unsigned upload and give it the UPLOAD_PRESET (if you want to know more about upload presets please go here) and then we just dispatch the request.

2. Pre-Processing — By processing you can reduce the size of an image before uploading it to your Cloudinary cloud, here’s how you do it

 MediaManager.get().upload(imageUri)
                .unsigned(Utils.UPLOAD_PRESET)
                .preprocess(new ImagePreprocessChain()
                        .loadWith(new BitmapDecoder(1000, 1000))
                        .addStep(new Limit(1000, 1000))
                        .addStep(new DimensionsValidator(10,10,1000,1000))
                        .saveWith(new BitmapEncoder(BitmapEncoder.Format.JPEG, 80)))

As we did before we’ll call our MediaManager object and the upload function but this time we have an addition, the .preprocess part, there we take steps, we set a limit to the size (up to 1000x1000) and change the format to JPEG with compression of 80%.

3. Fetch upload allows you to upload assets from a remote URL to your cloud

 url = MediaManager.get().url().type("fetch").transformation(new Transformation().crop("scale").width(800).fetchFormat("avif").quality("auto").dpr("auto")).generate(publicId);

The only change we make here from a URL we generated before is we need to set the .type() to fetch , Cloudinary will generate a new URL for you and will upload the asset from the remote URL to your cloud.

Widgets

As part of the SDK, we offer different widgets

Image Widget

The image widget part allows quick and easy integration of the Cloudinary SDK with Glide, Picasso, and Fresco.

MediaManager.get().setDownloadRequestBuilderFactory(new GlideDownloadRequestBuilderFactory());
MediaManager.get().download(requireActivity()).load("https://res.cloudinary.com/mobiledemoapp/image/upload/v1/Demo%20app%20content/Frame_871_ao5o4r?_a=DAFAMiAiAiA0").into(imageView);

By setting the Factory to glide within the MediaManager we’re telling it to use glide to download images, and then we can easily call download to download any image we want.

Upload Widget

The upload widget allows you to quickly and easily open the phone gallery and allow your users to upload to your Cloudinary cloud.

To open the widget we use the following code:

UploadWidget.startActivity(getActivity(), UPLOAD_WIDGET_REQUEST_CODE);

We need to give it the UPLOAD_WIDGET_REQUEST_CODE so we can catch the callback.

Once an asset is chosen we can catch it at :

@Override
    protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {

And then we can all the results picked from the upload widget:

 List<UploadWidget.Result> results = data.getParcelableArrayListExtra(UploadWidget.RESULT_EXTRA);

Video

As part of the Cloudinary Android SDK, we also offer our own easy-to-use native video player (based on ExoPlayer).

Our player allows easy integration with Cloudinary features such as transformations and more…

At the upper part you can see our Cloudinary video player with controls.

CldVideoPlayer player = new CldVideoPlayer(this.getContext(), "https://res.cloudinary.com/mobiledemoapp/video/upload/v1706627936/Demo%20app%20content/sport-1_tjwumh.mp4");
player.getPlayer().setRepeatMode(Player.REPEAT_MODE_ALL);
binding.videoPlayerPlayerview.setPlayer(player.getPlayer());
player.play();

In the snippet, we create the CLDVideoPlayer object, we give it the context and URL we want to play then we add it to our view and use .play() to play it.

The lower part of the screen shows a demonstration of a video feed and how easily it can be achieved with our video player.

Conclusion

If you’re an Android developer and you are looking for an easy solution to handle and optimize your assets you should definitely give our Android SDK a look, not only it help your application performance it’ll also give you various widgets to help you make your code simpler and a whole lot of transformations you can use for your assets

The Android SDK can be found here.