Creating designs

Search…
Creating designs
Create a new design with the Android SDK.
After setting up the Android SDK, the next step is to allow users to create a design with the Canva editor. This part of the tutorial series explains how to launch the Canva editor from your app.
Step 1: Set up the UI
1.Open the activity_main.xml file.
2.Switch to the Code or Split view.
3.Replace the TextView element with the following code:
1
<LinearLayout
2
    xmlns:android="http://schemas.android.com/apk/res/android"
3
    android:layout_width="match_parent"
4
    android:layout_height="match_parent"
5
    android:padding="32dp"
6
    android:orientation="vertical" >
7
    <Button
8
        android:id="@+id/create_design_button"
9
        android:layout_width="fill_parent"
10
        android:layout_height="wrap_content"
11
        android:text="Create design" />
12
</LinearLayout>
Copied!
This code adds a Create design button to the UI. The LinearLayout element ensures that additional elements are nicely stacked within the UI.
Step 2: Open the Canva editor
1.Copy the following statements into the MainActivity.kt file:
1
import android.content.Intent
2
import android.widget.Button
3
import com.canva.button.builder.CanvaEditor
4
import com.canva.button.callbacks.Disposable
5
import com.canva.button.callbacks.PublishData
Copied!
2.In the onCreate function, add an on-click listener to the Create design button:
1
class MainActivity : AppCompatActivity() {
2
    override fun onCreate(savedInstanceState: Bundle?) {
3
        super.onCreate(savedInstanceState)
4
        setContentView(R.layout.activity_main)
5
​
6
        // Set up the "Create design" button
7
        val createDesignButton = findViewById<Button>(R.id.create_design_button)
8
        createDesignButton.setOnClickListener {
9
            // code goes here
10
        }
11
    }
12
}
Copied!
3.In the on-click listener, use the builder method to create a CanvaEditor.Builder object:
1
createDesignButton.setOnClickListener {
2
    val launcher = CanvaEditor.Launcher.builder("API KEY GOES HERE")
3
}
Copied!
Be sure to replace API KEY GOES HERE with your API key.
4.Use the setDesignType method to set the design type of the design:
1
createDesignButton.setOnClickListener {
2
    val launcher = CanvaEditor.Launcher
3
                        .builder("API KEY GOES HERE")
4
                        .setDesignType("Banner")
5
}
Copied!
The design type determines the default dimensions of the user's design and the templates that Canva shows to the user. For a complete list of design types, refer to Design types.
5.Launch the editor with the launchActivityForResult method:
1
launcher.launchActivityForResult(this, 132)
Copied!
The first argument is the current activity. The second argument is a request code. This code is required to get the result from an activity. The request code must be a unique integer. The integer 132 has no special meaning.
Based on these changes, clicking the Create design button opens Canva in the browser. If you're already logged into Canva, the editor immediately loads. Otherwise, you need to to sign up for or log into an account.
If the Canva editor fails to load, verify that the API key is valid.
Step 3: Clean-up the on-click listener
1.Add a disposable property to the MainActivity class:
1
private var disposable: Disposable? = null
Copied!
2.In the on-click listener, set the disposable property to the value returned by the launchActivityForResult method:
1
disposable = launcher.launchActivityForResult(this, 132)
Copied!
3.Add an onDestroy method to the class and call the dispose method on the disposable property:
1
override fun onDestroy() {
2
    super.onDestroy()
3
    disposable?.dispose()
4
}
Copied!
Example
activity_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
    </LinearLayout>
21
​
22
</androidx.constraintlayout.widget.ConstraintLayout>
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 androidx.appcompat.app.AppCompatActivity
7
import com.canva.button.builder.CanvaEditor
8
import com.canva.button.callbacks.Disposable
9
import com.canva.button.callbacks.PublishData
10
​
11
class MainActivity : AppCompatActivity() {
12
    private var disposable: Disposable? = null
13
​
14
    override fun onCreate(savedInstanceState: Bundle?) {
15
        super.onCreate(savedInstanceState)
16
        setContentView(R.layout.activity_main)
17
​
18
        val createDesignButton = findViewById<Button>(R.id.create_design_button)
19
        createDesignButton.setOnClickListener {
20
            val launcher = CanvaEditor.Launcher
21
                .builder("API KEY GOES HERE")
22
                .setDesignType("Banner")
23
​
24
            disposable = launcher.launchActivityForResult(this, 132)
25
        }
26
    }
27
​
28
    override fun onDestroy() {
29
        super.onDestroy()
30
        disposable?.dispose()
31
    }
32
}
Copied!
Last modified 7mo ago
Copy link
Contents
Step 1: Set up the UI
Step 2: Open the Canva editor
Step 3: Clean-up the on-click listener
Example
activity_main.xml
MainActivity.kt