{"id":6636,"date":"2025-09-14T16:32:09","date_gmt":"2025-09-14T16:32:09","guid":{"rendered":"https:\/\/obsidiansofteducation.com\/?page_id=6636"},"modified":"2025-09-14T16:32:20","modified_gmt":"2025-09-14T16:32:20","slug":"mit-app-inventor-contacts-app","status":"publish","type":"page","link":"https:\/\/obsidiansofteducation.com\/index.php\/mit-app-inventor-contacts-app\/","title":{"rendered":"MIT App Inventor Tutorial: Create a Favourite Contacts App | Add, Call & Delete Contacts Easily"},"content":{"rendered":"\n

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

Today’s tutorial is inspired by a valued follower\u2019s request. We will be creating a Favourite Contacts app in MIT App Inventor, where you can save your most important contact numbers and call them with just one click. Let\u2019s get started!<\/p>\n\n\n\n

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

Start a new project and call it ContactsApp.<\/p>\n\n\n\n

In screen 1 properties, make the background color orange and align horizontal center.<\/p>\n\n\n\n

Now, drag and drop a PhoneNumberPicker<\/strong> component from the Social <\/strong>palette onto the viewer. There is a similar component called ContactPicker<\/strong>. However, a PhoneNumberPicker<\/strong> shows all contacts with phone numbers, whereas a ContactPicker<\/strong> shows even such contacts that might not have a phone number associated with them. So, for this app, it is more efficient to use a PhoneNumberPicker<\/strong>. In its properties, make the background color white, font bold, font size 18, shape rounded, and change the text to \u201cAdd Contact\u201d.<\/p>\n\n\n\n

Add a ListView <\/strong>component from the User Interface<\/strong> palette below it. <\/p>\n\n\n\n

Now, add a horizontal arrangement<\/strong> below this listview from the layout <\/strong>palette. Make align horizontal and align vertical center alignment for it. Add a button from the user interface inside this arrangement. Rename it to callBtn. Make the background color white, font bold, font size 18, shape rounded, and change the text to \u201cCall\u201d. Select this button and duplicate it by pressing Ctrl + C and Ctrl + V<\/strong> on the keyboard for Windows OS OR Command + C and Command + V<\/strong> on the keyboard for MacOS. Rename this button to deleteBtn. Change the text to \u201cDelete\u201d.<\/p>\n\n\n\n

Now, add a PhoneCall <\/strong>component from the Social <\/strong>palette for making the phone call.<\/p>\n\n\n\n

Add a TinyDB <\/strong>component from the Storage <\/strong>palette for storing the contacts on the device.<\/p>\n\n\n\n

Also, add a Notifier <\/strong>component from the User Interface<\/strong> palette for error messaging.<\/p>\n\n\n\n

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

Make a global list variable for storing the favorite contacts.<\/p>\n\n\n\n

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

When the user clicks on the phone number picker component and chooses a phone number, the component\u2019s after-picking event is triggered, so get that block by choosing phone number picker on the left-hand side. The phone number picker\u2019s contact name property is filled with the picked phone number\u2019s contact name, and the phone number property is filled with the picked phone number. Do a join of these two properties with a \u201c – <\/strong>\u201c between\u2026it is a space dash space<\/strong>, and add this item to the global contacts list variable.<\/p>\n\n\n\n

Store this list in TinyDB and then provide it as elements to the listview.<\/p>\n\n\n\n

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

When the screen is initialized, i.e., the app is started, we need to load already stored favorite contacts from tinyDB and show them in the listview. So, load the global contacts list from the tinyDB. Make sure to use the same tag that you used for storing the contacts in the TinyDB. Provide this list to the listview elements.<\/p>\n\n\n\n

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

Now, we come to the calling logic. Get the call button click event. First, do some error handling, i.e., check that the user has chosen a contact by tapping on it before clicking the call button. So, add an if\/else block to check that the listview\u2019s selection index isn\u2019t equal to 0. Now, we need to extract the phone number from the selected index of the list. So, split the selected list item at \u201c – \u201c. We will be returned a list of two items, and we know that the second item is the phone number, so get that using index=2 and set it to the phone call component\u2019s phone number property. Now, we have two ways of using the phone call component to make a phone call: MakePhoneCall <\/strong>or MakePhoneCallDirect<\/strong>. MakePhoneCall <\/strong>doesn\u2019t require any special permissions, so it can run in the companion app. MakePhoneCallDirect<\/strong> will not work in the companion app and you will need to install the app on your device and then give permission to the app when a permission dialog pops up; it will dial the number for you. On the other hand, MakePhoneCall <\/strong>will open up the keypad with the number loaded in it, but you will have to click the dial button yourself. So, decide what you want to do. I will go with MakePhoneCallDirect, <\/strong>but let me repeat that this will give an error on the companion app. You need to install it on your phone, give it permission when it asks, and then it will work.<\/p>\n\n\n\n

In the else condition, show an alert message using the notifier.<\/p>\n\n\n\n

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

Last is the delete button click event. Check for selection again. If selected, then remove the selected item from the contacts list, store the updated list in TinyDB, and also remove the selected item from the listview. Otherwise, show an alert message about selecting a contact before pressing the Delete button.<\/p>\n\n\n\n

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

And this is done. I hope you liked this tutorial. You can have a look at the video tutorial here:<\/p>\n\n\n\n

\n