The document provides step-by-step instructions to build a simple camera app in App Inventor that allows a user to take pictures using the camera and store them locally. The steps include adding components like an image, camera, and TinyDB database to the app design screen, programming a button to launch the camera and store pictures on click, and downloading the app .apk file to install and run the camera app.

1. CAMERA APP
STEP BY STEP

2. For[1]: Start a new project by clicking the "Start new project" button.(If you have already created projects, App
Inventor will open the most recent project.)
1
Start New project

3. For[1]: Name the project “Camera" (no spaces). Type in the project name (underscores are allowed,
spaces are not) and click OK.
Name here
1
Add project name

4. App Inventor opens the Designer window The "Designer" is where you create the Graphical User
Interface (GUI) or the look and feel of your app.(You can choose components like Buttons, Images,
and Text boxes, and functionalities like Text-to-Speech, Sensors, and GPS)
Choose Components
Arrange Components
Hierarchical View
Change Component Settings

5. For [1] : Drag an “Image” and drop to Screen1.
STEP – 1 : Add Image to Screen1
1

6. For [1] : Drag a “Camera” and drop to Screen1.
STEP – 2 : Add Camera to Screen1
1

7. For [1] : Drag a “TinyDB” and drop to Screen1.
STEP – 3 : Add TinyDB to Screen1 to store the pictures
1

8. For [1] : Drag one “HorizontalArrangement” and drop to Screen1
For [2] : Change alignments to center
STEP – 4 : Take one horizontal arrangement.
1 2

9. For [1] : Add one button to HorizontalArrangement using drag & drop.
For [2] : Change FontSize to 18 For [3] : Change button Text to “Open Camera”
STEP – 5 : Adding buttons on screen.
1
2
3

10. For [1] : Change the alignment of Screen1 to Center
For [2] : Open Blocks for code.
STEP – 6 : Changing the alignment of Screen1
1
2

11. For [1] : Drag block “When button1 clicked then do” for button1.
STEP – 7 : Programming for button1.
1

12. For [1] : Drag block to “call Camera1 to TakePicture” when button clicked.
STEP – 8 : Programming to open camera when button clicked.
1

13. For [1] : Drag block “When Camera1 AfterPicture do” to store the picture clicked.
STEP – 9 : Programming to store picture.
1

14. For [1] : Drag block “call TinyDB1 StoreValue” to store the picture
STEP – 10 : Programming to store picture.
1

15. For [1] : Drag a text block to name the picture
STEP – 11 : Naming the picture
1

16. For [1] : Drag block “set image1 Picture to” to show the picture
STEP – 12 : Programming to display picture
1

17. For [1] : Drag block to “call TinyDB1 GetValue” to display the image
For [1] : Duplicate the text box form above and add to tags
STEP – 13 : Programming to display picture
1
2

18. For [1] : Select “Build” option -> ‘Save .apk to my computer’ and download the .apk file to install the app.
STEP – 14 : Download and install application.
1

19. TRY THIS…
• Add and image of camera for
your button.
• Change code to store &
display multiple pictures
Install & run your Camera App