Dynamic Buttons with Kodular

Published on February 25, 2022

In this guide, you will learn how to create buttons dynamically with Kodular. Dynamic buttons are buttons, their difference is that dynamic buttons are created via the Blocks, while the Button component creates a button via the Designer.

🏷️ Tags: #kodular, #tutorials-and-guides

Step 1. Setting Up Your Project.

  1. Create a project, give it a suitable name.

  2. In the User Interface, drag out a Button. Set its text to "Create button".

  3. In the User Interface, also drag out a Snackbar.

  4. In Layout > General, drag out a Vertical Scroll Arrangement and place it below the Button. Set both its height and width to Fill parent.

  5. In Dynamic Components, drag out a Dynamic Button. A Dynamic Button is a non-visible component, so you should see that in the Components list, not on the phone. That's it!

Step 2. Creating And Editing App Inventor Blocks.

  1. We create a global variable to record the ID. When you create a dynamic button, you need a unique ID. This variable ensures every dynamic button has a unique ID.

2. When the Create button is clicked, we create a dynamic button, placed inside the Vertical Scroll Arrangement. We also set its Text to "Click on me!"

3. When one of the Dynamic Buttons is clicked, we will show a snackbar that shows the ID of the dynamic button clicked. Done!

Demo Video

dynamic-button.webm