Getting started

Search…
Getting started
Add the Canva Button to an Android app with the Android SDK.
Canva provides an SDK for adding the Canva Button to Android apps. You can use this SDK to launch the Canva editor from within your app.
Here's how it works:
Your app opens the Canva editor in a Custom Tab. The user then creates or edits a design. When the user clicks the Publish button, your app downloads the user's design as an image file.
This tutorial series explains how to add the Canva Button to an empty Android app. Once you understand the workflow, adapt the steps to add the Canva Button to your existing app.
Prerequisites
This tutorial assumes you have an API key to use the Canva Button. If you don't have one, sign up for an API key.
Step 1: Create a project in Android Studio
You can skip this step if you're adding the Canva Button to an existing app.
1.Open Android Studio.
2.Select Create New Project.
3.Select Empty Activity.
4.Select Next.
5.(Optional) Choose a Name for the application.
6.(Optional) Choose a Package name for the application.
7.Select Language > Kotlin.
8.Select Minimum SDK > API 16.
9.Select Finish.
This is the default MainActivity.kt file:
1
package com.example.myapplication
2
​
3
import androidx.appcompat.app.AppCompatActivity
4
import android.os.Bundle
5
​
6
class MainActivity : AppCompatActivity() {
7
    override fun onCreate(savedInstanceState: Bundle?) {
8
        super.onCreate(savedInstanceState)
9
        setContentView(R.layout.activity_main)
10
    }
11
}
Copied!
Step 2: Add the Android SDK to the project
Maven
1.Add the repository source to the root's build.gradle file:
1
allprojects {
2
  repositories {
3
  // ...
4
  maven { url "https://sdk.canva.com/nativebutton/android" }
5
  }
6
}
Copied!
2.Copy the following statement into the dependencies section of the app's build.gradle file:
1
implementation 'com.canva:design-button:1.3.0'
Copied!
If you're using the china version of the SDK, replace https://sdk.canva.com/nativebutton/android with https://sdk.canva.cn/nativebutton/android and com.canva:design-button:1.3.0 with cn.canva:design-button:1.3.0.
Manual
1.Download the the Android SDK. You should have received the SDK from Canva as a .aar file. There are two versions of the SDK: global and china. The global version of the SDK connects to canva.com, while the china version of the SDK connects to canva.cn. These websites are separate environments, so user's accounts and designs are not shared between them.
2.Select File > New > New Module....
3.Select Import .JAR/.AAR Package.
4.Select Next.
5.In the File name field, enter the path of the .aar file.
6.Select Finish.
The SDK appears in the Project pane.
1.Copy the following statement into the dependencies section of the app's build.gradle file:
1
implementation project(path: ":canva-button-global-release")
Copied!
If you're using the china version of the SDK, replace :canva-button-global-release with :canva-button-china-release.
Step 3: Install the dependencies
1.Open the app's build.gradle file.
2.Copy the following lines into the dependencies section:
1
implementation "androidx.appcompat:appcompat:1.2.0"
2
implementation "androidx.browser:browser:1.0.0"
Copied!
3.Select Sync now.
Step 4: Set up a URL scheme
The Android SDK uses deep links to send information from the Canva editor to the Android SDK. For the SDK to handle deep links, you need a URL scheme. This is a unique value that's tied to your Canva Button API key. Canva should have already provided you with this scheme.
Once you have a URL scheme:
1.Add the following manifestPlaceholders property to the defaultConfig section of the app's build.gradle file:
1
 manifestPlaceholders = [deeplinkScheme: "URL SCHEME GOES HERE"]
Copied!
2.Replace URL SCHEME GOES HERE with the Canva-provided URL scheme.
Refer to the Example for a complete code sample.
The Android and iOS SDKs each have their own, distinct URL schemes.
Step 5: Configure the manifest
In the AndroidManifest.xml file:
1.Add the following property to the manifest element:
1
xmlns:tools="http://schemas.android.com/tools"
Copied!
2.Add an android:allowBackup property to the application element:
1
tools:replace="android:allowBackup"
Copied!
Example
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
    <application
8
        android:allowBackup="true"
9
        android:icon="@mipmap/ic_launcher"
10
        android:label="@string/app_name"
11
        android:roundIcon="@mipmap/ic_launcher_round"
12
        android:supportsRtl="true"
13
        android:theme="@style/Theme.MyApplication"
14
        tools:replace="android:allowBackup">
15
        <activity android:name=".MainActivity">
16
            <intent-filter>
17
                <action android:name="android.intent.action.MAIN" />
18
                <category android:name="android.intent.category.LAUNCHER" />
19
            </intent-filter>
20
        </activity>
21
    </application>
22
​
23
</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 "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
40
    implementation 'androidx.core:core-ktx:1.3.2'
41
    implementation 'androidx.appcompat:appcompat:1.2.0'
42
    implementation "androidx.browser:browser:1.0.0"
43
    implementation 'com.google.android.material:material:1.2.1'
44
    implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
45
    testImplementation 'junit:junit:4.+'
46
    androidTestImplementation 'androidx.test.ext:junit:1.1.2'
47
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'
48
}
Copied!
MainActivity.kt
1
package com.example.myapplication
2
​
3
import androidx.appcompat.app.AppCompatActivity
4
import android.os.Bundle
5
​
6
class MainActivity : AppCompatActivity() {
7
    override fun onCreate(savedInstanceState: Bundle?) {
8
        super.onCreate(savedInstanceState)
9
        setContentView(R.layout.activity_main)
10
    }
11
}
Copied!