{"id":2544,"date":"2010-10-27T15:40:07","date_gmt":"2010-10-27T13:40:07","guid":{"rendered":"http:\/\/blog.jteam.nl\/?p=2544"},"modified":"2010-10-27T15:40:07","modified_gmt":"2010-10-27T13:40:07","slug":"creating-an-android-app-with-google-app-inventor","status":"publish","type":"post","link":"https:\/\/trifork.nl\/blog\/creating-an-android-app-with-google-app-inventor\/","title":{"rendered":"Creating an Android app with Google App Inventor"},"content":{"rendered":"

After a few times filling in the registration form and weeks from waiting, I finally got an invite for Google App Inventor<\/a>. In this post I will explain how I have tried to rebuild an app that I created before with \u201cnormal\u201d programming.<\/p>\n

<\/p>\n

Context<\/h2>\n

My little cousins like to play with my phone and press on every app that looks like it\u2019s going to be fun. So I thought it would be fun for them to have an app that could play animal sounds when you click on an image. It is a quite simple concept, but for me it was a good start to get to know the Android API. The result of the first version looks like this:<\/p>\n

\"screen\"<\/a>\"farm\"<\/a>\"cartoon\"<\/a><\/p>\n

As you can see the app has a three tabbed layout. Each tab contains a grid with images that listen to a click event.<\/p>\n

To explore the Google App Inventor a little bit more, I want to play a little video on the last tab when you click on an image.<\/p>\n

App Inventor<\/h2>\n

Google App Inventor is split into two tools. The first is the App Inventor Designer, which allows you to create the pieces of your app by drag and drop components, such as buttons, text and pictures.<\/p>\n

The other one is the Blocks Editor. The Blocks Editor lets you assign behaviour to your components. In my case this would be playing a sound when you click a button.<\/p>\n

Adding components<\/h2>\n

As I am trying to recreate my app, the first thing I tried to do was add the tabbed layout. But unfortunately tabs are not available (yet). For now I just continued with creating the Cartoon screen. This screen contains three images and when clicking on one of the images, a video should start playing below the images.<\/p>\n

The Designer provides me with three options to arrange the screen layout.<\/p>\n

\"screenArrangement\"<\/a><\/p>\n

In order to create the layout with the images and the video player, I have used the VerticalArrangement<\/em> component with a HorizontalArrangement<\/em> component. This allows\u00a0 me to place the images in the HorizontalArrangement<\/em> component and the video player below the images on the VerticalArrangement<\/em> component.<\/p>\n

Images<\/h3>\n

Now that the layout is in position, I can add the images to the HorizontalArrangement<\/em> component. The first time I added an image, I just selected the Image<\/em> component and dragged it onto my screen. This is fine, if you don\u2019t want to add any behaviour to the image. In my case I do want to add behaviour, so I have to use a Canvas<\/em> component.<\/p>\n

\"canvas\"<\/a><\/p>\n

The Canvas<\/em> component provides us with the possibility to listen to a click event. To add my image to the Canvas<\/em> I had to set the image as a background image.<\/p>\n

So now that all the images are in place, the only thing that is missing a video player component.<\/p>\n

Video player<\/h3>\n

Adding a video player is as simple as dragging the VideoPlayer<\/em> component to your screen. You can configure the video player with a source, but I left it blank. The Designer also contains a component called Player<\/em>. This component is a non-visible component and can be configured with a source. In the images below you see the screen layout with the two Player <\/em>components at the bottom.<\/p>\n

\"screen\"<\/a>\"components\"<\/a><\/p>\n

Instead of playing a video, you can also play a sound. The Designer also contains a non-visible component Sound <\/em>which can be used for playing short sounds. For longer sound files you can also use the Player<\/em> component.<\/p>\n

Now that I have all the components ready, I can start the Blocks Editor to add behaviour to my images.<\/p>\n

Adding behaviour<\/h2>\n

When you open the Blocks Editor you will find two tabs with blocks. The first tab contains all the built-In blocks, such as picking a colour or adding a procedure. The second tab contains the blocks for your components.<\/p>\n

In the image below I have added the (green) block that handles the behaviour of clicking on an image (or actually the canvas). The blue blocks set the source of the video player to the correct source and set the visibility of the player to true. The purple block tells the video player to start the video.<\/p>\n

\"block_image\"<\/a><\/p>\n

This block is repeated for each image with a different source. When a video is finished playing, I want the video to stop and the video player component to hide.<\/p>\n

\"block_videoplayer\"<\/a><\/p>\n

You may wonder why you see the Pause call in the purple block instead of the Stop call. This is actually wrong, but Google forgot to add a block for the Stop call \"Glimlach\" (See the bug report here<\/a>). I put the Pause call there to show my intensions. This is all the behaviour that is needed for now.<\/p>\n

Conclusion<\/h2>\n

\"result\"<\/a>Although I wasn\u2019t able to completely recreate my application, I\u2019m very positive about the result that I was able to create with this piece of software. I like the fact that I was able to quickly create a basic app, but I was missing the real \u201cprogramming\u201d feeling. Maybe this is because Google App Inventor is still beta software and I wasn\u2019t able to enjoin all features.<\/p>\n

I am really curious about the full version and will definitely give it another try when it is released.<\/p>\n

Oh and my cousins love the app \"Glimlach\"<\/p>\n","protected":false},"excerpt":{"rendered":"

After a few times filling in the registration form and weeks from waiting, I finally got an invite for Google App Inventor. In this post I will explain how I have tried to rebuild an app that I created before with \u201cnormal\u201d programming.<\/p>\n","protected":false},"author":102,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"content-type":"","footnotes":""},"categories":[53,55,10],"tags":[25,209],"class_list":["post-2544","post","type-post","status-publish","format-standard","hentry","category-android","category-mobile","category-development","tag-android","tag-google-app-inventor"],"acf":[],"yoast_head":"\nCreating an Android app with Google App Inventor - Trifork Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/trifork.nl\/blog\/creating-an-android-app-with-google-app-inventor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating an Android app with Google App Inventor - Trifork Blog\" \/>\n<meta property=\"og:description\" content=\"After a few times filling in the registration form and weeks from waiting, I finally got an invite for Google App Inventor. In this post I will explain how I have tried to rebuild an app that I created before with \u201cnormal\u201d programming.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/trifork.nl\/blog\/creating-an-android-app-with-google-app-inventor\/\" \/>\n<meta property=\"og:site_name\" content=\"Trifork Blog\" \/>\n<meta property=\"article:published_time\" content=\"2010-10-27T13:40:07+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/blog.jteam.nl\/wp-content\/uploads\/2010\/10\/screen_thumb.png\" \/>\n<meta name=\"author\" content=\"Roberto van der Linden\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Roberto van der Linden\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/trifork.nl\/blog\/creating-an-android-app-with-google-app-inventor\/\",\"url\":\"https:\/\/trifork.nl\/blog\/creating-an-android-app-with-google-app-inventor\/\",\"name\":\"Creating an Android app with Google App Inventor - Trifork Blog\",\"isPartOf\":{\"@id\":\"https:\/\/trifork.nl\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/trifork.nl\/blog\/creating-an-android-app-with-google-app-inventor\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/trifork.nl\/blog\/creating-an-android-app-with-google-app-inventor\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/blog.jteam.nl\/wp-content\/uploads\/2010\/10\/screen_thumb.png\",\"datePublished\":\"2010-10-27T13:40:07+00:00\",\"author\":{\"@id\":\"https:\/\/trifork.nl\/blog\/#\/schema\/person\/037974cf3e24a7b09a93770b190d6e35\"},\"breadcrumb\":{\"@id\":\"https:\/\/trifork.nl\/blog\/creating-an-android-app-with-google-app-inventor\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/trifork.nl\/blog\/creating-an-android-app-with-google-app-inventor\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/trifork.nl\/blog\/creating-an-android-app-with-google-app-inventor\/#primaryimage\",\"url\":\"http:\/\/blog.jteam.nl\/wp-content\/uploads\/2010\/10\/screen_thumb.png\",\"contentUrl\":\"http:\/\/blog.jteam.nl\/wp-content\/uploads\/2010\/10\/screen_thumb.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/trifork.nl\/blog\/creating-an-android-app-with-google-app-inventor\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/trifork.nl\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating an Android app with Google App Inventor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/trifork.nl\/blog\/#website\",\"url\":\"https:\/\/trifork.nl\/blog\/\",\"name\":\"Trifork Blog\",\"description\":\"Keep updated on the technical solutions Trifork is working on!\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/trifork.nl\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/trifork.nl\/blog\/#\/schema\/person\/037974cf3e24a7b09a93770b190d6e35\",\"name\":\"Roberto van der Linden\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/trifork.nl\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/afe49faf7ef8dd3753baefb334568b10?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/afe49faf7ef8dd3753baefb334568b10?s=96&d=mm&r=g\",\"caption\":\"Roberto van der Linden\"},\"url\":\"https:\/\/trifork.nl\/blog\/author\/roberto\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Creating an Android app with Google App Inventor - Trifork Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/trifork.nl\/blog\/creating-an-android-app-with-google-app-inventor\/","og_locale":"en_US","og_type":"article","og_title":"Creating an Android app with Google App Inventor - Trifork Blog","og_description":"After a few times filling in the registration form and weeks from waiting, I finally got an invite for Google App Inventor. In this post I will explain how I have tried to rebuild an app that I created before with \u201cnormal\u201d programming.","og_url":"https:\/\/trifork.nl\/blog\/creating-an-android-app-with-google-app-inventor\/","og_site_name":"Trifork Blog","article_published_time":"2010-10-27T13:40:07+00:00","og_image":[{"url":"http:\/\/blog.jteam.nl\/wp-content\/uploads\/2010\/10\/screen_thumb.png","type":"","width":"","height":""}],"author":"Roberto van der Linden","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Roberto van der Linden","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/trifork.nl\/blog\/creating-an-android-app-with-google-app-inventor\/","url":"https:\/\/trifork.nl\/blog\/creating-an-android-app-with-google-app-inventor\/","name":"Creating an Android app with Google App Inventor - Trifork Blog","isPartOf":{"@id":"https:\/\/trifork.nl\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/trifork.nl\/blog\/creating-an-android-app-with-google-app-inventor\/#primaryimage"},"image":{"@id":"https:\/\/trifork.nl\/blog\/creating-an-android-app-with-google-app-inventor\/#primaryimage"},"thumbnailUrl":"http:\/\/blog.jteam.nl\/wp-content\/uploads\/2010\/10\/screen_thumb.png","datePublished":"2010-10-27T13:40:07+00:00","author":{"@id":"https:\/\/trifork.nl\/blog\/#\/schema\/person\/037974cf3e24a7b09a93770b190d6e35"},"breadcrumb":{"@id":"https:\/\/trifork.nl\/blog\/creating-an-android-app-with-google-app-inventor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/trifork.nl\/blog\/creating-an-android-app-with-google-app-inventor\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/trifork.nl\/blog\/creating-an-android-app-with-google-app-inventor\/#primaryimage","url":"http:\/\/blog.jteam.nl\/wp-content\/uploads\/2010\/10\/screen_thumb.png","contentUrl":"http:\/\/blog.jteam.nl\/wp-content\/uploads\/2010\/10\/screen_thumb.png"},{"@type":"BreadcrumbList","@id":"https:\/\/trifork.nl\/blog\/creating-an-android-app-with-google-app-inventor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/trifork.nl\/blog\/"},{"@type":"ListItem","position":2,"name":"Creating an Android app with Google App Inventor"}]},{"@type":"WebSite","@id":"https:\/\/trifork.nl\/blog\/#website","url":"https:\/\/trifork.nl\/blog\/","name":"Trifork Blog","description":"Keep updated on the technical solutions Trifork is working on!","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/trifork.nl\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/trifork.nl\/blog\/#\/schema\/person\/037974cf3e24a7b09a93770b190d6e35","name":"Roberto van der Linden","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/trifork.nl\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/afe49faf7ef8dd3753baefb334568b10?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/afe49faf7ef8dd3753baefb334568b10?s=96&d=mm&r=g","caption":"Roberto van der Linden"},"url":"https:\/\/trifork.nl\/blog\/author\/roberto\/"}]}},"_links":{"self":[{"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/posts\/2544","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/users\/102"}],"replies":[{"embeddable":true,"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/comments?post=2544"}],"version-history":[{"count":0,"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/posts\/2544\/revisions"}],"wp:attachment":[{"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/media?parent=2544"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/categories?post=2544"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/tags?post=2544"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}