App Inventor 2 Utility

By
1)Tanya Chowdhury(2014109)
2)Aashay Mittal (2014001)
3)Vrinda Malhotra(2014122)

App Inventor

How to make a widget for an Android phone using App inventor

A ''widget'' means a generic type of software application comprising portable code
intended for one or more different software platforms. Here, we were trying to make
widget that helps you jump between various apps that are most frequently used.
We are using app inventor because it is easy to use with a drag and drop interface. We
can make buttons, checkboxes, text, lists, apply logic for execution of a particular code,
write procedures, etc. using built-in blocks. This makes our lives easier.

Modes of app inventor:

It helps us make links to different screens without much fuss. We can view our
screens in 2 modes:
1. The Designer mode- It is the mode which shows us how each screen will look. This could be called the front-end of a project.
2. The Blocks mode- It is the mode which holds the code behind each screen. It shows
links which are colour-coded and joined like in ‘Blocks’.

Designer Mode

It is the front end where all the text and image input is fed. It contains several drag and drop options categorized for ease. The categories include:

1)User Interface
2)Layout
3)Media
4)Drawing and Animation
5)Sensors
6)Social
7)Storage
8)Connectivity
9)Lego Mindstorms

1. User Interface

The user interface category contains the following options:

a)Button - this option inserts a button which can be edited in the blocks (backend) .
b)Checkbox - Check box components can detect user taps and can change their boolean state in response.
c)Datepicker - A button that, when clicked on, launches a popup dialog to allow the user to select a date.
d)Image - Component for displaying images. The picture to display, and other aspects of the Image's appearance, can be specified in the Designer or in the Blocks Editor.
e)Label - Labels are components used to show text. A label displays text which is specified by the Text property. Other properties, all of which can be set in the Designer or Blocks Editor, control the appearance and placement of the text.
f)Listpicker- A button that, when clicked on, displays a list of texts for the user to choose among.
g)ListView - This is a visible component that allows to place a list of text elements in your Screen to display.
h)Notifier - The Notifier component displays alert dialogs, messages, and temporary alerts, and creates Android log entries through the following methods:
i. ShowMessageDialog: displays a message which the user must dismiss by pressing a button.
ii. ShowChooseDialog: displays a message two buttons to let the user choose one of two responses, for example, yes or no, after which the AfterChoosing event is raised.
iii. ShowTextDialog: lets the user enter text in response to the message, after which the AfterTextInput event is raised.
iv. ShowAlert: displays a temporary alert that goes away by itself after a short time.
i)Password Text Box - Users enter passwords in a password text box component, which hides the text that has been typed in it.
j)Textbox - Users enter text in a text box component.
The initial or user-entered text value in a text box component is in the Text property. If Text is blank, you can use the Hint property to provide the user with a suggestion of what to type. The Hint appears as faint text in the box.
k)TimePicker - A button that, when clicked on, launches a popup dialog to allow the user to select a time.

2. Layout

In app inventor, in general everything comes next in line to the previous input. Hence to change the layout of the text,images or buttons we require another drag and drop option categorized under layout.
The layout category contains the following options:
a)Horizontal Arrangement - This is used for arrangement of components in horizontal lines (left to right).
b)Vertical Arrangement - This is used for arrangement of components in vertical lines (top to bottom).
c)Tabular Arrangement - This is used for arrangement of components in a tabular manner.

3. Media

a)Camera - Use a camera component to take a picture on the phone.
Camera is a non-visible component that takes a picture using the device's camera. After the picture is taken, the path to the file on the phone containing the picture is available as an argument to the AfterPicture event.
b)Image Picker - Use an image picker component to choose an image from your image gallery.
An image picker is a kind of button. When the user taps an image picker, the device's image gallery appears, and the user can choose an image. After the user picks an image, the property ImagePath is set to a text string that represents that image. You can then use that result, for example, to set the image of a button.

4. Drawing and Animation

Canvas - A two-dimensional touch-sensitive rectangular panel on which drawing can be done and sprites can be moved.

5. Sensors

Location Sensor - A location sensor senses the present location of the android the app is being used upon.

6. Tiny DB

Tindy DB - TinyDB is a non-visible component that stores data for an app.

7. Connectivity

Activity Starter - Using an activity starter, applications of an android phone can be opened. An activity starter too contains various components such as Activity Class, Activity Package , Data Uri, Extra Values etc. The most important of them being Data Uri which identifies the data type and hence opens the type of app user wants to.

The rest components are advanced and can be looked up in the app inventor tutorial.

Our App

Main Page

Our main screen and its blocks look like this:

Screenshot_2014_11_15_05_26_07.pngMain_2.png
In the blocks we have created a hyperlink that helps us navigate to one of Entertainment(Screen1) , Navgation(Screen2) or Connectivity(Screen3).
We did so by the open another screen option which lies in the control panel of the blocks.
Similarly we have created a reverse hyperlink that connects each of the subsequent pages to main menu.

i. Entertainment

The Entertainment button leads us to the following screen :

Screenshot_2014_11_15_05_24_34.pngScreen1_2.png

This gives us three options:
i. Camera
ii. Gallery
iii. Youtube

(a) Camera

The Camera page :
Screenshot_2014_11_15_05_24_52.pngCamera_2.png
‘Click’ directs us to the camera of our phone . The picture captured in Camera1 is then returned to the screen.
For this we set the Canvas1.BackgroungImage() to getImage.

(b) Gallery

Screenshot_2014_11_15_05_25_26.pngScreen1_2.png

ImagePicker is an in-built function that picks up an image from our phone.
For gallery, we have have not made a button, Instead we have made an imagepicker.
Imagepicker.selection() returns the selected image to the screen.

(c) Youtube

The Youtube page looks like this:
Screenshot_2014_11_15_05_25_38.pngYoutube_2.png

There is a textbox (Textbox1) which takes from the users the input of what they want to search. This is stored in the input and using the activity starter function, youtube is opened and the query is taken from the Textbox1 and fed to the DataUri of Activity Starter hence, querying youtube for the query.
When we click on ‘search video’, it starts.

The Back to Main button takes us bake to Utilities Page.

ii. Navigation

The Navigation button leads us to the screen that looks like this:

Screenshot_2014_11_15_05_30_23.pngNavigation_2.png

The Navigation page contains the following:
(i) Map
(ii) Current Location

The Map button takes us to the Map page.
The Current location button basically shows us our location using GoogleMaps.

(a) Map

The Map page looks like:

Screenshot_2014_11_15_05_30_49.pngMaps1_2.pngMaps2_2.png
Maps3_2.pngMaps4_2.png

• When the back to main menu button (Button1) is clicked it redirects the user to the Screen2.
• An empty list is created to take the inputs from the users.
• Initially, the Vertical Arrangement 1 (the one that takes input from the user is hidden). On clicking on the Select Location button, it is set to true and a small dialogue box drops down.
• This dialogue box takes the input from the user in a textbox (add_text) and stores it.
• On clicking the submit button, it is appended to the list via the appendNewAddress function. Whereas, on clicking on cancel, the screen is reset.
• Now after appending all the locations, the Select Location list is clicked upon.
• The selected Location is clicked upon and it automatically shows up in the “Selected Address” textbox.
• On clicking the View on Map button, this is sent as an query to the google Maps and hence Google Map open showing the search result.
• Also, the present location function is built as described below.

(b) Current Location

As we can see in the Blocks window for Navigation,
We can also see our current location using 'Current location'. It straightaway redirects us to GoogleMap.

Screenshot_2014_11_15_05_30_23.pngNavigation_2.png

When the current location button (current_loc) is clicked, the location sensor senses the present location of the android, feeds it as a query to the DataUri for the activity starter hich searches for it in the GoogleMaps.

iii. Connectivity

The Connectivity page contains the following:
(i) Mail
(ii) Dialup
The Connectivity button leads us to the screen that looks like this:

Screenshot_2014_11_15_05_26_19.pngConnectivity_2.png

The Mail button takes us to Mail screen.
The DialUp button takes us to DialUp screen.
The Back to Main button takes us to Main screen.

(a) Mail

The Mail button takes us to the Mail page where we can type the receipient's details and the main body of the email like:

  • Mail To
  • Subject
  • Text (Main Body)

The Mail page looks like:

Screenshot_2014_11_15_05_26_59.pngMail_2.pngScreenshot_2014_11_15_05_27_05.png

The user is asked for the inputs to mail to textbox (mail_to), subject textbox (sub) and text textbox (body). The input is saved in the respective textbox and is sent as a query in the DataUri to the mail box. Hence, on clicking the Send Button (Button1), the mailing app is opened with the contents mentioned.
The Back to Main button takes us bake to Connectivity Page.

(b) Dialup

Here, we can enter the number we want to dial and it redirects us to our phone's Dialer.
The Dialup page looks like:

Screenshot_2014_11_15_05_29_53.pngDial_Up_2.png

The enter number textbox (num) takes the inout from the user for the number to be dialed and the dial button on clicking redirects the user to the Dial-up screen with the number entered fed to the dial-up screen.

The Back to Main button takes us back to Connectivity Page.

—This app has been made by the help of MIT app inventor tutorials at : http://appinventor.mit.edu/explore/content/

Thank You

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License