Editing designs
Edit an existing design with the Android SDK.
After a user creates a design, they may want to edit that design at a later point in time. To enable this, Canva provides your app with the ID of the user's design. You can use this ID to re-open the design in the Canva editor.
This part of the tutorial series explains how to open an existing design with the Android SDK.

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 a Button widget beneath the existing Button widget:
    1
    <Button
    2
    android:id="@+id/edit_design_button"
    3
    android:layout_width="fill_parent"
    4
    android:layout_height="wrap_content"
    5
    android:enabled="false"
    6
    android:layout_marginBottom="32dp"
    7
    android:text="Edit design" />
    Copied!
    This button should be disabled by default.

Step 2: Open the Canva editor

In the MainActivity class, create a property for the Edit design button:
1
private lateinit var editDesignButton: Button
Copied!
Then, in the onCreate function, create an on-click listener that opens the user's design in the Canva editor:
1
editDesignButton = findViewById<Button>(R.id.edit_design_button)
2
editDesignButton.setOnClickListener {
3
val launcher = CanvaEditor.Launcher
4
.builder("API KEY GOES HERE")
5
.setDesignId(publishData.designId)
6
7
disposable = launcher.launchActivityForResult(this, 132)
8
}
Copied!
This listener is almost identical to the listener for the Create design button. The only difference is that it uses the setDesignId method instead of setDesignType. This method accepts the ID of a design. Canva uses this ID to open the existing design in the editor.
The setDesignId and setDesignType methods are mutually exclusive.

Step 3: Enable the "Edit design" button

In the onActivityResult function, enable the button after the user publishes their design:
1
if (requestCode == 132 && resultCode == RESULT_OK) {
2
publishData = data.getParcelableExtra<PublishData>(CanvaEditor.KEY_PUBLISH_DATA)
3
4
if (publishData == null) {
5
return
6
}
7
8
val publishedImageView = findViewById<ImageView>(R.id.published_image_view)
9
Picasso.get().load(publishData?.publishUrl).into(publishedImageView)
10
11
editDesignButton.isEnabled = true
12
}
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
<Button
21
android:id="@+id/edit_design_button"
22
android:layout_width="fill_parent"
23
android:layout_height="wrap_content"
24
android:enabled="false"
25
android:layout_marginBottom="32dp"
26
android:text="Edit design" />
27
<ImageView
28
android:id="@+id/published_image_view"
29
android:layout_width="fill_parent"
30
android:layout_height="fill_parent"
31
android:layout_marginBottom="16dp" />
32
</LinearLayout>
33
34
</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 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
private lateinit var editDesignButton: Button
17
18
override fun onCreate(savedInstanceState: Bundle?) {
19
super.onCreate(savedInstanceState)
20
setContentView(R.layout.activity_main)
21
22
val createDesignButton = findViewById<Button>(R.id.create_design_button)
23
createDesignButton.setOnClickListener {
24
val launcher = CanvaEditor.Launcher
25
.builder("API KEY GOES HERE")
26
.setDesignType("Banner")
27
28
disposable = launcher.launchActivityForResult(this, 132)
29
}
30
31
editDesignButton = findViewById<Button>(R.id.edit_design_button)
32
editDesignButton.setOnClickListener {
33
val launcher = CanvaEditor.Launcher
34
.builder("API KEY GOES HERE")
35
.setDesignId(publishData?.designId)
36
37
disposable = launcher.launchActivityForResult(this, 132)
38
}
39
}
40
41
override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
42
super.onActivityResult(requestCode, resultCode, data)
43
44
if (data == null) {
45
return
46
}
47
48
if (requestCode == 132 && resultCode == RESULT_OK) {
49
publishData = data.getParcelableExtra<PublishData>(CanvaEditor.KEY_PUBLISH_DATA)
50
51
if (publishData == null) {
52
return
53
}
54
55
val publishedImageView = findViewById<ImageView>(R.id.published_image_view)
56
Picasso.get().load(publishData?.publishUrl).into(publishedImageView)
57
58
editDesignButton.isEnabled = true
59
}
60
}
61
62
override fun onDestroy() {
63
super.onDestroy()
64
disposable?.dispose()
65
}
66
}
Copied!
Last modified 1mo ago