{"id":6607,"date":"2025-09-14T16:15:19","date_gmt":"2025-09-14T16:15:19","guid":{"rendered":"https:\/\/obsidiansofteducation.com\/?page_id=6607"},"modified":"2025-09-14T16:15:21","modified_gmt":"2025-09-14T16:15:21","slug":"mit-app-inventor-diary-tutorial","status":"publish","type":"page","link":"http:\/\/obsidiansofteducation.com\/index.php\/mit-app-inventor-diary-tutorial\/","title":{"rendered":"MIT App Inventor Diary App Tutorial | Display Pictures in ListView | Personal Diary App with Images"},"content":{"rendered":"\n

Hello\u00a0friends, and welcome to Obsidian Soft,<\/p>\n\n\n\n

Today, I will teach you how to make an easy but impressive app using MIT App Inventor: a diary app with pictures. In the process of making this app, you will learn some useful things: <\/p>\n\n\n\n

1. How to use a date picker,<\/p>\n\n\n\n

2. How to use an image picker, <\/p>\n\n\n\n

and best of all, <\/p>\n\n\n\n

3. How to show images in list view. <\/p>\n\n\n\n

So, let\u2019s begin:<\/p>\n\n\n\n

Open up MIT App Inventor and start a new project. Let\u2019s call it DiaryWithPicsApp. Keep the toolkit default. This is very important.<\/p>\n\n\n\n

In the screen1\u2019s properties, make align horizontal center. Also, make the screen orientation portrait and turn on the scrollable checkbox.<\/p>\n\n\n\n

Add a Horizontal Arrangement <\/strong>from the Layout <\/strong>palette. Make align horizontal and align vertical both center. Make height 15% and width fill parent. Select the arrangement and duplicate it by pressing Ctrl + C & Ctrl + V <\/strong>on the keyboard for Windows OR Command + C & Command + V <\/strong>for MacOS. Duplicate again as we need 3 arrangements.<\/p>\n\n\n\n

In the topmost arrangement, drag and drop a TextBox <\/strong>from the User Interface<\/strong> palette. Rename it to dateTxt and make it read-only.<\/p>\n\n\n\n

On its right, drag and drop a DatePicker<\/strong> from the User Interface<\/strong> palette. Change text to \u201cChoose Date\u201d.<\/p>\n\n\n\n

Now, drag and drop a TextBox <\/strong>between the 1st and 2nd horizontal arrangement. Rename to entryTxt. Make height 15% and width 90%.<\/p>\n\n\n\n

Change hint to \u201cEnter diary entry\u201d.<\/p>\n\n\n\n

Below this, drag and drop an Image <\/strong>component from the User Interface<\/strong> palette.<\/p>\n\n\n\n

In the second horizontal arrangement, drag and drop a Button <\/strong>from the User Interface <\/strong>palette. Rename to cameraBtn and change text to \u201cCamera\u201d. Duplicate the button and rename to saveBtn. Change text to Save. Now, drag and drop an ImagePicker from the Media palette between these two buttons. Change text to \u201cChoose Pic\u201d.<\/p>\n\n\n\n

Drag and drop a listview below this horizontal arrangement. Make width fill parent. Change ListViewLayout to Image and MainText. And turn on the checkbox for ShowFilterBar.<\/p>\n\n\n\n

Drag and drop a button inside the last horizontal arrangement. Rename to viewBtn and change text to \u201cView\u201d. Duplicate this button. Rename to deleteBtn and change text to \u201cDelete\u201d. From the Storage <\/strong>palette, drag and drop a TinyDB <\/strong>component onto the viewer. From Sensors<\/strong>, drag and drop a Clock <\/strong>component. Add a Notifier <\/strong>from the User Interface <\/strong>palette and a Camera <\/strong>component from the Media<\/strong> palette.<\/p>\n\n\n\n

Now, click on the \u201cAdd Screen\u201d button and add another screen. Make the screen orientation portrait and align horizontal center. Add an image component, two labels, and one button. Rename the top label to dateLbl and the bottom label to entryLbl. Rename button to backBtn. <\/p>\n\n\n\n

Our UX design is done, so let\u2019s go to the blocks section. We will work on screen 1 first. <\/p>\n\n\n\n

We need a global variable for our list of diary entries.<\/p>\n\n\n\n

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

Get the screen1\u2019s initialize event and set the data picker to the current date, and then update the date textbox with this date. This is done so that the user doesn\u2019t have to choose today\u2019s date. It is prefilled for him. <\/p>\n\n\n\n

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

The initialize event is still not complete as we still need to load data here, but let\u2019s work on saving first.<\/p>\n\n\n\n

If the user clicks on a DatePicker to choose a date, then after picking the date, DatePicker\u2019s AfterDateSet event is triggered. Get this event and just duplicate the dateTxt setting from the initialize event into this event too.<\/p>\n\n\n\n

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

If the user clicks on the image picker and chooses a pic, AfterPicking event is triggered for the ImagePicker component.<\/p>\n\n\n\n

Get it, and the code is simple here. Just set the image component\u2019s picture to the image picker. Selection. This selection is a path to the chosen picture.<\/p>\n\n\n\n

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

When the camera button is clicked, call TakePicture procedure for the camera component.<\/p>\n\n\n\n

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

The after picture<\/strong> event is triggered for the camera once a picture has been taken. Just set the image component\u2019s picture to the image. The image here is a path, too.<\/p>\n\n\n\n

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

Now, get the save button click event.<\/p>\n\n\n\n

First, check using the Control\u2019s if\/else block that image. picture isn\u2019t empty, and the user has entered some text in our entry textbox. Inside the else block, use the notifier to show an alert and a relevant message. <\/p>\n\n\n\n

Then, make a local variable entry for constructing our list of three items in this order:<\/p>\n\n\n\n

    \n
  1. Text inside our readonly dateTxt.<\/li>\n\n\n\n
  2. Text inside the entry textbox<\/li>\n\n\n\n
  3. Image component\u2019s picture<\/li>\n<\/ol>\n\n\n\n

    Add this local entry list to our global list of diaryEntries. Store this global list of diaryEntries in TinyDB against a tag such as \u201centries\u201d.<\/p>\n\n\n\n

    And most importantly, add an item to your listview where mainTxt<\/p>\n\n\n\n

    =date, detailTxt= user entered diary entry, and imageName is the picture in our image component(remember it is a path)<\/p>\n\n\n\n

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

    Now, go back to your screen1.initialize event and we need to load diary entries from TinyDB here.<\/p>\n\n\n\n

    So, set the diary entries list to the data returned by TinyDB against the tag \u201centries\u201d. The spellings of the tag are super important.<\/p>\n\n\n\n

    Then go through the diary entries list one by by using the Control\u2019s for each item block and add items to the listview. <\/p>\n\n\n\n

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

    Now, get viewBtn click event. Check if listview.selection index isn\u2019t 0 using Control\u2019s if\/else block (this is to confirm that the user has tapped on an item in the listview). Show a relevant message using the notifier\u2019s show alert in the else.<\/p>\n\n\n\n

    In if condition, use open another screen block from Control to open screen2, but with startValue: the item in our diaryEntries list against the selection index from the listview.<\/p>\n\n\n\n

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

    Get the delete button click event. Again, do a similar error check to confirm that the user has tapped on an item in the listview. Then, remove the item from the global list diaryEntries and from the listview. After all this, store the updated list in tinyDB.<\/p>\n\n\n\n

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

    Now, open up screen 2 blocks section. Simple code here:<\/p>\n\n\n\n

    Make a global list variable for diaryEntry.<\/p>\n\n\n\n

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

    When the screen is initialized, set this diary entry to get start value block from Control. This is the data being sent by screen1.<\/p>\n\n\n\n

    Now, just set all the components on the screen: dateLbl, entryLbl, and image. <\/p>\n\n\n\n

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

    Get the back button click event and just plug in the close screen block from Control.<\/p>\n\n\n\n

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

    And we are done. This cool diary app with pictures is done, and you have learned many new things that you can use in other apps too.<\/p>\n\n\n\n

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

    \n