Breaking News
Loading...
Saturday 16 August 2014

How To Create An App | Mobile App Development

Do you want to develop an app for Android? These app development tutorial will let you know how to be a developer.

You have got an amazing idea to develop an app, however you require some help. You can learn find how to build an app for Android with this easy to understand guide for everybody from beginners to geniuses.

In this new world where smartphone usage is climbing exponentially, the chances to make a name for yourself, also a huge amount of money, by transforming your app thought into the truth are huge. So, if you are developing for Android here is a exercise to help you.

This tutorial will teach you how to build your first Android app. You will learn how to create an Android project and run a debuggable version of the app. You will also learn some fundamentals of Android application design, including how to build a simple user interface.

This tutorial is a short introduction for beginners for a guide 'How To Develop App For Android'. The tutorial is focused around API Level 17 and operating system Android 4.2 (Jelly Bean). Our objective is to begin starting with no outside help and develop an app which will convert mp/h to km/h.


How To Create An App | Mobile App Development - iOS Developer | Android Developer


1 - What Do You Require?

  • Basic knowledge of XML.
  • Basic knowledge of Java.
  • Basic knowledge of Eclipse.
  • 2 to 3 hours of your time.

2 - Requirements

Before you can begin you require the Android SDK and an IDE. Android offers an unique bundle for that. It is known as Android SDK Bundle.
Download the bundle pack, unzip (extract) and run the "SDK Manager.exe".
Start Eclipse.

3 - Create an Android Virtual Machine (Dalvik)

To create, run, test and debug your Android App, you can create and run a Virtual Android Machine on your computer or laptop. Later you can deploy your Application to this virtual machine.

- Click on 'Windows' at the route toolbar
- Open 'Android Virtual Device administrator'

How To Create An App Mobile App Development Android Developer android virtual device

- Create a new 'Android Virtual Device'.
How To Create An App Mobile App Development create Android Developer Android virtual device


- Make sure that 'Use Host GPU' is enabled. This permits the AVD to use the Host GPU and this helps to render the AVD much quicker.

- After that you can start the AVD
How To Create An App Mobile App Development Android Developer Android virtual device AVD


4 - Create A New Project

Open "File"
Select "New"
Then select "Android Application Project"

Choose a name for your app.

How To Create An App Mobile App Development Android Developer rename app


Configure your project.
How To Create An App Mobile App Development Android Developer configure rename app


Setup Launcher Icon.
Here you can pick a 'Launcher Icon' that will be shown on your smartphone.
How To Create An App Mobile App Development Android Developer configure launcher icon


Now Create a new 'Blank Activity'.
How To Create An App Mobile App Development Android Developer blank activity


Configure your Activity with Name and Layout Name as shown in the figure.
How To Create An App Mobile App Development Android Developer blank activity name layout



After finishing the above steps, Eclipse looks very similar to this screen.

How To Create An App Mobile App Development Android Developer eclipse


5 - Implement the Look and the Feel

Navigate in the package explorer to this - '/res/design/' and open 'activity_main.xml'
Right-click on "Hellow World" and erase it.

5.1 - Create static Attributes

  • Select '/res/values/strings.xml'
How To Create An App Mobile App Development Android Developer static attributes

  • 'Add' a new entry
  • Select the Color entry, press OK and set the following values :-
Name - myColor
Value - #eeeeee


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.

How To Create An App Mobile App Development Android Developer add views


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.

How To Create An App Mobile App Development Android Developer add views radio 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>  

5.3 - Edit View Properties

Now in this step, you can edit all properties of 'Views' via right-click on the view or via XML.

1 - Navigate to 'res/layout/' and open the Graphical Layout of your 'activity_main.xml'
2 - Right click on the first "Radio Button" and open 'Edit Text'
How To Create An App Mobile App Development Android Developer edit view properties

3 - Assign the miles property to the second Radio Button.
4 - Set the "Checked" property for the first Radio Button (Other Properties > inherited from compoundbutton > checked > True ).
5 - Set the "Input type" property for the Text Field to "numberSigned" and "numberDecimal".
6 - Assign "calc" to the Button and set "calculate" for the "onClick" property (Other Properties > inherited from view > onClick ).
7 - Set Background Color (Right click on an the empty space on your Application > Edit Background ).
How To Create An App Mobile App Development Android Developer edit view properties background


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


6 - Implement The Logic

After we implemented the Frontend View, we have to implement the logical part of app with the help of Java.

- Switch to 'src/com.example.tutorialapplication/' and open 'MainActivity.java'
  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 friends!



That was only a short tutorial of How To Develop Mobile App For Android! If there are any mistakes please feel free to comment.

0 comments:

Post a Comment

Quick Message
Press Esc to close
Copyright © 2014 Mobile Tricks | Designed and Bloggerised By Pradeep Jadhav