Cloudinary Blog

Introducing the Cloudinary Demo Android App, Part 2

How to Customize Cloudinary's eCommerce Android App

Recently we added the Cloudinary Demo - eCommerce App to the Google Play Store. This app demonstrates the best practices for optimal delivery of images on a storefront, including category pages, product pages, and a shopping cart. At the time, we published Introducing the Cloudinary Demo Android App, Part 1, which provided an under-the-hood tour of how the eCommerce Android App was designed and how Cloudinary was integrated throughout.

The app demonstrates how to leverage some of Cloudinary's capabilities, such as managing file uploads, displaying images responsively, and optimizing delivery through global Content Delivery Networks (CDNs). The app was developed as an open source project so that you can explore the code for yourself and see how to improve your users' experience and the performance of your apps by delivering images, enhanced and optimized for different contexts.

CloudinaryDemoApp1 CloudinaryDemoApp1 CloudinaryDemoApp1

In part 2 of this series, we will focus on how the open source code that we've published on GitHub can also be used as the code base for developing your very own Android app, using Cloudinary for media upload, optimization, and responsive delivery.

Tip
Some sections in this post assume you have a basic understanding of how the Cloudinary Demo Android App is designed and structured. If you didn't get a chance to read Part 1 of this post, or it's been a while since you did, we recommend reading it before continuing.

Overview

After you fork the Android Demo Application github repository, you just need to make a few basic changes to make the app your own:

  1. Configure your App with the Cloud Name to your account.
  2. Update the Data Flow from the data and remote packages, through the repo to the ViewModels, and then on to the UI.
  3. Give your Product Images Context so that your app will use your own product images from your own Cloudinary account.
  4. Switch Over to a Real Backend Flow instead of the local file implementation.

So that's it in a nutshell. The following sections go into more detail:

Configure your App

Your App needs to be updated to use the Cloud Name of your own Cloudinary account to retrieve product images. If you don't have a Cloudinary account yet, you can easily sign up for a free account. The first step is to update the cloudName in two places:

  • The config.xml file located under /res/values
  • The CloudinaryWebService.java public interface located under java/com/cloudinary/android/ecommerce/demo/remote

The App uses Cloudinary's client-side resource lists to return all the images that have been tagged with e_commerce_product, however this can be changed to a tag of your choice, under the config.xml file located under /res/values. Make sure that your App will be able to access Cloudinary in this way: open your Management Console and then navigate to Settings => Security => Restricted image types and make sure that the Resource List check-box is clear.

Update the Data Flow

The starting point for personalizing the app for your own needs is updating the data package to use your own models. Make changes as follows:

  1. Adapt the model itself to use a class representing your own products (e.g. for this app, a Product is the main model).
  2. Update the ProductDatabase to include the new and modified models.
  3. Update the ProductDao to refactor the queries, and add/remove queries to handle the new model and relations.

The next step is adapting the remote package for your own use. Change the fields and parameters to use the new models. Once that’s done, the ProductRepo also needs to be updated similarly: modify the parameters, fields and types to handle the new models as well.

Now on to the viewmodel package, to update the parameters and types as well as the application logic if needed, followed by the necessary UI changes in the app package. Most of the fragments, screens, and grids can and should be reused. XML layout files can be updated and those changes should be reflected in the different adapters (e.g. CategoriesAdapter, ProductAdapter etc.).

Give your Product Images Context

All images to be included in your app need to have a common tag (e_commerce_product by default). The app logic utilizes product information stored with the images as ‘context’ key-value pairs: make sure that all images to be displayed also include the following 6 ‘context’ key value pairs:

  • department: “men” or “women”.
  • description: a short string description, 2-3 words.
  • name: a short string, preferably one word.
  • price: a number.
  • productId: a number
  • isMain: a boolean value determining whether this is the product’s main image (only one asset per product should have “true” for this field).

All the context key-value pairs, except for isMain, should be identical across all the images that represent the same product. An example of the context key/values assigned to an image:

“department”:“men”,
“description”:“Messenger bag”,
“name”:“Messenger”,
“price”:“245",
“productId”:“10",
"isMain":"false"

Switching Over to a Real Backend Flow

Lastly, you'll probably want to switch the injected remote repository to use a backend instead of the local file implementation that we used for demo purposes:

  1. Update the ProductRepo.java file located under java/com/cloudinary/android/ecommerce/demo/data: change the label in the constructor annotated parameter, from cloudinary to backend (i.e., @Named(“cloudinary”) should become @Named(“backend”))
  2. Change the implementation of BackendWebService.java located under com/cloudinary/android/ecommerce/demo/remote to retrieve and save data against your own backend. Both saveProduct() and getAllProducts() should be completely re-written, while all the other methods should be completely removed.
  3. Your backend logic should now determine the relevant PublicIds of the images for each product and the product metadata should now be implemented directly in the model from your backend, and not from the context key-value pairs attached to the image.
  4. If any Android components are added, removed or modified, verify the injection engine is updated accordingly (the di package).

To App or not to App

The open source code of the Cloudinary Demo - eCommerce Android App can be easily modified to provide the framework for your own App. The code takes advantage of existing open source libraries and gets them to work together while adopting best practices for efficient management and optimal delivery of your images when building your own Android App. If you don't have a Cloudinary account yet, you can sign up for a free account and give it a try.

Recent Blog Posts

Cloudinary offers ongoing support to Scene7 customers in their DAM business goals.

With the imminent shutdown of Scene7 after rebranding by Adobe as part of Dynamic Media, dozens of leading eCommerce companies, among them the world’s top three eCommerce brands, have migrated to Cloudinary as a viable alternative to Scene7. And for good reason: time is of the essence and Cloudinary promises not only a smooth migration flow and continuity of their rich-media initiative, but also numerous superb capabilities.

Read more
Applying Your Own Duotone Effect Filter With Cloudinary

The trendy duotone effect is ubiquitous in today’s websites and illustrations for good reason: it highlights content well, rendering it pleasing to the eye, especially on minimal web platforms. The sky is the limit as to how much you can play with colors while applying a duotone effect. You could keep trying them out until something stands out.

Read more
New q_auto Setting For Content-Aware Video Compression

It’s widely known that video is the most effective way of communicating your brand to your audience. It is also an extremely varied medium. Take a look at the existing videos in your media library, you’ll find videos with differing lengths, colors, brightness and density of content. All of these videos need to be optimized in a different way. Cloudinary’s new automatic video quality can intelligently analyze each and every video to encode it using the most optimized settings, ensuring the best trade-off between file size and visual quality, whilst also maintaining a consistent experience throughout. All you need to do is set the quality parameter to auto (q_auto in URLs) and Cloudinary will take care of the rest.

Read more
Automatic Video Transcoding

Delivering video files to users can be a much more complex undertaking than many people stop to consider. There are a large variety of video formats and codecs to choose between, and various optimization parameters for encoding the videos. Parameters such as bitrate, key-frame-interval, and frame-rate will have an effect on the visual quality and bandwidth requirements when delivering the video file. To make matters worse, there are so many potential viewing devices out there (desktops, laptops, tablets, mobiles, wearables, etc). Each of these devices have different browsers or apps, and they all support different formats and codecs!

Read more
Dynamic Video Platform: 7 Use Cases

Increasingly, companies large and small, across all industries are enhancing their customer and brand experiences through video. We’ve just launched our dynamic video platform and shared our thoughts on the differences between traditional online video platforms (OVPs) and dynamic ones when it comes to creating, managing, and delivering compelling and engaging videos.

Read more