HOW TO CREATE FIRST ANDROID MOBILE APP (TUTORIAL)

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.

1. What do you need:

• Basic XML knowledge
• Basic Java knowledge
• Basic Eclipse knowledge
• 2h of your time 

2. Prerequisites:

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

3. Create a Android virtual machine (dalvik):

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“

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.

After that you can start the AVD:

4. Create a new Project:

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

Choose a new for your Project:

Configure Project:

Configure Launcher Icon:

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

Create a new Activity:

Configure your Activity:

After finishing Eclipse looks similar to that:

Hello World Application

5. Implement the Look & Feel:

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

5.1 Create static Attributes:

• Select “/res/values/strings.xml“

• “Add” a new entry
• Select the Color entry – press OK and set the following attributes:

Add a few more String(!) Attributes:

• Name/value: “miles” / “to Miles“
• Name/value: “kmh” / “to km/h“
• Name/value: “calc” / “Calculate“

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

view plaincopy to clipboardprint?

1. <resources>  
2. <string name="app_name">TutorialApplication</string>  
3. <string name="action_settings">Settings</string>  
4. <string name="hello_world">Hello world!</string>  
5. <color name="myColor">#eeeeee</color>  
6. <string name="miles">to Miles</string>  
7. <string name="kmh">to km/h</string>  
8. <string name="calc">Calculate</string>  
9. </resources>  

5.2 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.

 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.

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

view plaincopy to clipboardprint?

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2. xmlns:tools="http://schemas.android.com/tools"  
3. android:layout_width="match_parent"  
4. android:layout_height="match_parent"  
5. android:paddingBottom="@dimen/activity_vertical_margin"  
6. android:paddingLeft="@dimen/activity_horizontal_margin"  
7. android:paddingRight="@dimen/activity_horizontal_margin"  
8. android:paddingTop="@dimen/activity_vertical_margin"  
9. tools:context=".MainActivity" >  
10.   
11. <EditText  
12. android:id="@+id/editText1"  
13. android:layout_width="wrap_content"  
14. android:layout_height="wrap_content"  
15. android:layout_alignParentLeft="true"  
16. android:layout_alignParentTop="true"  
17. android:layout_marginLeft="24dp"  
18. android:layout_marginTop="31dp"  
19. android:ems="10"  
20. android:inputType="numberDecimal|numberSigned" >  
21.   
22. <requestFocus />  
23. </EditText>  
24.   
25. <RadioGroup  
26. android:id="@+id/radioGroup1"  
27. android:layout_width="wrap_content"  
28. android:layout_height="wrap_content"  
29. android:layout_alignLeft="@+id/editText1"  
30. android:layout_below="@+id/editText1"  
31. android:layout_marginTop="28dp" >  
32.   
33. <RadioButton  
34. android:id="@+id/radio0"  
35. android:layout_width="wrap_content"  
36. android:layout_height="wrap_content"  
37. android:checked="true"  
38. android:text="RadioButton" />  
39.   
40. <RadioButton  
41. android:id="@+id/radio1"  
42. android:layout_width="wrap_content"  
43. android:layout_height="wrap_content"  
44. android:text="RadioButton" />  
45. </RadioGroup>  
46.   
47. <Button  
48. android:id="@+id/button1"  
49. android:layout_width="wrap_content"  
50. android:layout_height="wrap_content"  
51. android:layout_alignLeft="@+id/radioGroup1"  
52. android:layout_centerVertical="true"  
53. android:text="Button" />  
54.   
55. </RelativeLayout>  

5.3. 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”

• 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)

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

6. 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“

view plaincopy to clipboardprint?

1. package com.example.tutorialapplication;  
2.   
3. import android.os.Bundle;  
4. import android.app.Activity;  
5. import android.view.Menu;  
6. import android.view.View;  
7. import android.widget.EditText;  
8. import android.widget.RadioButton;  
9. import android.widget.Toast;  
10.   
11. public class MainActivity extends Activity {  
12.   
13.     // public var  
14.     private EditText text;  
15.   
16.     // default func  
17.     @Override  
18.     protected void onCreate(Bundle savedInstanceState) {  
19.         super.onCreate(savedInstanceState);  
20.         setContentView(R.layout.activity_main);  
21.         // findViewById = Finds a view that was identified by the id attribute  
22.         // from the XML that was processed in onCreate(Bundle).  
23.         // (EditText) = typecast  
24.         text = (EditText) findViewById(R.id.editText1);  
25.     }  
26.   
27.     // default func  
28.     @Override  
29.     public boolean onCreateOptionsMenu(Menu menu) {  
30.         // Inflate the menu; this adds items to the action bar if it is present.  
31.         getMenuInflater().inflate(R.menu.main, menu);  
32.         return true;  
33.     }  
34.   
35.     /* 
36.      * Will be executed by clicking on the calculate button because we assigned 
37.      * "calculate" to the "onClick" Property! 
38.      */  
39.     public void calculate(View view) {  
40.   
41.         RadioButton mileButton = (RadioButton) findViewById(R.id.radio0);  
42.         RadioButton kmhButton = (RadioButton) findViewById(R.id.radio1);  
43.         // if the text field is empty show the message "enter a valid number"  
44.         if (text.getText().length() == 0) {  
45.             // Toast = focused floating view that will be shown over the main  
46.             // application  
47.             Toast.makeText(this, "enter a valid number", Toast.LENGTH_LONG)  
48.                     .show();  
49.         } else {  
50.             //parse input Value from Text Field  
51.             double inputValue = Double.parseDouble(text.getText().toString());  
52.             // convert to...  
53.             if (mileButton.isChecked()) {  
54.                 text.setText(String.valueOf(convertToMiles(inputValue)));  
55.                 // uncheck "to miles" Button  
56.                 mileButton.setChecked(false);  
57.                 // check "to km/h" Button  
58.                 kmhButton.setChecked(true);  
59.             } else { /* if kmhButton isChecked() */  
60.                 text.setText(String.valueOf(convertToKmh(inputValue)));  
61.                 // uncheck "to km/h" Button  
62.                 kmhButton.setChecked(false);  
63.                 // check "to miles" Button  
64.                 mileButton.setChecked(true);  
65.             }  
66.         }  
67.     }  
68.   
69.     private double convertToMiles(double inputValue) {  
70.         // convert km/h to miles  
71.         return (inputValue * 1.609344);  
72.     }  
73.   
74.     private double convertToKmh(double inputValue) {  
75.         // convert miles to km/h  
76.         return (inputValue * 0.621372);  
77.     }  
78. }  

That’s all 

That was only a _very_ short Overview of how to create a mobile Application for Android!!! If there are any mistakes please message me