Image Effects Creating Custom Image Cropping Interfaces in Android How to Create Simple Yet Effective PHP Overlay Understanding Real-Time Image Recognition How to add a shadow effect to an image with CSS How to crop an image in Flutter with Cloudinary How To Rotate an Image with Java Image Processing with Python Rotating an image with CSS Enhancing User Experience with a Responsive Image Slider Building a Python Image Recognition System Building an Interactive JavaScript Image Manipulation Tool Image Align Centering with HTML and CSS Efficient Image Cropping Techniques with Angular and Cloudinary Ultimate Guide to Photo Gallery on Android A Comprehensive Guide to Adding Text to Images on Android Mastering Background Changes in React Applications Comprehensive Guide on Changing Background on Android Devices Mastering Image Rotation in Java A Guide to Adding Text to Images with Python A Guide to Converting Images to Grayscale with Python Introduction Creating an Image Overlay with JavaScript Rotating an Image in Python Creating a Dynamic Photo Gallery with jQuery Creating An Interactive Photo Gallery Using JavaScript Mastering Overlay in Android Mastering Angular Overlay: A Comprehensive Guide Comprehensive Guide to Overlay in Flutter Mastering Overlay React for Responsive Design Solutions Create a Blurred Image with PHP: A Comprehensive Guide Guide to Using Blur Image in Flutter Mastering Blur Image in React Native Mastering Image Blurring in Python Mastering the Art of Image Blurring Mastering the Art of Image Blurring in Java The Ultimate Guide to Blurring Images on Android Understanding and Implementing Blur Image in JQuery An Extensive Walkthrough of Blurring Images with JavaScript How to Use HTML, CSS, and JavaScript to Make an Image Slider HTML Image Tag How to Crop GIFs? How to Align Images with CSS Ken Burns Effect – Complete Guide and How to Apply It Cartoonify – Complete Guide on Cartoonify Image Effect Mastering Web Aesthetics: A Comprehensive Guide to Gradient Fades Sepia Effect: The Ultimate Guide to the Sepia Photo Effect What is Vignette? Guide to Vignette Image Editing Pixelate – The Ultimate Guide to the Pixelation Effect How to Outline an Image: Enhancing Visual Appeal and Depth Make Your Photos Pop with Image Effects Upscale Image – Developers guide to AI-driven image upscaling Image Manipulation: History, Concepts and a Complete Guide A Full Guide to Object-aware Cropping Simplify Your Life with Automatic Image Tagging How To Resize Images In WordPress How To Create a Progress Bar For Asset Uploads Animated GIFs – What They Are And How To Create Them How To Automatically Improve Image Resolution AI Drop Shadow Get Image Dimensions From URLs Automatically Add Sepia Effect To Images Automatically Make an Image a Cartoon Automatically Add Blur Faces Effect To Images Automatically Add Background Removal Effect to an Image How to Resize an Image with React How to Easily Resize an Image with React Native

Mastering Overlay in Android

image overlay android

Android is a powerful platform for creativity and innovation, and developers have a grand stage to shape unique user experiences. In this article, we delve into creating an image overlay app—a tool that allows users to layer images on top of one another for distinct visuals. By doing so, users can effectively heighten their content for social media, design projects, or just lighthearted fun!

Getting Started with Image Overlay on Android

Diving into the world of Android development can be incredibly exciting, especially when manipulating images. Creating an image overlay app is a perfect venture for developers who aim to provide users with a tool to superimpose one image over another, effectively enhancing their visual content for social media, projects, or just for fun.

At its core, overlaying images involves the art of blending, where one image is placed on top of another, allowing certain parts of the base image to stay visible. This is commonly achieved through the use of transparency or blending modes.

In this article:

Step-by-Step Guide to Creating an Image Overlay in Android

Let’s go over a start-to-end example of how to create an app in Android with Java that uses Cloudinary, a media asset management platform, to overlay an image over another image.

Prerequisites

Before we can add an overlay to an asset, we need to create an account on Cloudinary. So head on over to Cloudinary and sign up for free. For this tutorial, we will need our Cloudinary API credentials.

To get these credentials, log in to your Cloudinary account, open the Programmable Media button at the top left corner of your screen, and go to the Dashboard tab. Here, you will see your Cloud Name, API Key, and API Secret. Copy these, as we will need them later.

image overlay android

For this tutorial, we will create an Android script. To do so, you must install Android Studio. If you don’t have it installed, you can download the latest version from the Android Studio website.

With this, we can start creating our Android Studio project.

image overlay android

Creating an Android Studio Project

Now open Android Studio and start by selecting an Empty Activity project. Click on Next to navigate to the next window.

image overlay android

Next, rename your project to your liking. Here, we have named our project Cloudinary. Now select the directory where you want to save your project. Next, select Java as the project language. Optionally, you can select the Minimum SDK requirement for your project. You can change the requirements to your liking, but for this project, we keep the selection as default.

Finally, click on Finish to finish setting up your project.

image overlay android

It will take some time to build your Gradle and download the requirements, but your project should open once completed.

image overlay android

With this, we can start setting up our project.

Setting Up the Necessary Modules

Let’s start by adding some Image holders to the project. To do this, navigate to activity_main.xml, located in the res/layout folder. This will open your main app screen. Here, we will add a few ImageView objects to display the images the user wants to select. We will also add TextView objects to help the user understand the purpose of each ImageView object.

image overlay android

Now, to rename our object, we need to select each object and click on the Code button located in the top-right corner of the screen. This will open up the XML file for the app. Here, we can change the text and variable names of our objects to our liking:

image overlay android

Next, we will add a button to run the Android overlay transformation for each image and show the result in the bottom ImageView. Here is what our app looks like:

image overlay android

Finally, head over to the build.gradle file and add in your imports. For this project, we will be using Picasso, a powerful image downloading and caching library for Android, as well as the Cloudinary Android SDK:

implementation("com.squareup.picasso:picasso:2.8")
implementation("com.cloudinary:cloudinary-android:2.5.0")

Here is what our gradle file looks like:

image overlay android

Finally, head over to the AndroidManifest.xml file and add in permissions for reading image and video files along with accessing the internet:

<!-- Read Storage -->
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
<uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />

<!-- Access Internet -->
<uses-permission android:name="android.permission.INTERNET" />

Here is what our AndroidManifest.xml file looks like:

image overlay android

Programmatically Creating an Android Studio App

With the setup out of the way, we can start coding our project. Let’s first head over to MainActivity.java, located in the com.example.cloudinary folder of our project. In the MainActivity class, we will create several new environment variables that will serve as placeholders for the program:

public class MainActivity extends AppCompatActivity {

   private static final String TAG = "Upload ###";

   private static int IMAGE_REQ=1;
   private Uri imagePath;
   private Uri imagePath2;
   Map config = new HashMap();

   private ImageView BaseImage;
   private ImageView Result;
   private ImageView OverlayImage;
   private Button button;
...

The 3 ImageView variables display the base image, overlay image, and resulting image. The Uri variables help us store the path of our base and overlay images. The button variable refers to our transform button. The HashMap() configures our Cloudinary API. Finally, the TAG variable will find our debug statements in our code.

Now that our variables are set up, we can start working on our onCreate function. Let’s start by retrieving our objects from our XML file. We will do this by using the findViewById() function:

@Override
protected void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.activity_main);

   BaseImage=findViewById(R.id.BaseImage);
   Result=findViewById(R.id.Result);
   OverlayImage=findViewById(R.id.OverlayImage);
   button=findViewById(R.id.button);
...

Next, we will call a function called initConfig(), which we will define later. We will also add an on-click function to our base and overlay images using the setOnClickListener(). These functions will call a requestPermission() function, which we will also define later:

@Override
protected void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.activity_main);

   BaseImage=findViewById(R.id.BaseImage);
   Result=findViewById(R.id.Result);
   OverlayImage=findViewById(R.id.OverlayImage);
   button=findViewById(R.id.button);

   initConfig();

   BaseImage.setOnClickListener(v -> {
       requestPermission(BaseImage);
       Log.d(TAG, ": "+"request permission");
   });
   OverlayImage.setOnClickListener(v -> {
       requestPermission(OverlayImage);
       Log.d(TAG, ": "+"request permission");
   });
...

Finally, we define an on-click function for the button:

       button.setOnClickListener(v -> {

           MediaManager.get().upload(imagePath).option("public_id", "baseimage").dispatch();
           MediaManager.get().upload(imagePath2).option("public_id", "overlayimage").dispatch();

//            String url = MediaManager.get().url().transformation(tr).generate("newimage");
//
           String url = MediaManager.get().url().transformation(new Transformation()
                   .overlay(new Layer().publicId("overlayimage")).chain()
                   .flags("layer_apply")).generate("baseimage");

           Log.d("URL", url);

           Picasso.get()
                   .load(url)
                   .into(Result);
       });

Here, we start by using Cloudinary’s MediaManager to upload the base and overlay images to the Cloudinary cloud with public IDs defined as baseimage and overlayimage, respectively. Next, we use the MediaManager’s .transform() method to generate a new overlay transformation. Finally, we print this transformation to the console and use Picasso to display this new image in the resulting ImageView.

Here is what our final OnCreate function looks like:

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);

       BaseImage=findViewById(R.id.BaseImage);
       Result=findViewById(R.id.Result);
       OverlayImage=findViewById(R.id.OverlayImage);
       button=findViewById(R.id.button);

       initConfig();

       BaseImage.setOnClickListener(v -> {
           requestPermission(BaseImage);
           Log.d(TAG, ": "+"request permission");
       });
       OverlayImage.setOnClickListener(v -> {
           requestPermission(OverlayImage);
           Log.d(TAG, ": "+"request permission");
       });

       button.setOnClickListener(v -> {

           MediaManager.get().upload(imagePath).option("public_id", "baseimage").dispatch();
           MediaManager.get().upload(imagePath2).option("public_id", "overlayimage").dispatch();

//            String url = MediaManager.get().url().transformation(tr).generate("newimage");
//
           String url = MediaManager.get().url().transformation(new Transformation()
                   .overlay(new Layer().publicId("overlayimage")).chain()
                   .flags("layer_apply")).generate("baseimage");

           Log.d("URL", url);

           Picasso.get()
                   .load(url)
                   .into(Result);
       });

   }

Now that we’ve completed our OnCreate function, let’s define our initConfig() function.

The initConfig() function is a simple private void function used to configure our Cloudinary API. We simply use the config hashmap to define our Cloudinary API credentials. We then use this hashmap to initialize our MediaManager. Here is what our function looks like:

   private void initConfig() {

       config.put("cloud_name", "your_cloud_name");
       config.put("api_key","your_api_key");
       config.put("api_secret","your_api_secret");
//        config.put("secure", true);
       MediaManager.init(this, config);
   }

Next, we will define the requestPermission() function.

The requestPermission() function works as its name. It triggers an Android System request to the user, requesting permission to access user files and internet usage. If the permission is granted, the function calls in a selectImage() function. Here is what our function looks like:

private void requestPermission(ImageView img) {
   if(ContextCompat.checkSelfPermission(MainActivity.this, Manifest.permission.READ_MEDIA_IMAGES)
           == PackageManager.PERMISSION_GRANTED)
   {
       selectImage(img);
   }else
   {
       ActivityCompat.requestPermissions(MainActivity.this,new String[]{
               Manifest.permission.READ_MEDIA_IMAGES
       },IMAGE_REQ);
   }

}

Now let’s define the selectImage() function.

We first define a new private ImageView called img, which will indicate which image (either base or overlay) is selected. We then create a new intent inside the function. Intents are used to define abstract descriptions of operations that need to be performed. Here, we use the intent to launch an activity, which we will define next.

private ImageView selectedImage;
private void selectImage(ImageView img) {
   Intent intent=new Intent();
   intent.setType("image/*");// if you want to you can use pdf/gif/video
   intent.setAction(Intent.ACTION_GET_CONTENT);
   selectedImage = img;
   someActivityResultLauncher.launch(intent);
}

Finally, we define our activity as follows:

ActivityResultLauncher<Intent> someActivityResultLauncher = registerForActivityResult(
       new ActivityResultContracts.StartActivityForResult(),
       new ActivityResultCallback<ActivityResult>() {
           @Override
           public void onActivityResult(ActivityResult result) {
               if (result.getResultCode() == Activity.RESULT_OK) {
                   // There are no request codes
                   Intent data = result.getData();
                   if (selectedImage == OverlayImage)
                   {
                       imagePath2 = data.getData();
                       Picasso.get().load(imagePath2).into(selectedImage);
                   }
                   else
                   {
                       imagePath=data.getData();
                       Picasso.get().load(imagePath).into(selectedImage);
                   }
               }
           }
       });

Here, the activity is simply used to define our image paths. If the selected image in the img variable is the Android overlay image, we populate imagePath2 with its actual system path, and we do the same for the base image.

With this, our code is now complete. Here is what our MainActivity.java looks like:

package com.example.cloudinary;

import androidx.activity.result.ActivityResult;
import androidx.activity.result.ActivityResultCallback;
import androidx.activity.result.ActivityResultLauncher;
import androidx.activity.result.contract.ActivityResultContracts;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.app.ActivityCompat;
import androidx.core.content.ContextCompat;

import android.Manifest;
import android.app.Activity;
import android.content.Intent;
import android.content.pm.PackageManager;
import android.net.Uri;
import android.os.Bundle;
import android.util.Log;
import android.widget.Button;
import android.widget.ImageView;

import com.cloudinary.Transformation;
import com.cloudinary.android.MediaManager;
import com.cloudinary.transformation.Layer;
import com.squareup.picasso.Picasso;

import java.util.HashMap;
import java.util.Map;

public class MainActivity extends AppCompatActivity {

   private static final String TAG = "Upload ###";

   private static int IMAGE_REQ=1;
   private Uri imagePath;
   private Uri imagePath2;
   Map config = new HashMap();

   private ImageView BaseImage;
   private ImageView Result;
   private ImageView OverlayImage;
   private Button button;

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);

       BaseImage=findViewById(R.id.BaseImage);
       Result=findViewById(R.id.Result);
       OverlayImage=findViewById(R.id.OverlayImage);
       button=findViewById(R.id.button);

       initConfig();

       BaseImage.setOnClickListener(v -> {
           requestPermission(BaseImage);
           Log.d(TAG, ": "+"request permission");
       });
       OverlayImage.setOnClickListener(v -> {
           requestPermission(OverlayImage);
           Log.d(TAG, ": "+"request permission");
       });

       button.setOnClickListener(v -> {

           MediaManager.get().upload(imagePath).option("public_id", "baseimage").dispatch();
           MediaManager.get().upload(imagePath2).option("public_id", "overlayimage").dispatch();

//            String url = MediaManager.get().url().transformation(tr).generate("newimage");
//
           String url = MediaManager.get().url().transformation(new Transformation()
                   .overlay(new Layer().publicId("overlayimage")).chain()
                   .flags("layer_apply")).generate("baseimage");

           Log.d("URL", url);

           Picasso.get()
                   .load(url)
                   .into(Result);
       });

   }

   private void initConfig() {

       config.put("cloud_name", "...");
       config.put("api_key","...");
       config.put("api_secret","...");
//        config.put("secure", true);
       MediaManager.init(this, config);
   }

   private void requestPermission(ImageView img) {
       if(ContextCompat.checkSelfPermission(MainActivity.this, Manifest.permission.READ_MEDIA_IMAGES)
               == PackageManager.PERMISSION_GRANTED)
       {
           selectImage(img);
       }else
       {
           ActivityCompat.requestPermissions(MainActivity.this,new String[]{
                   Manifest.permission.READ_MEDIA_IMAGES
           },IMAGE_REQ);
       }

   }

   // Select the image from the gallery
   private ImageView selectedImage;
   private void selectImage(ImageView img) {
       Intent intent=new Intent();
       intent.setType("image/*");// if you want to you can use pdf/gif/video
       intent.setAction(Intent.ACTION_GET_CONTENT);
       selectedImage = img;
       someActivityResultLauncher.launch(intent);

   }



   // You can do the assignment inside onAttach or onCreate, i.e, before the activity is displayed
   ActivityResultLauncher<Intent> someActivityResultLauncher = registerForActivityResult(
           new ActivityResultContracts.StartActivityForResult(),
           new ActivityResultCallback<ActivityResult>() {
               @Override
               public void onActivityResult(ActivityResult result) {
                   if (result.getResultCode() == Activity.RESULT_OK) {
                       // There are no request codes
                       Intent data = result.getData();
                       if (selectedImage == OverlayImage)
                       {
                           imagePath2 = data.getData();
                           Picasso.get().load(imagePath2).into(selectedImage);
                       }
                       else
                       {
                           imagePath=data.getData();
                           Picasso.get().load(imagePath).into(selectedImage);
                       }

                   }
               }
           });
}

Running the Android Overlay Application

Now, all we need to do is run our app. To do this, simply click on the Play button at the top-right corner of your screen. This will launch your Android emulator and run your App.

image overlay android

Here is what our app looks like:

image overlay android

Now, let’s select our images. Click on one of the image icons. This will prompt a permission request, which you need to accept for the app to function properly. Once accepted, you can select the images in your phone gallery or storage. Here, we select bike and cloudinary-icon, which we downloaded from the Cloudinary cloud.

image overlay android

Finally, click on the transform button to see your resultant image.

image overlay android

Here is what our image looks like:

image overlay android

Final Thoughts

In the ever-evolving landscape of Android development, mastering image overlays can significantly enhance the user experience of our apps. Android overlays add a layer of interactivity and provide a dynamic way to present information.

Using Cloudinary API in this context offers a whole new world of possibilities for app development and functionality. It simplifies creating, managing, and delivering overlay in Android, making it an invaluable tool for developers. With its robust features and easy-to-use interface, Cloudinary can help us create more engaging and visually appealing Android applications.

Remember, the Android development landscape is vast and constantly changing. Staying ahead means continuously learning and adapting. So, why wait? Sign up for Cloudinary today and start exploring the endless possibilities it offers.

More from Cloudinary:

Dynamically Add and Transform Multiple Image Overlays

Introducing a Text-Overlay Creator

Last updated: Sep 8, 2024