Learn how to create personalized share images in your Android app so your users can share achievements on Instagram, Facebook, Twitter or messengers.

If you want to support organic growth of your app, you better make it easy for your users to talk about it. One great way to do that is to prompt them to share their own in-app achievements and other user-generated content with their friends.

About this tutorial

In this tutorial, I'm going to show you how to implement personalized share images in your Android app with the Placid Android SDK.

What the Placid mobile integration offers:

  • On-device generation of personalized images from templates
  • Custom template designs
  • A drag & drop template editor
  • Dynamic content layers with auto-resizing for text and images
  • A collection of preset designs
  • Easy implementation

The setup takes only a few minutes, and you'll be able to generate unlimited images (offline and directly on-device, no API calls needed).

Alternative: Create share images using screenshots of Android app views

Before we dive in: I think our SDK is a super efficient solution for creating in-app share images (of course 😉), but you can use custom code as well.

For this you'll need to code up a custom view containing your share image design, and then screenshot it.

 public static Bitmap createImageFromView(View view) {

    // Measure the size of the view
    view.measure(MeasureSpec.UNSPECIFIED, MeasureSpec.UNSPECIFIED);

    // Create a bitmap matching the size of the view
    Bitmap shareImage = Bitmap.createBitmap(view.getWidth(), view.getHeight(),Bitmap.Config.ARGB_8888);
    view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());

    // Bind a canvas to it
    Canvas canvas = new Canvas(shareImage);
    Drawable background = view.getBackground();

    if (background != null) {
       background.draw(canvas);
    }

    view.draw(canvas);

    return shareImage;
}   

While the screenshot part is relatively easy, it will take you some time to create the view containing the custom design of your share images. From our experience, it's a back and forth with the design team and it never looks 100% perfect. As devs, it's definitely not our favourite part of developing an app.

For design & marketing teams it's also a bit frustrating: They can't try out new designs or new ways of sharing in-app experiences quickly, because of this development bottleneck.

Placid offers a drag & drop editor for dynamic image templates that can be created directly by your designers. It's very flexible and saves you a lot of time that you would otherwise spend pixel-pushing a layout.

What we're going to build: Share images for a book tracker app

In this tutorial, we're going to create share images for our imaginary book tracker app Finereads.

Our app lets users discover books, organize them in collections, and log & review books they read. They can also share their collection and achievements with friends.

Demo book tracking app

Targeted at book rats, Finereads wants to build a large community of readers to gather reviews and to feed the algorithm for book recommendations. To help achieve that goal, we're going to implement auto-generated share images for every book our users read, so they can share it in their Instagram stories.

Ideally, they will want to show off to their friends ("Look, I've read a book!") and share their experience. We're helping them to look well-read in front of their network, and they spread the word about our app. A classic win-win!

To support sharing our platform often, we'll be creating images to share via stories after having read and reviewed a book.

Instagram Story Templates for Book Collection App

We're going to focus on generating these personalized images and social sharing, leaving out the actual share screen UI.

What you need

If you want to follow along the tutorial, you will need a Placid account – you can sign up for free. I'll also assume you already have an Android project set up to test in.

Set up a Placid project

In Placid, we first have to create a new project. We'll add a mobile integration to be able to use the Placid Android SDK for image generation.

If you prefer to use an existing Placid project, you can add a mobile integration to it in the project settings.

Create templates

Next, we'll add Placid templates for the designs of our images. We offer some preset designs you can use if you're not a designer – or you can hand this off to your design team completely 😉

We'll add a new template in our Placid project in the Templates menu, choosing the Story size (use the preset size or set the canvas to 1080x1920).

Using the drag & drop editor, we're creating dynamic text and image layers for the values we're going to personalize later: The user's avatar, the book cover and the link to their profile.

Placid template editor with Instagram story template

The text and images we use in the template are used as default values that will be replaced later. We recommend using real values to test how they are going to look in the layout you're designing.

The layer names are going to be used later to identify and fill them via code, so use names that make sense to you. By default, all layers are dynamic - but you can switch layers like the logo or design elements like cards to static using the 🔄 symbol in the layer list.

Get your (demo) SDK license

Next, we're going to add a (demo) Mobile SDK license to our Placid project to be able to download and package the templates in our app for on-device image generation.

Go to the project settings and switch to the Mobile tab in the Integration settings panel. There, you can add a demo license for testing (or a full license if you already have a Placid subscription).

Placid mobile license settings

Keep your license key handy for the configuration of the SDK in a few minutes!

Download your templates

Back in the Templates menu, we're using the Integrate button of our template to configure a downloadable template package that we'll use with the SDK later.

Integrate Placid template

In our case, we'll choose the template we just designed.

Placid template download for mobile

There's an interactive code demo in the Integrate dialogue as well, so you can explore how template modifications are done. You can play around a bit to get a feeling for the functionality, or switch right into your Android Studio project now.

Integrate the Placid Android SDK

First, copy the template package to a project directory of your choosing.

Then we're going to integrate the Placid Android SDK into your project by adding our JitPack repository to your build file. You can find the detailed installation instructions in the SDK repo on Github.

Configure the SDK with the path to your templates and the license key from your project settings.

PlacidSDK.configure(
    licenseKey = "your-placid-license-key",
    bundleResId = R.raw.placid_templates,
)

Generate images from Placid templates in your Android app

In the next steps we're going to call one of our templates and generate an image with custom values from it.

Retrieve your template

Find the ID of your template in the Template menu in your Placid project to retrieve it.

val template = PlacidSDK.getTemplate("bm0ipoefu")

Placid template ID

Modify layer data

Now we're ready to fill our data into the dynamic layers (user profile image and link, book cover) of our templates to render a personalized image for our users.

To do so, we have to call the dynamic layers of our template (using their layer name) and modify their properties. In our example, we're only changing their content (text and image URLs), but Placid also offers customization of colors, borders, visibility and more. You can find all properties in our API documentation!

Dynamic Placid template layers

template.textLayer("profile-link") {
    text = "Find my reading list on finereads.com/" + userName // custom variable containing username string
}

template.imageLayer("user-img") {
    bitmap = userAvatar // example variable containing a bitmap
}

template.pictureLayer("user-img") {
    bitmap = bookCover // example variable containing a bitmap
}

These values are static examples – you would of course use your own variables containing user data here.

Render images

Once you have filled the layers with your values, you're ready for rendering.

viewModelScope.launch {
    val placidImage = template.renderImage() //suspended function
}

And we're done! Your generated images are now ready to be used for social sharing.

Share images to Instagram Stories

How exactly your share UI works is up to you: You can for example let your users choose between different share image templates or present them a random one each time.

We're not going to code up any UI today, but to complete the workflow of sharing, I'll walk you through one last code example showing you how to implement a "Share as Insta story" functionality using rich URL schemes for Instagram Stories.

// Instantiate an intent
Intent intent = new Intent("com.instagram.share.ADD_TO_STORY");

// Attach your App ID to the intent
String sourceApplication = "1234567"; // This is your application's FB ID
intent.putExtra("source_application", sourceApplication);

// Attach your image to the intent
Uri shareImageUri = FileProvider.getUriForFile(this, "your_package_name.provider", placidImage);
intent.setDataAndType(shareImageUri, MEDIA_TYPE_JPEG);

// Grant URI permissions for the image
intent.setFlags(Intent.FLAG_GRANT_READ_URI_PERMISSION);

// Instantiate an activity
Activity activity = getActivity();

// Verify that the activity resolves the intent and start it
if (activity.getPackageManager().resolveActivity(intent, 0) != null) {
  activity.startActivityForResult(intent, 0);
}  

Within this snippet, we have created a URL for story sharing with Instagram's URL schemes. This code snippet would take the generated image and open it in the Instagram story composer.

What's next?

Now that you know how to create share images, you can think about all the ways you can implement them in your apps.

You can use Placid for any image you need to generate – on mobile, but also via our API or other nocode solutions. Have fun ✌️