{"id":5494,"date":"2024-12-31T16:43:57","date_gmt":"2024-12-31T16:43:57","guid":{"rendered":"https:\/\/obsidiansofteducation.com\/?page_id=5494"},"modified":"2024-12-31T16:44:20","modified_gmt":"2024-12-31T16:44:20","slug":"doodle-app-in-mit-app-inventor","status":"publish","type":"page","link":"https:\/\/obsidiansofteducation.com\/index.php\/doodle-app-in-mit-app-inventor\/","title":{"rendered":"Doodle App in MIT App Inventor"},"content":{"rendered":"\n<p>Hello friends and welcome to Obsidian Soft.<\/p>\n\n\n\n<p>In this tutorial, I will teach you how to make a basic doodle app with sharing feature. You can share your doodles with friends and family using WhatsApp, email, or even post them on Facebook or Instagram.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/obsidiansofteducation.com\/wp-content\/uploads\/2024\/12\/snake20game2021.png\" alt=\"\"\/><\/figure>\n<\/div>\n\n\n<p>Start a new project and call it ShareDoodleApp.<\/p>\n\n\n\n<p>Go to media and upload square-size images that will serve as background for eraser, pencil, new doodle, and share doodle buttons.<\/p>\n\n\n\n<p>I am using these images:<\/p>\n\n\n\n<p>https:\/\/www.flaticon.com\/free-icons\/eraser<br>https:\/\/www.flaticon.com\/free-icons\/share<br>https:\/\/www.flaticon.com\/free-icons\/pencil<br>https:\/\/www.flaticon.com\/free-icons\/blank-page<\/p>\n\n\n\n<p>After uploading media, go to screen1 properties and make the screen orientation portrait. Drag and drop a&nbsp;<strong>Canvas<\/strong>&nbsp;from&nbsp;<strong>Drawing and Animation<\/strong>. For the canvas1 properties, make the background color yellow,&nbsp; height 80%, width fill parent, line width: 4.0, and paint color black.<\/p>\n\n\n\n<p>Drag and drop a&nbsp;<strong>Horizontal Arrangement<\/strong>&nbsp;from the&nbsp;<strong>Layout&nbsp;<\/strong>and put it below the canvas. Make height 15% and width fill parent. Make align horizontal and align vertical center and make background-color: white.<\/p>\n\n\n\n<p>Drag and drop a&nbsp;<strong>Button<\/strong>&nbsp;from&nbsp;<strong>User Interface<\/strong>&nbsp;inside the horizontal arrangement. Rename to eraserBtn and make height and width 50 pixels. Choose the uploaded eraser image as the Image property and make the text property empty.<\/p>\n\n\n\n<p>Duplicate eraserBtn by selecting it and pressing&nbsp;<strong>Ctrl + C and Ctrl + V<\/strong>&nbsp;for Windows OR&nbsp;<strong>Command + C and Command + V<\/strong>&nbsp;for MacOS.<\/p>\n\n\n\n<p>Rename to pencilBtn and change the image property to pencil image.<\/p>\n\n\n\n<p>Duplicate pencilBtn and rename to clearBtn and change image property to new doodle image.<\/p>\n\n\n\n<p>Duplicate clearBtn and rename to shareBtn and change image property to share doodle image.<\/p>\n\n\n\n<p>From the&nbsp;<strong>Social<\/strong>&nbsp;palette, drag and drop a&nbsp;<strong>Sharing<\/strong>&nbsp;component.<\/p>\n\n\n\n<p>Screen Design is done so let\u2019s go to the blocks section.&nbsp;<\/p>\n\n\n\n<p>When someone drags his\/her finger on the screen, canvas\u2019s Dragged event is triggered so drag and drop that from canvas1 and use canvas\u2019s drawLine procedure to draw a line from the previous position to the current position.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/obsidiansofteducation.com\/wp-content\/uploads\/2024\/12\/tJKwcnyGDCLeWukt2ZGcHYize954_1HNP1Vd0RTZvzmajfb7bVUJGsw4OuekkcTuJ-Burj_TrgO5XGhDU6cfNDuq_uga1eiY7hzEdsWQYXa6VwxxZS5O0NOcpnhXSU0qxOmYVRczX1V0sbeazpKGiw.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>When someone just touches the canvas, we only want to draw a circle there so get canvas\u2019s<br>Touched event and call canvas.DrawCircle at x and y with radius 2.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/obsidiansofteducation.com\/wp-content\/uploads\/2024\/12\/uhEnASzcI-kGIeRDkcvuZfCfDREXf7oSr0VjOSo9T6Y4qQ2UbTsVVqhFwXYYRJnFTXiWUVgOsIM3eogyT9sqml9RNNl216yxVN_l5Eh4J23PD7spr8MaTPtbLzsHlXw5e5mMH1tDYXJKVxf7ZFfgc5Y.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>When eraserBtn is clicked, we are just going to change the canvas\u2019s paint color to canvas\u2019s background color however this doesn\u2019t work for iPhones so to make sure that it works even for iPhones, use the actual color block for the color that you have chosen for canvas\u2019s background.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/obsidiansofteducation.com\/wp-content\/uploads\/2024\/12\/cwJucMINfpiCYT_Irswx9giGLrAZ73QswFaggvAZVlIHtgympE2NH0V7TR9_7Mwm8IwvPjpAPZ_AgW5nUAhH8mlBmW0onwCKpk_CvCRumSZK-0zOb3zZrre5ECW-YX_fYrlyDvwZRQI49YLcxwufcfQ.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>When the pencilbtn is clicked, change the paint color to black.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/obsidiansofteducation.com\/wp-content\/uploads\/2024\/12\/R35I2lieB8pMnuj-S7XlWQ6snLSso4lJ1YaankA89uOhwKLhLoJuCshNhhTgPSx-ODGdAcJxwlp9kyzTDlu3pwPpcLdjokq1-yxW2wXTBQmzD6ysXMDSeaMc72q3skXNUj8kdyDXyKrG8KzWRt5N398.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>When the clearBtn is clicked, just clear the canvas so that a new doodle can be done but also reset the paint color back to black.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/obsidiansofteducation.com\/wp-content\/uploads\/2024\/12\/JhEafndlu-tOByLBFaao2Md7dxE_ZXypkau6bnuV0ohBiy-NnFbAOJaAjYKxuS2qG2SI_GBya5nZWpxLzy2pqTjH-2QGvbNthjlmZfV06DU7ma_5aaQ139UzCLR12iiJkEamdQJRaLjpWefmnpM1L3o.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>When the shareBtn is clicked, just share the file returned by canvas\u2019s Save procedure.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/obsidiansofteducation.com\/wp-content\/uploads\/2024\/12\/M1ED7BBBdINWf6RXza-dtyti_4OOkdCF2Df__DFuASvBXpaUci3KJDYoZre_eN_j1FfCxEDiqWhvthXnSme1UW8HsNuFVTcO6-VboHezWt2zZEq6ahsqPgzyaA-gGAMegBafk7AXEc3vCJA4scgNSk8.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>This simple doodle app with sharing feature is done. You can refine it further by adding color buttons or even a color palette by following my previous tutorials on making drawing apps.<\/p>\n\n\n\n<p>\ud83c\udfa8 Paint App with Color Buttons:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<p class=\"responsive-video-wrap clr\"><iframe loading=\"lazy\" title=\"Drawing App in MIT App Inventor | Paint App | Android Drawing App | MIT App Inventor Tutorial\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/prmTeD0cacw?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<\/div><\/figure>\n\n\n\n<p>Paint App with Color picker\/ color palette feature:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<p class=\"responsive-video-wrap clr\"><iframe loading=\"lazy\" title=\"Paint in MIT App Inventor | MIT App inventor Drawing App (Part 1) | Color Picker MIT App Inventor\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/6lFi7jCDBek?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<\/div><\/figure>\n\n\n\n<p>You can have a look at the video tutorial for Doodle App here:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<p class=\"responsive-video-wrap clr\"><iframe loading=\"lazy\" title=\"Share Doodle App Inventor | App Inventor Doodle App | Canvas App Inventor | MIT App Inventor\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/KjcmJ-U8DSY?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<\/div><\/figure>\n\n\n\n<p>Please like my videos and share them with your friends and family. Also, subscribe to my channel and press the bell icon so you don\u2019t miss any of the great projects I have planned for you.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.youtube.com\/c\/obsidiansofteducation\" target=\"_blank\" rel=\"noopener\">https:\/\/www.youtube.com\/c\/obsidiansofteducation<\/a><\/p>\n\n\n\n<p>Please like my Facebook page and Instagram page for more educational resources and tips.<\/p>\n\n\n\n<p>Facebook:<a href=\"https:\/\/www.blogger.com\/blog\/page\/edit\/4947000819484484884\/7140650632339107612#\" target=\"_blank\" rel=\"noopener\">&nbsp;https:\/\/www.facebook.com\/ObsidianSoft\/<\/a><\/p>\n\n\n\n<p>Instagram:<a href=\"https:\/\/www.blogger.com\/blog\/page\/edit\/4947000819484484884\/7140650632339107612#\" target=\"_blank\" rel=\"noopener\">&nbsp;https:\/\/www.instagram.com\/obsidiansoftapps\/<\/a><\/p>\n\n\n\n<p>Pinterest:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-pinterest wp-block-embed-pinterest\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"oceanwp-oembed-wrap clr\"><iframe loading=\"lazy\" title=\"Obsidian Soft\" src=\"https:\/\/assets.pinterest.com\/ext\/embed.html?grid=obsidiansoft&#038;src=oembed\" height=\"900\" width=\"450\" frameborder=\"0\" scrolling=\"no\" ><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<p>For links to free educational apps, have a look at the\u00a0<a href=\"https:\/\/obsidiansofteducation.com\/index.php\/mobile-apps\/\">educational apps page<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hello friends and welcome to Obsidian Soft. In this tutorial, I will teach you how to make a basic doodle app with sharing feature. You can share your doodles with friends and family using WhatsApp, email, or even post them on Facebook or Instagram. Start a new project and call it ShareDoodleApp. Go to media [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-5494","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/obsidiansofteducation.com\/index.php\/wp-json\/wp\/v2\/pages\/5494","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/obsidiansofteducation.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/obsidiansofteducation.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/obsidiansofteducation.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/obsidiansofteducation.com\/index.php\/wp-json\/wp\/v2\/comments?post=5494"}],"version-history":[{"count":1,"href":"https:\/\/obsidiansofteducation.com\/index.php\/wp-json\/wp\/v2\/pages\/5494\/revisions"}],"predecessor-version":[{"id":5496,"href":"https:\/\/obsidiansofteducation.com\/index.php\/wp-json\/wp\/v2\/pages\/5494\/revisions\/5496"}],"wp:attachment":[{"href":"https:\/\/obsidiansofteducation.com\/index.php\/wp-json\/wp\/v2\/media?parent=5494"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}