This document provides a tutorial for building a basic miles to kilometers converter mobile app for Android. It outlines the steps needed to set up the Android SDK and Eclipse IDE, create an Android virtual device, start a new project, configure the launcher icon and activity, add views like text fields and buttons to the layout, set properties of the views, and implement the conversion logic in Java code. The goal is to take the user from starting a new project to having a working miles to km converter app built with a graphical user interface and basic calculation functionality.

1. BUILD YOUR FIRST
ANDROID MOBILE APP

2. This should be a very short (beginner) introduction/tutorial how
to create a mobile app for Android. The tutorial is based on API
Level 17 and Android 4.2 (Jelly Bean). Our goal is to start from
scratch and have at the end a mp/h to km/h converter.

3. What Do You Need?

4. 1. Basic XML knowledge
2. Basic Java knowledge
3. Basic Eclipse knowledge
4. 2h of your time

5. Pre requisites:

6. 1. Before you can start you need the Android SDK and a
IDE. Android offers a special bundle for that: Android
SDK Bundle
2. Download the bundle, unzip and run the “SDK
Manager.exe”.
3. start Eclipse

7. Create An Android
Virtual Machine
Create An Android
Virtual Machine

8. • To run, test and debug your Application you can create and run a virtual android
machine on your computer. Later you can deploy your Application to this virtual
machine.
• Click on “Windows” at the navigation toolbar
• Open “Android Virtual Device manager“

9. Create a “New” Virtual Device:
Be sure that “Use Host GPU” is enabled. This allows the
AVD to use the Host GPU and this helps to render the AVD
much faster.

10. After that you can start the AVD:

11. Create a new Project:

12. • Open “File“
• “New“
• “Android Application Project“

13. Choose a new for your Project:

14. Configure Project:

15. Configure Launcher Icon:
Here you can choose a Launcher Icon that will be displayed on your mobile
phone.

16. Create a new Activity:

17. Configure Your Activity

18. After finishing Eclipse looks similar to that:

19. Implement the Look & Feel:

20. Navigate in the package explorer to “/res/layout/” and open
“activity_main.xml“
Right-click on “Hello World” and delete

21. Create static Attributes:
Select “/res/values/strings.xml“
“Add” a new entry
Select the Color entry – press OK and
set the following attributes:

22. Add a few more String(!) Attributes:
Name/value: “miles” / “to Miles“
Name/value: “kmh” / “to km/h“
Name/value: “calc” / “Calculate“

23. Switch from “Resources” to “strings.xml” and
make sure that your code look similar to that
snippet:

24. Add Views
Select “/res/layout/activity_main.xml“
Open Android editor via double-click
You have two possibilities. You can create new Views via drag and drop
or you can edit the XML source code. In this tutorial we add the Views
via drag and drop
So let’s start building our App. At first we have to add a “Text Field” for
the input.

25. Drag this Text Field to your Application.
Afterwards select the “Form Widget” section and
drag a RadioGroupto your App and make sure that
the RadioGroup has twoRadioButtons. Finally you
can add a normal Button.

26. Switch from “Graphical Layout” to “activity_main.xml”
and make sure that your code looks similar to that:

28. Edit view properties
You can edit properties of Views via right-click on the view or
via XML.
Navigate to “res/layout/” and open the Graphical Layout of
your “activity_main.xml“
right-click on the first Radio Button and open “Edit Text”

30. • Assign the miles property to the second Radio
Button
• Set the “Checked” property for the first Radio
Button (Other Properties -> inherited from
compoundbutton -> checked -> true)
• Set the “Input type” property for the Text Field
to “numberSigned” and “numberDecimal“
• Assign “calc” to the Button and set “calculate”
for the “onClick” property (Other Properties ->
inherited from view -> onClick)
• Set Background-Color (Right-click on an empty
space on your Application -> Edit Background)

31. After that change the Background should be #eeeeee! I think it can be difficult to
see the difference.

32. Implement the Logic
After we implemented the Frontend-View we have to implement
the logical part with Java!
Switch to “src/com.example.tutorialapplication/” and open
“MainActivity.java“

35. This short but useful tutorial courtesy goes to MARC KLEIN.
To know more about technologies log on to http://ekipa.co !
A one stop solution for all your programming needs.