{"id":6340,"date":"2025-04-10T09:34:44","date_gmt":"2025-04-10T09:34:44","guid":{"rendered":"https:\/\/obsidiansofteducation.com\/?page_id=6340"},"modified":"2025-04-10T09:34:52","modified_gmt":"2025-04-10T09:34:52","slug":"dynamic-components-in-mit-app-inventor","status":"publish","type":"page","link":"https:\/\/obsidiansofteducation.com\/index.php\/dynamic-components-in-mit-app-inventor\/","title":{"rendered":"How to add Dynamic Components in MIT App Inventor – Dynamic Chatting App or Chatbot"},"content":{"rendered":"\n

Hello friends,<\/p>\n\n\n\n

Welcome to Obsidian Soft!<\/p>\n\n\n\n

In this tutorial, I will teach you how to add dynamic components to your MIT App Inventor app to give a more elegant look to your apps. You can use such dynamic components such as dynamic labels in chatting apps or chatbots to give a WhatsApp or Facebook Messenger like professional look. The following picture shows a Gemini AI chatbot built using dynamic components.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

For this, we need an amazing extension and a big round of applause for the developer!<\/p>\n\n\n\n

Download the dynamic components extension:<\/p>\n\n\n\n

https:\/\/github.com\/ysfchn\/DynamicComponents-AI2\/releases<\/a><\/p>\n\n\n\n

Open up MIT App Inventor. <\/p>\n\n\n\n

https:\/\/ai2.appinventor.mit.edu<\/a><\/p>\n\n\n\n

Start a new project in MIT App Inventor or open a preexisting one (if you are coming here after making a basic Google Gemini AI Chatbot in MIT App Inventor)<\/a>.<\/p>\n\n\n\n

\n\n\n\n

Follow the following steps only if you are working on your <\/strong>Gemini Google AI Chatbot<\/strong> preexisting project<\/strong><\/a>:<\/strong><\/p>\n\n\n\n

Remove the temporary label that we had placed in the vertical scroll arrangement.<\/em><\/p>\n\n\n\n

\n\n\n\n

Follow the following steps only if you are working on a new project:<\/strong><\/p>\n\n\n\n

Make screen orientation portrait. Add a Horizontal Arrangement from Layouts palette onto the viewer. Make align horizontal and align vertical both center in the arrangement’s properties. Also, make width fill parent and height 15%. Drag and drop a text box and button from the user interface palette in this horizontal arrangement. Rename the button to submitBtn. In its properties, change text to Submit <\/strong>and make background color of button: orange. Drag a Vertical Scroll Arrangement from Layouts below the horizontal arrangement. Make the width fill parent and height 75%.<\/em><\/p>\n\n\n\n

\n\n\n\n

Import the downloaded extension under extensions tab on the left. After a successful import, drag its component onto the viewer. <\/p>\n\n\n\n

Our UX design is done so go to the blocks section.<\/p>\n\n\n\n

Add a global variable for msgCounter initialized to 1 and a variable for color initialized to any color you want.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n

Make a procedure called AddMessageBubble that takes in two inputs isUser and message. You will need to click on the cog wheel to add input variables. The isUser input variable is only needed if you are making a chatbot or chatting app where you want to distinguish between messages entered by user and messages by other people or the chatbot.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Make a local variable id and it should be a join of the word \u201cmsg\u201d and msgCounter.<\/p>\n\n\n\n

Make a local variable labelId and it should be a join of id and word \u201cLbl\u201d<\/p>\n\n\n\n

Next, increment the msgCounter global variable i.e. add 1 to it.<\/p>\n\n\n\n

Now, create a dynamic horizontal arrangement in the chatScroll (the vertical scroll arrangement) and give it a width of fill parent by setting Width property to -2.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Next, we are going to check if isUser is true because this means that this message was entered by the user and should have a different background color. Use light colors so that black text looks prominent on them. We set the color global variable differently depending on isUser and we also align the horizontal arrangement towards the right if isUser and left if not isUser.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Next, we are going to actually add a label inside this dynamic horizontal arrangement and then set its properties.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

It is super important while using the dynamic components extension that you use exact spellings as shown in this tutorial.<\/p>\n\n\n\n

Now, call this procedure when you need to create such dynamic labels. Remember to provide an isUser value as true or false depending on if the message is by the user or by someone else.<\/p>\n\n\n\n

The following code demonstrates where to call it if you are making a Google Gemini AI Chatbot app:<\/strong><\/p>\n\n\n\n

We need to call this procedure from two places. At the beginning of sendBtn click event:<\/em>
<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

And at the end of web1.gotText event where we had previously placed the setting of the temporary label.<\/em><\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

And now your chat with Gemini will look like the demo.<\/em><\/p>\n\n\n\n

I hope you found this tutorial useful and educational.<\/p>\n\n\n\n

You can have a look at the video tutorial too:<\/p>\n\n\n\n

\n