Downloading designs
Download a published design with the Android SDK.
The Canva editor has a Publish button. When a user clicks this button, the Android SDK provides your app with:
  • a URL for downloading the user's design as a PNG file
  • the ID of the user's design
This part of the tutorial series explains how to download and render the user's published design.

Step 1: Set up the UI

  1. 1.
    Open the activity_main.xml file.
  2. 2.
    Switch to the Code or Split view.
  3. 3.
    Add an ImageView element beneath the Button element:
    1
    <ImageView
    2
    android:id="@+id/published_image_view"
    3
    android:layout_width="fill_parent"
    4
    android:layout_height="fill_parent"
    5
    android:layout_marginBottom="16dp" />
    Copied!
  4. 4.
    Import the ImageView widget into the MainActivity.kt file:
    1
    import android.widget.ImageView
    Copied!

Step 2: Get the URL of the published design

When a user clicks the Publish button in the Canva editor, the app can receive a PublishData object.
The PublishData object contains:
  • the ID of the user's design
  • a URL for downloading the design as an image file
The URL is in the form https://export-download.canva.com/<export_file>. If you're using the China version of the SDK, the TLD is .cn instead of .com. You can take the necessary security measures to protect the URL from any malicious attacks.
To receive the PublishDataobject:
  1. 1.
    Add a publishData property to the MainActivity class:
    1
    private var publishData: PublishData? = null
    Copied!
  2. 2.
    Add an onActivityResult function to the MainActivity class:
    1
    override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
    2
    super.onActivityResult(requestCode, resultCode, data)
    3
    }
    Copied!
  3. 3.
    Use conditionals to detect when the activity is receiving an intent:
    1
    override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
    2
    super.onActivityResult(requestCode, resultCode, data)
    3
    4
    if (data == null) {
    5
    return
    6
    }
    7
    8
    if (requestCode == 132 && resultCode == RESULT_OK) {
    9
    // The user has published their design...
    10
    }
    11
    }
    Copied!
    The value of the requestCode variable is based on the integer passed into the launchActivityForResult method.
  4. 4.
    Use the intent's getParcelableExtra function to set the value of the publishData property:
    1
    if (requestCode == 132 && resultCode == RESULT_OK) {
    2
    publishData = data.getParcelableExtra<PublishData>(CanvaEditor.KEY_PUBLISH_DATA)
    3
    }
    Copied!
    The object returned by the getParcelableExtra function has two properties: designId and publishUrl.

Step 3: Render the published design

When a user is taken back to your app, it usually makes sense to download and render the published version of their design. This step explores one way to accomplish this.

Install Picasso

Picasso is "a powerful image downloading and caching library for Android." It significantly streamlines the process of downloading and rendering an image into an ImageView widget. You don't have to use this library, but it can save you from writing some otherwise tedious code.
To install Picasso:
  1. 1.
    Open the app's build.gradle file.
  2. 2.
    Copy the following statement into the dependencies section:
    1
    implementation 'com.squareup.picasso:picasso:2.8'
    Copied!
  3. 3.
    Click Sync now.
  4. 4.
    Import Picasso into the MainActivity.kt file:
    1
    import com.squareup.picasso.Picasso
    Copied!
To learn more about Picasso, refer to the official documentation.

Configure the app's permissions

Add the following element to the AndroidManifest.xml file, as a child of the manifest element:
1
<uses-permission android:name="android.permission.INTERNET" />
Copied!
The presence of this element ensures that the app has permission to download the user's image from the internet. Without this permission, the app can't send HTTP requests.

Render the image

Copy the following code into the onActivityResult function:
1
val publishedImageView = findViewById<ImageView>(R.id.published_image_view)
2
Picasso.get().load(publishData?.publishUrl).into(publishedImageView)
Copied!
This code uses Picasso to download the user's published design and render it in the ImageView widget.
After making these changes: create and publish a design. The published image appears in the app.

Example

android_main.xml

1
<?xml version="1.0" encoding="utf-8"?>
2
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
3
xmlns:app="http://schemas.android.com/apk/res-auto"
4
xmlns:tools="http://schemas.android.com/tools"
5
android:layout_width="match_parent"
6
android:layout_height="match_parent"
7
tools:context=".MainActivity">
8
9
<LinearLayout
10
xmlns:android="http://schemas.android.com/apk/res/android"
11
android:layout_width="match_parent"
12
android:layout_height="match_parent"
13
android:padding="32dp"
14
android:orientation="vertical" >
15
<Button
16
android:id="@+id/create_design_button"
17
android:layout_width="fill_parent"
18
android:layout_height="wrap_content"
19
android:text="Create design" />
20
<ImageView
21
android:id="@+id/published_image_view"
22
android:layout_width="fill_parent"
23
android:layout_height="fill_parent"
24
android:layout_marginBottom="16dp" />
25
</LinearLayout>
26
27
</androidx.constraintlayout.widget.ConstraintLayout>
Copied!

AndroidManifest.xml

1
<?xml version="1.0" encoding="utf-8"?>
2
<manifest
3
xmlns:android="http://schemas.android.com/apk/res/android"
4
xmlns:tools="http://schemas.android.com/tools"
5
package="com.example.myapplication">
6
7
<uses-permission android:name="android.permission.INTERNET" />
8
9
<application
10
android:allowBackup="true"
11
android:icon="@mipmap/ic_launcher"
12
android:label="@string/app_name"
13
android:roundIcon="@mipmap/ic_launcher_round"
14
android:supportsRtl="true"
15
android:theme="@style/Theme.MyApplication"
16
tools:replace="android:allowBackup">
17
<activity android:name=".MainActivity">
18
<intent-filter>
19
<action android:name="android.intent.action.MAIN" />
20
<category android:name="android.intent.category.LAUNCHER" />
21
</intent-filter>
22
</activity>
23
</application>
24
25
</manifest>
Copied!

build.gradle

1
plugins {
2
id 'com.android.application'
3
id 'kotlin-android'
4
}
5
6
android {
7
compileSdkVersion 30
8
buildToolsVersion "30.0.2"
9
10
defaultConfig {
11
applicationId "com.example.myapplication"
12
minSdkVersion 16
13
targetSdkVersion 30
14
versionCode 1
15
versionName "1.0"
16
17
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
18
19
manifestPlaceholders = [deeplinkScheme: "URL SCHEME GOES HERE"]
20
}
21
22
buildTypes {
23
release {
24
minifyEnabled false
25
proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
26
}
27
}
28
compileOptions {
29
sourceCompatibility JavaVersion.VERSION_1_8
30
targetCompatibility JavaVersion.VERSION_1_8
31
}
32
kotlinOptions {
33
jvmTarget = '1.8'
34
}
35
}
36
37
dependencies {
38
implementation project(path: ":canva-button-global-release")
39
implementation 'com.squareup.picasso:picasso:2.8'
40
implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
41
implementation 'androidx.core:core-ktx:1.3.2'
42
implementation 'androidx.appcompat:appcompat:1.2.0'
43
implementation "androidx.browser:browser:1.0.0"
44
implementation 'com.google.android.material:material:1.2.1'
45
implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
46
testImplementation 'junit:junit:4.+'
47
androidTestImplementation 'androidx.test.ext:junit:1.1.2'
48
androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'
49
}
Copied!

MainActivity.kt

1
package com.example.myapplication
2
3
import android.content.Intent
4
import android.os.Bundle
5
import android.widget.Button
6
import android.widget.ImageView
7
import androidx.appcompat.app.AppCompatActivity
8
import com.canva.button.builder.CanvaEditor
9
import com.canva.button.callbacks.Disposable
10
import com.canva.button.callbacks.PublishData
11
import com.squareup.picasso.Picasso
12
13
class MainActivity : AppCompatActivity() {
14
private var disposable: Disposable? = null
15
private var publishData: PublishData? = null
16
17
override fun onCreate(savedInstanceState: Bundle?) {
18
super.onCreate(savedInstanceState)
19
setContentView(R.layout.activity_main)
20
21
val createDesignButton = findViewById<Button>(R.id.create_design_button)
22
createDesignButton.setOnClickListener {
23
val launcher = CanvaEditor.Launcher
24
.builder("API KEY GOES HERE")
25
.setDesignType("Banner")
26
27
disposable = launcher.launchActivityForResult(this, 132)
28
}
29
}
30
31
override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
32
super.onActivityResult(requestCode, resultCode, data)
33
34
if (data == null) {
35
return
36
}
37
38
if (requestCode == 132 && resultCode == RESULT_OK) {
39
publishData = data.getParcelableExtra<PublishData>(CanvaEditor.KEY_PUBLISH_DATA)
40
41
if (publishData == null) {
42
return
43
}
44
45
val publishedImageView = findViewById<ImageView>(R.id.published_image_view)
46
Picasso.get().load(publishData?.publishUrl).into(publishedImageView)
47
}
48
}
49
50
override fun onDestroy() {
51
super.onDestroy()
52
disposable?.dispose()
53
}
54
}
Copied!
Last modified 1mo ago