Build an Image Gallery in Java for Android with Headless Oracle Content Management

Introduction

The Android development environment using Java or Kotlin can be a powerful tool for building applications that consume content from Oracle Content Management. Armed with the right content model, you can quickly build the Android UI that makes up a typical image gallery.

In this tutorial, we’ll build a simple image gallery application for Android using Java by leveraging Oracle Content Management as a headless CMS. This Android sample is available on GitHub. The tutorial consists of three steps:

  1. Prepare Oracle Content Management
  2. Build the Image Gallery in Android Studio
  3. Run Your Application

Prerequisites

Before proceeding with this tutorial, we recommend that you read the following information first:

To follow this tutorial, you’ll need:

What We’re Building

Our image gallery will consist of several pages of images of food and drinks available at a coffee shop.

This image shows the gallery demo, drilling into the category of breakfast foods with different kinds of bagels, some with cream or toppings, or both.

Categories are child nodes of a taxonomy and can be organized into hierarchies. For our image gallery, we want to show all available categories regardless of the organization. To accomplish this, we first need to find the available taxonomies, which we do using the Oracle Content Management library’s GetTaxonomiesRequest class to set up and make the request.

Note: The implementation of GetTaxonomiesRequest uses the REST API resource GET /published/api/v1.1/taxonomies.

For each taxonomy found, we get its set of categories. This is done using the Oracle Content Management library’s GetTaxonomyCategoriesRequest class.

Note: The implementation of GetTaxonomyCategoriesRequest uses the REST API GET /published/api/v1.1/taxonomies/{id}/categories.

For each taxonomy category returned, we display a preview consisting of the category name, the number of images in the category, and thumbnail renditions for the first four images.

This image shows images in the Breakfast category.

Note: In addition to publishing the digital assets that we want to view, you also need to publish the taxonomies to the channel.

To proceed, you’ll need to have an active subscription to Oracle Content Management and be logged in with the Content Administrator role.

Step 1: Prepare Oracle Content Management

This tutorial is based on the assumption that you’ve created your asset repository and currently have an empty content model (that is, no content types created).

If you don’t already have an Oracle Content Management instance, see the Quick Start to learn how to register for Oracle Cloud, provision an Oracle Content Management instance, and configure Oracle Content Management as a headless CMS.

For this tutorial, you’ll need to create a content model in either of two ways. There’s a downloadable asset pack available that will fill your empty repository with content types and associated content, or you can create your own content model and content.

To prepare Oracle Content Management:

  1. Create a channel and asset repository.
  2. Import the Oracle Content Management Samples Asset Pack
  3. Upload Your Own Image Assets
  4. Create Taxonomies and Link Them to Image Assets

Create a Channel and Asset Repository

You first need to create a channel and an asset repository in Oracle Content Management so you can publish content.

To create a channel and an asset repository in Oracle Content Management:

  1. Log in to the Oracle Content Management web interface as an administrator.

  2. Choose Content in the left navigation menu and then choose Publishing Channels from the selection list in the page header.

    This image shows the Publishing Channels option selected in the dropdown menu in the Content page header.

  3. In the upper right corner, click Create to create a new channel. Name the channel ‘OCEImageGalleryChannel’ for the purpose of this tutorial, and keep the access public. Click Save to create the channel.

    This image shows the publishing channel definition panel, with ‘OCEImageGalleryChannel’ in the channel name field.

  4. Choose Content in the left navigation menu and then choose Repositories from the selection list in the page header.

    This image shows the Repositories option selected in the dropdown menu in the Content page header.

  5. In the upper right corner, click Create to create a new asset repository. Name the asset repository ‘OCEImageGalleryRepository’ for the purpose of this tutorial.

    This image shows the repository definition panel, with ’ OCEImageGalleryRepository ’ in the repository name field.

  6. In the Publishing Channels field, select OCEImageGalleryChannel to indicate to Oracle Content Management that content in the OCEImageGalleryRepository repository can be published to the OCEImageGalleryChannel channel. Click Save when you’re done.

    This image shows the repository definition panel, with ‘OCEImageGalleryChannel’ in the Publishing Channels field.

Import the Oracle Content Management Samples Asset Pack

You can download a preconfigured Oracle Content Management sample assets pack that contains all required content types and assets for this tutorial.

You can upload a copy of the content we’re using in this tutorial from the Oracle Content Management Samples Asset Pack. This will let you experiment with the content types and modify the content. Download the asset pack archive, OCESamplesAssetPack.zip, and extract it to a directory of your choice:

  1. Download the Oracle Content Management Samples Asset Pack (OCESamplesAssetPack.zip) from the Oracle Content Management downloads page. Extract the downloaded zip file to a location on your computer. After extraction, this location will include a file called OCEImageGallery_data.zip.

  2. Log in to the Oracle Content Management web interface as an administrator.

  3. Choose Content in the left navigation menu and then choose Repositories from the selection list in the page header. Now select OCEImageGalleryRepository and click the Import Content button in the top action bar.

    This image shows the Repositories page, with the OCEImageGalleryRepository item selected.

  4. Upload OCEImageGallery_data.zip from your local computer to the Documents folder.

    This image shows the upload confirmation screen for the OCEImageGallery_data.zip file.

  5. Once it’s uploaded, select OCEImageGallery_data.zip and click OK to import the contents into your asset repository.

    This image shows the selected OCEImageGallery_data.zip file with the OK button enabled.

  6. After the content has been imported successfully, navigate to the Assets page and open the OCEImageGalleryRepository repository. You’ll see that all the related images and content items have now been added to the asset repository.

    This image shows the OCEGettingStartedRepository repository, with all assets that were just imported.

  7. Click Select All on the top left and then Publish to add all the imported assets to the publishing channel that you created earlier, OCEImageGalleryChannel.

    This image shows the OCEImageGalleryRepository repository, with all assets selected and the Publish option in the action bar visible.

  8. Before publishing, you need to validate all the assets. First add OCEImageGalleryChannel as a selected channel, and then click the Validate button.

    This image shows the Validation Results page, with the OCEImageGalleryChannel channel added in the Channels field, all assets to be validated, and the Validate button enabled.

  9. After the assets have been validated, publish all the assets to the selected channel by clicking the Publish button in the top right corner.

    This image shows the Validation Results page, with the OCEImageGalleryChannel channel added in the Channels field, all assets validated, and the Publish button enabled.

Once that’s done, you can see on the Assets page that all assets have been published. (You can tell by the icon above the asset name.)

This image shows the Assets page, with all assets pubished.

After importing the Oracle Content Management Samples Asset Pack, you can start building the image gallery in Android Studio.

Upload Your Own Image Assets

For this tutorial, we’re using an asset repository called ‘OCEImageGalleryRepository’ to build the home page for our gallery site. This home page consists of the title ‘Image Gallery’ as well as image collection albums that have image assets inside.

This image shows the home page for the image gallery, with images of various image categories: sandwiches, drinks, dessert, breakfast, and food.

To add image assets to the gallery asset repository:

  1. Log in to the Oracle Content Management web interface.

  2. Click Assets in the left navigation menu.

  3. Open the OCEImageGalleryRepository repository.

  4. Click Add in the upper right corner of the page to add image assets to the gallery asset repository.

    This image shows the Assets page with content and the Add dropdown menu opened, showing two options: Add from Documents and Add from this computer.

  5. Upload your own new assets from your local computer or choose existing assets already in Oracle Content Management.

You need to create a taxonomy in Oracle Content Management and then assign categories to the assets in your repository.

To create a taxonomy in Oracle Content Management:

  1. Log in to the Oracle Content Management web interface as an administrator.

  2. Choose Content in the left navigation menu and then choose Taxonomies from the selection list in the page header.

    This image shows the Taxonomies option selected in the dropdown menu in the Content page header.

  3. In the upper right corner, click Create to create a new taxonomy. Name the channel ‘OCEImageGalleryTaxonomy’ for the purpose of this tutorial.

    This image shows the taxonomy definition panel, with ‘OCEImageGalleryTaxonomy’ in the taxonomy name field.

  4. Click Create.

  5. Now build your taxonomy by adding categories. Click Add a category.

    This image shows the Add Category page for the ‘OCEImageGalleryTaxonomy’ taxonomy.

  6. Name the parent category item ‘Food’, and add the following child categories:

    • Breakfast
    • Dessert
    • Drinks
    • Sandwiches

    Click Done at the top right of the screen.

    This image shows the category definition page, with ‘Food’ as the parent category and these child categories: Breakfast, Dessert, Drinks, and Sandwiches.

  7. On the Taxonomies page, select the OCEImageGalleryTaxonomy taxonomy and click Promote in the actions bar to make it available for use in your asset repositories.

    This image shows the OCEImageGalleryTaxonomy taxonomy selected in the list, with the Promote option in the action bar visible.

Next, edit the OCEImageGalleryRepository repository to enable the OCEImageGalleryTaxonomy taxonomy for that repository:

  1. Log in to the Oracle Content Management web interface as an administrator.

  2. Choose Content in the left navigation menu and then choose Repositories from the selection list in the page header.

  3. Select and edit the OCEImageGalleryRepository repository.

  4. In the Taxonomies field, select OCEImageGalleryTaxonomy, so you can assign categories from that taxonomy to the assets in the OCEImageGalleryRepository repository.

    This image shows the repository definition panel, with ‘OCEImageGalleryTaxonomy’ in the Taxonomies field.

  5. Click Save.

Then, assign taxonomy categories to each of the image assets in the OCEImageGalleryRepository repository:

  1. Log in to the Oracle Content Management web interface.

  2. Click Assets in the left navigation menu.

  3. Open the OCEImageGalleryRepository repository.

  4. Select one or more image assets, click More in the actions bar, and then choose Categories from the menu.

    This image shows a selected asset in the the OCEImageGalleryRepository repository, with the More selection menu displayed (including the Categories option).

  5. In the Categories panel, click Add Category. Search for the category name in the search bar or select a category from the taxonomy hierarchical structure, and click Add to assign the selected category. You can assign multiple categories to an asset.

    This image shows the Categories panel for an assets, with categories search bar and ‘Food’ taxonomy hierarchical structure.

  6. After you’re done assigning taxonomies to all the image assets, select all assets in your repository and publish them to the OCEImageGalleryChannel channel.

To consume our Oracle Content Management content in the Android application, we can use the Android image gallery sample, which is available as an open-source repository on GitHub.

Note: Remember that using the Android sample is optional, and we use it in this tutorial to get you started quickly. You can also build your own application.

To build the image gallery in Android Studio:

  1. Clone the sample repository, Android SDK, and publish the SDK locally
  2. Open the Android sample in Android Studio
  3. Use the Oracle Content Management REST API to fetch content

Clone the Sample Repository, Android SDK, and Publish the SDK Locally

The Android gallery sample is available as an open-source repository on GitHub.

You’ll first need to clone the sample from GitHub to your local computer, as well as the Android SDK from GitHub if you haven’t already.

Once you have your sample code and the SDK, in order to consume the Android SDK in the sample project, you should build and publish the SDK in your local Maven repository so that it can be consumed by the sample project. Open the Android SDK project in Android Studio and run the publishToMavenLocal task to build and publish the SDK to your local Maven repository.

Open the Android Sample in Android Studio

As with any Android application, you’ll need to import it into Android Studio so that you can build and run it from there in an Android emulator or device. The sample code is already pre-configured with the server and publishing channel that are used to obtain data for the gallery application.

Use the Oracle Content Management REST API to Fetch Content

The REST API for Content Delivery provides access to published assets in Oracle Content Management. Published assets include content items and digital assets, as well as their renditions. We can now leverage the REST API for Content Management to fetch content so that we can render it in our gallery application.

The src/…/samples/gallery/MainActivity.java file has a function for creating the ContentDeliveryClient object, which is used by request objects to make calls to the REST API. The function below is a simplified version of the function from the sample application that shows the values being used.

void createDeliveryClient() {

    // inti and customize the SDK settings
    ContentSettings contentSettings = new ContentSettings();
   
    // initialize the cache settings (optional configured via settings in sample)
    contentSettings.setCacheSettings(new CacheSettings(context.getCacheDir()));

    // set the host and channel token
    String channelToken = "e0b7b1e6421e78189345448deaddb091";
    String host = "https://headless.mycontentdemo.com";

    // create client API we'll use in request objects to make SDK calls
    deliveryClient = ContentSDK.createDeliveryClient(
            host, channelToken, contentSettings);
}

Request Home Page Data Using the Oracle Content SDK

Note: The sequence of SDK calls for the initial home page are in GalleryHomePageRepository.java.

The initial page requires several data calls before the page can properly display:

  1. First, we load the taxonomies for the channel token previously supplied.
  2. For each taxonomy returned, we get all the categories in that taxonomy.
  3. For each category returned, we get the list of assets in that category.
  4. The image URLs for medium and thumbnail renditions for each category’s first four items are are downloaded.

This image shows the listing of taxonomy categories with previews of the first 4 assets in each category.

The entry point for the initial data fetch is the fetchHomePageData() method in GalleryHomePageRepository.java. This method will execute a series of synchronous SDK calls on a separate thread and then return the result asynchronously through a callback.

The intial taxonomies data is retrieved using the GetTaxonomiesRequest class and the fetch() method as shown below.

// create request to get list of taxonomies, limiting the number of results to 10 max
GetTaxonomiesRequest request = new GetTaxonomiesRequest(deliveryClient).limit(10);

// get the list of taxonomies synchronously 
ContentResponse<TaxonomyList> response = request.fetch();

Note that all of the APIs use the pattern of creating a request object with the ContentDeliveryClient object as a parameter.

The limit(<value>) builder method is available because GetTaxonomiesRequest extends the common PaginatedListRequest class used for any request that gets a list of data.

Here we use request.fetch() because we’ve already created a separate thread to make multiple SDK calls in sequence. In another section there is an example of using an asychronous SDK call.

Once our request has successfully completed, we’ll get back an object of type ContentResponse<TaxonomyList>. If response.isSuccess() is true, the list of taxonomies TaxonomyList comes from the getResult() method.

Next, we need to get a list of the taxonomy categories available. We’re still in the separate thread we created for SDK calls, so the next call is also a synchronous call to get the list of taxonomy categories based on the taxonomy id.

// get list of taxonomy categories based on the taxonomy id
GetTaxonomyCategoriesRequest categoriesRequest = 
    new GetTaxonomyCategoriesRequest(deliveryClient, taxonomy.getId());

// get list synchronously
ContentResponse<TaxonomyCategoryList> response = categoriesRequest.fetch();

// get the list from the response (assuming successful)
TaxonomyCategoryList categoryList.getItems = response.getResult();

For each category, we need to follow the same general process to obtain the list of assets associated with the category by making a search request to find matching assets for the category node id.

// go through each category to get list of assets for that category
for(TaxonomyCategory category : categoryList.getItems()) {

    // setup search request to match "Image" type and the category node id
    SearchAssetsRequest assetsRequest = new SearchAssetsRequest(deliveryClient)
            .type(AssetType.TYPE_ASSET_IMAGE)
            .taxonomyCategoryNodeId(category.getId());

    // synchronous request to get matching assets
    ContentResponse<AssetSearchResult> searchResponse = assetsRequest.fetch();

    // search result from the response
    AssetSearchResult searchResult = searchResponse.getResult();

    // get the list of digital assets
    List<DigitalAsset> digitalAssetList = searchResult.getDigitalAssets();

}

Finally, for each of the first four assets in a category, we’ll generate the URL to download the medium rendition for the large image and thumbnail rendition for the three smaller images.

The URL can be used to render the image using your preferred Android image library, but the sample uses the common open-source library Glide.

// (the sample code verifies that there are at least 4 images in the list)
// get the medimum rendition image url for the first main image from the list.
String mainImageUrl = digitialAssetList.get(0).getRenditionUrl(RenditionType.Medium);

// example code using Glide to render the main image into an ImageView
Glide.with(context).load(mainImageUrl).into(mainImageView);

// get the thumbnail rendition for the other 3 images
String smallImageUrl1 = digitialAssetList.get(1).getRenditionUrl(RenditionType.Thumbnail);
String smallImageUrl2 = digitialAssetList.get(2).getRenditionUrl(RenditionType.Thumbnail);
String smallImageUrl3 = digitialAssetList.get(3).getRenditionUrl(RenditionType.Thumbnail);

// load small images using Glide, etc...

Get Gallery Page and Image Preview

The page containing the previews of all images in the category uses an asynchronous request to request all of the images that match the category node id.

This image shows an image gallery with different kinds of bagels, some with cream or toppings, or both.

The asynchronous call is done with a callback method specified for the response as shown below. The full version of this code is in the file GalleryPhotosFragment.java.

public void fetchDigitalAssets() {

    // search for all matching image assets for the specific category node id
    SearchAssetsRequest assetsRequest = new SearchAssetsRequest(getDeliveryClient())
            .type(AssetType.TYPE_ASSET_IMAGE)
            .taxonomyCategoryNodeId(categoryNodeId);

    // fetch the results asynchronously and call the specified method when done
    assetsRequest.fetchAsync(this::showDigitalAssets);

}

public void showDigitalAssets(ContentResponse<AssetSearchResult> response) {
   // handle errors if response.isSuccess is false otherwise process results...
}

When you click on a specific image, the full-sized preview uses the native rendition of the file.

This image shows the preview of a bagel with cream cheese and salmon.

Given a digitalAsset object, you get the native rendition URL and render in Glide like this:

String fullSizeImageUrl = digitalAsset.getRenditionUrl(RenditionType.Native);

// example using Glide to render the main image into an ImageView
Glide.with(context).load(fullSizeImageUrl).into(fullSizeImageView);

Step 3: Running your application

Now that we’ve built our Android gallery application, we need to test it in a mobile emulator or device from Android Studio so that we can debug any issues and preview the application before it goes live.

Conclusion

In this tutorial, we created an image gallery Android application, which can be found on Github. This application uses Oracle Content Management as a headless CMS. After setting up and configuring Oracle Content Management with a channel of published content for the gallery site tutorial, we ran the application to fetch the required content.

Learn about important Oracle Content Management concepts in the documentation.

You can find more samples like this on the Oracle Content Management Samples page in the Oracle Help Center.