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
-
Open the
activity_main.xml
file. -
Switch to the Code or Split view.
-
Add a
Button
widget beneath the existingButton
widget:<Buttonandroid:id="@+id/edit_design_button"android:layout_width="fill_parent"android:layout_height="wrap_content"android:enabled="false"android:layout_marginBottom="32dp"android:text="Edit design" />markupThis button should be disabled by default.
Step 2: Open the Canva editor
In the MainActivity
class, create a property for the Edit design button:
private lateinit var editDesignButton: Button
Then, in the onCreate
function, create an on-click listener that opens the user's design in the Canva editor:
editDesignButton = findViewById<Button>(R.id.edit_design_button)editDesignButton.setOnClickListener {val launcher = CanvaEditor.Launcher.builder("API KEY GOES HERE").setDesignId(publishData.designId)disposable = launcher.launchActivityForResult(this, 132)}
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.
Step 3: Enable the "Edit design" button
In the onActivityResult
function, enable the button after the user publishes their design:
if (requestCode == 132 && resultCode == RESULT_OK) {publishData = data.getParcelableExtra<PublishData>(CanvaEditor.KEY_PUBLISH_DATA)if (publishData == null) {return}val publishedImageView = findViewById<ImageView>(R.id.published_image_view)Picasso.get().load(publishData?.publishUrl).into(publishedImageView)editDesignButton.isEnabled = true}
Example
activity_main.xml
<?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:padding="32dp"android:orientation="vertical" ><Buttonandroid:id="@+id/create_design_button"android:layout_width="fill_parent"android:layout_height="wrap_content"android:text="Create design" /><Buttonandroid:id="@+id/edit_design_button"android:layout_width="fill_parent"android:layout_height="wrap_content"android:enabled="false"android:layout_marginBottom="32dp"android:text="Edit design" /><ImageViewandroid:id="@+id/published_image_view"android:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_marginBottom="16dp" /></LinearLayout></androidx.constraintlayout.widget.ConstraintLayout>
MainActivity.kt
package com.example.myapplicationimport android.content.Intentimport android.os.Bundleimport android.widget.Buttonimport android.widget.ImageViewimport androidx.appcompat.app.AppCompatActivityimport com.canva.button.builder.CanvaEditorimport com.canva.button.callbacks.Disposableimport com.canva.button.callbacks.PublishDataimport com.squareup.picasso.Picassoclass MainActivity : AppCompatActivity() {private var disposable: Disposable? = nullprivate var publishData: PublishData? = nullprivate lateinit var editDesignButton: Buttonoverride fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContentView(R.layout.activity_main)val createDesignButton = findViewById<Button>(R.id.create_design_button)createDesignButton.setOnClickListener {val launcher = CanvaEditor.Launcher.builder("API KEY GOES HERE").setDesignType("Banner")disposable = launcher.launchActivityForResult(this, 132)}editDesignButton = findViewById<Button>(R.id.edit_design_button)editDesignButton.setOnClickListener {val launcher = CanvaEditor.Launcher.builder("API KEY GOES HERE").setDesignId(publishData?.designId)disposable = launcher.launchActivityForResult(this, 132)}}override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {super.onActivityResult(requestCode, resultCode, data)if (data == null) {return}if (requestCode == 132 && resultCode == RESULT_OK) {publishData = data.getParcelableExtra<PublishData>(CanvaEditor.KEY_PUBLISH_DATA)if (publishData == null) {return}val publishedImageView = findViewById<ImageView>(R.id.published_image_view)Picasso.get().load(publishData?.publishUrl).into(publishedImageView)editDesignButton.isEnabled = true}}override fun onDestroy() {super.onDestroy()disposable?.dispose()}}