How To Create An App | Mobile App Development

4 - Create A New Project

5 - Implement the Look and the Feel

5.1 - Create static Attributes

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

• 'Add' a new entry
• Select the Color entry, press OK and set the following values :-

Now include 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 verify that your code seems similar to this.

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.
Now you have two possibilities. You can create a  new Views via drag and drop, or you can edit your XML source code. In this tutorial to develop an app we will add the Views through drag and drop.

So let us start developing our App. Firstly we have to add a 'Text Field' for the input.

Drag this Text Field to your Application.
After that select the "Form Widget" section and drag a RadioGroup to your App and be sure that the RadioGroup has two RadioButtons. Now you can add a normal Button.

Switch from "Graphical Layout" to "activity_main.xml" and verify that your code appears to be like that

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>  

6 - Implement The Logic

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