{"id":1129,"date":"2016-01-19T14:32:10","date_gmt":"2016-01-19T22:32:10","guid":{"rendered":"http:\/\/appinventor.pevest.com\/?p=1129"},"modified":"2016-01-19T14:32:10","modified_gmt":"2016-01-19T22:32:10","slug":"making-pretty-app-inventor-user-interface-controls","status":"publish","type":"post","link":"https:\/\/coldstreams.com\/appinventor\/2016\/01\/19\/making-pretty-app-inventor-user-interface-controls\/","title":{"rendered":"Making “pretty” App Inventor user interface controls"},"content":{"rendered":"

In\u00a0the real world, “user interfaces” look like electric light switches, push buttons or control knobs, temperature dials on ovens, volume controls on radios and so forth. We can mimic these types of controls for our touch screen Android apps. We do not have to rely on the boring desktop-like clickable button or checkboxes in the App Inventor user interface palette.<\/p>\n

A previous tutorial<\/a> showed a trick to make the color of a button vary continuously. This tutorial shows how to use our own images, instead of the boring button, together with a bit of code to bring these buttons\u00a0to life.<\/p>\n

User Interface View<\/h2>\n

Below is a sample “toggle switch”. Press the switch icon once and the toggle moves to the right; press it again and the toggle moves back to the left.<\/p>\n

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

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

Here is a slide switch. Press the slide switch once and the switch position moves to the right and the switch illuminates in green. Press the slide switch again and the switch returns to the left.<\/p>\n

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

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

Here is a concept for a raised momentary push button. Pressing the button changes the appearance of the button\u00a0while your finger is on the butto<\/em>n – to look like the button is pressed in.<\/p>\n

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

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

The Designer View<\/h2>\n

<\/p>\n

Creating the interface requires dragging the usual button control from the Palette into the Designer View area. But the normal button image is replaced with our custom graphics.<\/p>\n

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

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

To set the graphic image, select the button in the Designer View. Then, in the Properties for\u00a0the button, look for Image<\/em>\u00a0and click on that to display a pop up dialog box of options. The default image is “None”. Initially the\u00a0list of images is empty – select Upload File<\/em> to locate your .jpg or .png graphic item to use for a button and upload the images to App Inventor.<\/p>\n

In this example, all of the images to be used in this demonstration app have already been uploaded.<\/p>\n

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

Below the Components area of the screen, you should see a box labeled “Media”, like this:<\/p>\n

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

This box also displays all of the media files you have loaded in to your project. You may upload files using the Upload File…<\/em> button; however, you will still need to select the uploaded file to set the image for your individual buttons.<\/p>\n

You may\u00a0notice that I have uploaded two graphics for each button. One graphic, say with the toggle switch, shows the button with the toggle on the left and a second graphic shows the toggle on the right. \u00a0When the toggle switch “button” is pressed, the event handler alternates the toggle switch graphic from the left to the right or right to left.<\/p>\n

Blocks View<\/h2>\n

To enable the button images to flip back and forth requires some code to reset the button’s image property.<\/p>\n

For the toggle switch, we need a variable, ToggleSwitch<\/em>, to keep track of which image is displayed. I have used a binary value that is either true<\/em> or false<\/em>. \u00a0A true<\/em> value means the switch is presently to the left; a false<\/em> value means the switch is to the right.<\/p>\n

In the button’s Click<\/em> event handler, if ToggleSwitch<\/em> is true<\/em>, then we set the button’s image property to the graphic that shows the switch to the right and set the value of ToggleSwitch<\/em> to false<\/em>.<\/p>\n

Otherwise, we do the opposite – if ToggleSwitch<\/em> is false (the else<\/em> block below), then we set the image back to the one showing the toggle switch to the left and set the value of ToggleSwitch<\/em> to true.<\/p>\n

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

The Slider Switch<\/em> is handled identically to\u00a0ToggleSwitch<\/em> except we\u00a0use the variable SlideSwitch<\/em> and the images of\u00a0the slider switch button.<\/p>\n

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

Lastly, the push button is handled in a somewhat different way. The goal is that while the button is pressed, the button should look like it is in the down position. Once the finger is removed from the button, the image should look like a button in the up position.<\/p>\n

This feature is implemented by processing the TouchDown<\/em> event and then setting the image to the picture showing the button in the down position.<\/p>\n

\"TouchDown\"<\/a>When the finger is removed, a TouchUp<\/em> event occurs. In the TouchUp<\/em>\u00a0event handler, the button’s image is reset to the image of the button in the up position.<\/p>\n

Download Source<\/h2>\n

This .zip file contains the App Inventor .aia files and the graphic images. I drew these images using Affinity Designer software and I assert no rights to the images – feel free to use them anyway you wish.<\/p>\n

Right-click your mouse (on Windows) or Ctrl-click (on Mac OS X) and choose the save as option in your browser:\u00a0PrettyButtons.zip<\/a><\/p>\n

Unzip the file and upload the .aia file to your App Inventor account.<\/p>\n

————<\/p>\n

I will be making some additional user interface components and will post here on this web site. Hopefully, with the simple example above, you can begin creating some components of your own!<\/p>\n","protected":false},"excerpt":{"rendered":"

In\u00a0the real world, “user interfaces” look like electric light switches, push buttons or control knobs, temperature dials on ovens, volume controls on radios and so forth. We can mimic these types of controls for our touch screen Android apps. We do not have to rely on the boring desktop-like clickable button or checkboxes in the … Continue reading Making “pretty” App Inventor user interface controls<\/span> →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,5,10,12,14],"tags":[],"class_list":["post-1129","post","type-post","status-publish","format-standard","hentry","category-android-development","category-components","category-programming-method","category-stem-education","category-user-interfacedesign"],"_links":{"self":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts\/1129","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/comments?post=1129"}],"version-history":[{"count":0,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts\/1129\/revisions"}],"wp:attachment":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/media?parent=1129"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/categories?post=1129"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/tags?post=1129"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}