Scratch Built Android App Basics and BT Drawing Robot App

MIT APP Inventor is a very very easy online developer for develop Android apps quickly with Drag and Drop controllers and Block Coding. For most of my instructables which need android app i use MIT App inventor. List of projects I use Android APP for instructables are.

1) BT Pattern Door Lock

2) RGB Infinity Clock With Own BT App

3) Talk to Pick and Artificial Intelligence Chat Using Cleverbot

4) Trophy Ball Clock Using Servo

5) Customizable Laser Maze With Arduino and Android App

6) Live Turtle Logo Program Using BT Bot - MyBot

7) Baby MIT Cheetah Robot

8) Mini Drawing Bot - Live Android App - Trignomentry ( How to program this app is explain here step by step as video after basic introduction)

9) Cardboard Animatronic Smiley With BT App

10) Bubble Breath Hat With Fluttering Wings

11) Soft Toy Bluetooth Dice and Develop Android Game With MIT App Inventor

12) Baby MIT Cheetah Robot V2 Autonomous and RC

13) 7 Feet 7 Segment RGB Display With BT App

14) Tower Climb Helping Robot V1 - Two Legged, RF, BT Control With App

almost 14 apps.

1) Use your browser to start MIT App inventor.

2) In the browser type the address https://appinventor.mit.edu/ to go to app App inventor page.

3) In the Screen Click Create Apps move to the login screen.

4) Use your Gmail Account to login to the MIT App inventor Page.

5) After login your project screen shows the list of projects you develop.

1) In the Projects Page Click start new project in the top of the screen.

2) In the Popup box enter your project name with out space and click OK. Now the new project created and the Screen shows the designer with a model display.

3) The screen shows

1) Palette

Palette contain GUI of controls used in the project.

2) Viewer

Viewer show the mobile frame. Design the project use the components in side the frame.

3) Components

List of components used in this project.

4) Media

Medias like pictures, audio loaded for this project listed here.

5) Properties

Screen properties like alignment, background, title listed here in the opening. On selected the components its properties listed here. Different components shows different properties.

1) In the Palette U see lot of Controls and Interfaces. While drag the mouse over the control it shows the use of the control and whether the control is visible control or hidden control. Examples of Visible controls are Button, text box, Label, Image etc, Examples of hidden controls are clock, Bluetooth client, sound, Sensors etc. U can drag the visible control to the design area and align it using the Layout, also drag the hidden control to the bottom of the design area and use it in the program.

2) All the controls are drag and Drop. After You drag and drop the controller use the properties to change the control properties.

3) Layout - Even User Interface is the first menu in the palette, At first we want to know about the layout second menu. Use layout to deign how the screen is split and where we want to place the controls. As per our form design we drag and drop the layout in the design area. We also put one layout inside another one and multiplies.

4) User Interface - In User Interface we have basic Controls like Button, Checkbox, Date picker, Image, Label, ListPicker, Listview, Notifier, PasswordTextbox, Slider, Spinner, Switch, Textbox, TimePicker, Webviewer. Each control have different properties change it in the properties. Change the visual properties as per our requirement. If you want you rename the control using the Components, by click the control name and click rename button and in the popup box change the name and click ok.

5) Media - U also access the mobile camera to take picture or record video using this controls, Sound recorders, Speech recognizer and text to speech are the addition controls u make your project hands free.

6) Drawing and Animation - I like the canvas control very much you can able to build the drawing app using the canvas. U can able to put the image sprite inside the canvas and able to load the PNG, gif files in it. So for fancy controls u use images to load in the image sprite. I use canvas and image sprite for my remote control applications.

7) Maps - For live tracking using GPS we use Map control, We able to mark the location, with latitude and longtitude as the center we able to mark the circle. By using out GPS sensor we able to locate our current position in the map.

8) Sensors - All the current available sensors are listed in this menu. We use this sensors in our app. Example for drive car use use the accelerometer sensor. like wise use pedometer to measure no of steps walked. Like wise if that sensor is available in the install mobile then we able to create lot of apps link to sensor.

9) Social - menu listed the controls to make calls read sms, contact picker, email picker and twitter.

10) Storage - For simple internal storage or remote cloud storage you have controls. Storage is used in many projects even to record the current settings and retrive it while open next time,

11) Connectivity - Bluetooth, Serial, Web are the connectivity here. Bluetooth is used to control the devices, apps like home automation, RC car are done using this connectivity. Serial connection used to connection directly connected to mobile, we also connect to arduino using serial port., Web is used to connect to online.

12) Other menus - Logo midstorms to connect with Logo midstorms etc.

1) In the Top corner we have two button Designer, Blocks to switch to blocks click the blocks. Blocks windows is a plain while window with the blocks on one side and a code basket, Trash bin and zoom controls on other side.

2) The builtin functions are listed first and screen, then the components we created in the designer side.

3) when click a control or the function name in the list associate block popup on the side. Just click and drag the block to the viewer area and join according to the requirement.

4) In the bottom right corner is the Trash bin move the blocks from the design area to here for delete.

5) Above Trash bin is Zoom down, Zoom up and normal size.

6) In the Top right corner is the Blocks memory blocks you able to take a copy of set of blocks here. When want to use it in any other program or in any other page. open the bag and drag the set of code there. You can able to store lot of Blocks set here.

7) The Basic blocks are Control, Logic, Math, Text, Lists, Dictionaries, Colors, Variables, Procedures.

8) Control - In the control menu if, if else, for, while, do, screen basic controls blocks listed below this menu.

9) Logic - Logic operations like true, false, not, =, and, or blocks are listed below. Variables declaration like true and false are also declare from this block.

10) Math - From basic mathematics functions like +, -, *, /, advanced operations, random number generation, trigonometry operations are listed here.

11) Text - String operations like join, compare, split, replace, reverse like blocks listed here.

12) Lists - Create a list, make a list, insert , Remove, select from items blocks are listed. Also access from csv file blocks are also available.

13) Dictionaries - Store details in JavaScript Object Notation (JSON) format. Blocks available to insert, search, use keys etc.,

14) Colors - 13 basic color block, make color using RGB and Split color blocks available.

15) Variables - Initialize, get, set variables blocks listed.

16) Procedures - Create procedure like do event or procedure with result created here. Procedure is used to create a set of commands used in different part of the program (object oriented programming) to reduce program size.

As per Components added in the design side. below the screen menu components name listed. By select the components name its function blocks pop out from the side. Here i give some basic components blocks.

1) Screen- Screen basic operations listed here get, set events blocks also listed here. Buttons action blocks like backpress blocks are available. Lot of actions like initialize, other screen closed, orientation changed etc are blocks available for screen.

2) For button events like click, Gotfocus, lastfocus, Touch up, Touch Down are the blocks available. Also get set parameters like background color, text, Height etc are avialble.

3) For Label get set parameters like color, size, visible, enable available.

Like wise each components has its own event and properties all has its own blocks.

1. After complete the design and code using block, its time to compile and install in the mobile. Download the APP MIT AI2 Companion from google store. and open the app in your mobile.

2) In the PC click the menu Build in the top and click App(provice QR code for .apk) and wait for few secs for the program to compile and create a apk.

3) After Compile it shows a QR code. In the mobile Click Scan QR code and it opens the camera. Focus the QR code in the computer screen.

4) It opens the code in the app and in few minutes the apk file download and ask permission from third party in your mobile. Accept it and found your app install in your mobile.

5) After complete and test the project. If you want the apk file in your pc click menu Build in the top and click App(save .apk to my computer) and wait for few secs for the program to compile and download in the PC.

These are the basic steps to start build the android app easily in PC. Now i explain how to build a drawing app which connect to arduino to draw in arduino bot.

To make Mini Drawing Bot see the detailed instruction by click this link.

For step by step android application development go to next step. This is the first time i make video tutorial, sorry for lot of mistakes.

Android program for bluetooth connection setup and connection.

Basic line drawing with the finger with setup and code.

Last step in designing completed here with the basic coding start with variable initialization and screen startup like wise.

Create procedures to add points and call that procedure from canvas mouse events.

Create procedure to compile the points and send it to arduino. Call that procedure one by one by receive the feedback from arduino. Redraw functions are explained here.

Compile the codes to make the app download directly to mobile or to pc.

Open the App in the mobile. Click Pick Bluetooth and select HC-05. In the drawing area draw, it send data to arduino and arduino draw it.

App Inventor is a very very easy tool to make android app. My only problem for current development is, as of now no multi touch is allowed to develop. Start create android app with this easy tool. Thank you all for reading it.

Lot more to enjoy...............Don't forgot to comment and encourage me friends.