How to create a text to speech Application How to create a mini calculator Application How to create an application that display the photo of player according to his name chosen in a list (spinner)

2. TEXTTO SPEECH
App inventor

3. Task
Create an application that
pronounce text written by the
user

4. 1
2
3
1Project
2Start New Project
3Write the name of the project (Spaces not allowed)

5. Click and drag Components (image and buttons) onto the viewer in the middle of the Designer.
1
2

6. Rename components:
Image1 Logo
Button1French
Button2English
Button3 Spanish
1
3
2

7. Set Dimensions (width x height)
of Logo:
Height = 50 Percent
(50% of the screen)
Width = Fill parent
(expand to take up as much space as is
available)
1

8. Click on picture
Property and upload an
image from your
computer
1
2
3

9. Change the properties
of buttons:
1-BackgroundColor : orange
2-FontBold
3-FontSize:18
4-Width: 100 pixels
5-Shape: rounded
6-TextColor : Blue
2
1
3
4
5
6

10. Align Components in screen
1:
AlighHorizontal: Center
AlignVertical: Center
1
2
Change background color
BackgroundColor: Dark Gray
3

11. Add Screen
Write English and press OK
1
2

12. Insert image
1-Name UK
2-height 50 percent
3-width Fill parent
4-Upload the flag of UK
2
3
1
4

13. 1- Drag Horizontal arrangement from
Layout and drop it in the viewer
2-AlignHorizontal Center
3-AlignVertical Center
4-Height : 50 percent
5-Witdh : Fill parent
2
31
4
5
Insert Horizontal layout
We use a horizontal arrangement
component to display a group of
components laid out from left to
right.

14. 2 3
1
4
1- Insert aTextbox in the horizontal
Arrangement
(where users enter text)
2-Insert a button in front of the
textbox
3-Rename textbox to text_en
4-Rename button to Speak_en

15. 2
3
1
4
Set the properties of speak_En:
1-Height: 25 pixels
2-Width:25 pixels
3-upload an image of speaker
4-delete «Texts for button »

16. Add Screen Spanish and screen French with the same components and properties

17. The Screen French when user press on button ‘’French’’
The Screen English when user press on button ‘’English’’
The Screen Spanish when user press on button ‘’Spanish’’

18. From English Button choose block
When « English.Click do..
From Control choose block
Open another screen screenName
FromText choose Block
‘‘ ’’ and write the name of the screen
‘English’ 1
2
3

19. Same blocks to other buttons

20. 1
2
3
4
1- DragTextToSpeech and drop it
in the viewer
2-Rename it to
TextToSpeech_Eng
3-Set Country to GBR
4-Set Language to en

21. 1
2
3
4
1- DragTextToSpeech and drop it
in the viewer
2-Rename it to TextToSpeech_Fr
3-Set Country to FRA
4-Set Language to Fr

22. 1
2
3
4
1- DragTextToSpeech and drop it
in the viewer
2-Rename it to TextToSpeech_Sp
3-Set Country to ESP
4-Set Language to es

23. Speak_En

24. From speak_En Button choose block
When speak_En.Click do..
FromTextToSpeech_Eng choose block
CallTextToSpeech_Eng Speak message
FromText_En.Text choose Block
Text_En.Text
1
2
3

26. MINI CALCULATOR
App inventor

27. Task
Create an application that
perform basic
calculations(addition,
multiplication, subtraction,
division) of two numbers

28. Drag twoTable Arrangements and
drop them in the viewer
a table arrangement component is
used to display a group of
components in a tabular fashion
(horizontal and vertical
arrangements)

29. 1-InsertTwo labels andTwo
textboxes inTableArrrangement1
2-Insert Four Buttons in
TableArrangement2
3-Rename components
1
1
2
3

30. Program Addition operation
From Addition Button choose block
When Addition.Click do..
From Result choose block
Set Result.Text to
From Math choose ‘‘ ‘’ + ’’ ’’ and insert the N1.text and
N2.text
1
2
3

31. Program Multiplication, subtraction and division operations

32. Division by zero

33. FOOTBALL PLAYERS
App inventor

34. Create an application that
display image of player
according to his name in a list
(Spinner)

35. Player
OK
Choose player
Mo Salah
Player
OK
1 2 3
OK
User choose a player
from the spinner User click on OK
The application display
the player’s image

36. Designer
Add players in the spinner by
writing names separated by
comma in
ElementsFromString

37. Uncheck the property
‘‘Visible’’ to all images

38. Blocks
Display only the chosen photo