Editing designs

Edit an existing design with the Android SDK.

The Android SDK is in a closed, invite-only beta.

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. Open the activity_main.xml file.

  2. Switch to the Code or Split view.

  3. Add a Button widget beneath the existing Button widget:

    <Button
    android: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" />

    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:

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.

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:

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">
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="32dp"
android:orientation="vertical" >
<Button
android:id="@+id/create_design_button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Create design" />
<Button
android: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" />
<ImageView
android: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.myapplication
import android.content.Intent
import android.os.Bundle
import android.widget.Button
import android.widget.ImageView
import androidx.appcompat.app.AppCompatActivity
import com.canva.button.builder.CanvaEditor
import com.canva.button.callbacks.Disposable
import com.canva.button.callbacks.PublishData
import com.squareup.picasso.Picasso
class MainActivity : AppCompatActivity() {
private var disposable: Disposable? = null
private var publishData: PublishData? = null
private lateinit var editDesignButton: Button
override 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()
}
}