FAST-CLI
Back to Tutorials

Building a Custom Button Extension from Scratch

Learn how to create a complete App Inventor extension with FAST-CLI

Beginner25 minutesSource Code

Introduction

In this tutorial, we'll build a custom button extension for MIT App Inventor using FAST-CLI. Our button extension will support custom colors, animations, and events not available in the standard App Inventor Button component.

What You'll Learn

  • How to set up a FAST-CLI project
  • Creating a custom extension with properties, methods, and events
  • Working with the AndroidManifest.xml file
  • Building and testing your extension

Prerequisites

  • FAST-CLI installed on your computer (see Installation Guide)
  • Basic knowledge of Java programming
  • A text editor or IDE (like VS Code, IntelliJ, or Android Studio)
  • MIT App Inventor account for testing
1

Setting Up Your Project

Create a new FAST-CLI extension project

Let's start by creating a new extension project using FAST-CLI. Open your terminal and run the following command:

fast create FancyButton

This will start the interactive project creation process. You'll be prompted to enter:

  1. Package name (e.g., com.example.fancybutton)
  2. Author name (your name)
  3. Programming language (select Java)

Here's an example of what the interaction might look like:

$ fast create FancyButton
> Enter package name: com.example.fancybutton
> Enter author name: Your Name
> Select language (Java or Kotlin) [Default: Java]: Java
> Done.

[✓] Project created successfully!

After the project is created, you'll have a directory structure that looks like this:

FancyButton/
├── assets/
├── deps/
├── fast.yml
└── src/
    ├── AndroidManifest.xml
    ├── FancyButton.java
    └── proguard-rules.pro

Now, navigate to your project directory:

cd FancyButton
2

Examining the Configuration

Understand the fast.yml configuration file

3

Understanding the Java File

Review and modify the generated Java file

Step 1 of 8