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.

  1. Open the activity_main.xml file.

  2. Switch to the Code or Split view.

  3. Replace the TextView element with the following code:

    <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" />
    </LinearLayout>
    markup

    This code adds a Create design button to the UI. The LinearLayout element ensures that additional elements are nicely stacked within the UI.

  1. Copy the following statements into the MainActivity.kt file:

    import android.content.Intent
    import android.widget.Button
    import com.canva.button.builder.CanvaEditor
    import com.canva.button.callbacks.Disposable
    import com.canva.button.callbacks.PublishData
    kotlin
  2. In the onCreate function, add an on-click listener to the Create design button:

    class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    // Set up the "Create design" button
    val createDesignButton = findViewById<Button>(R.id.create_design_button)
    createDesignButton.setOnClickListener {
    // code goes here
    }
    }
    }
    kotlin
  3. In the on-click listener, use the builder method to create a CanvaEditor.Builder object:

    createDesignButton.setOnClickListener {
    val launcher = CanvaEditor.Launcher.builder("API KEY GOES HERE")
    }
    kotlin

    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:

    createDesignButton.setOnClickListener {
    val launcher = CanvaEditor.Launcher
    .builder("API KEY GOES HERE")
    .setDesignType("Banner")
    }
    kotlin

    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:

    launcher.launchActivityForResult(this, 132)
    kotlin

    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.

  1. Add a disposable property to the MainActivity class:

    private var disposable: Disposable? = null
    kotlin
  2. In the on-click listener, set the disposable property to the value returned by the launchActivityForResult method:

    disposable = launcher.launchActivityForResult(this, 132)
    kotlin
  3. Add an onDestroy method to the class and call the dispose method on the disposable property:

    override fun onDestroy() {
    super.onDestroy()
    disposable?.dispose()
    }
    kotlin
<?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" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
markup
package com.example.myapplication
import android.content.Intent
import android.os.Bundle
import android.widget.Button
import androidx.appcompat.app.AppCompatActivity
import com.canva.button.builder.CanvaEditor
import com.canva.button.callbacks.Disposable
import com.canva.button.callbacks.PublishData
class MainActivity : AppCompatActivity() {
private var disposable: Disposable? = null
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)
}
}
override fun onDestroy() {
super.onDestroy()
disposable?.dispose()
}
}
kotlin