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

 

virtualdevicemanager

 

Create a “New” Virtual Device:

CreatenewVD

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:

AVD

 

4. Create a new Project:

  • Open “File
  • New
  • Android Application Project

 

Choose a new for your Project:

projectname

 

Configure Project:

configureproject

 

Configure Launcher Icon:

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

launchericon

 

Create a new Activity:

createActivity

 

Configure your Activity:

ConfigureActivity

 

After finishing Eclipse looks similar to that:

firstStart
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

stringsXML

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

myColorAttributes

 

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:

<resources>
<string name="app_name">TutorialApplication</string>
<string name="action_settings">Settings</string>
<string name="hello_world">Hello world!</string>
<color name="myColor">#eeeeee</color>
<string name="miles">to Miles</string>
<string name="kmh">to km/h</string>
<string name="calc">Calculate</string>
</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.

textfield

 

Drag this Text Field to your Application.

Afterwards select the “Form Widget” section and drag a RadioGroup to your App and make sure that the RadioGroup has two RadioButtons. Finally you can add a normal Button.

appafterdrag

 

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

 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >

<EditText
android:id="@+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="24dp"
android:layout_marginTop="31dp"
android:ems="10"
android:inputType="numberDecimal|numberSigned" >

<requestFocus />
</EditText>

<RadioGroup
android:id="@+id/radioGroup1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/editText1"
android:layout_below="@+id/editText1"
android:layout_marginTop="28dp" >

<RadioButton
android:id="@+id/radio0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="RadioButton" />

<RadioButton
android:id="@+id/radio1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="RadioButton" />
</RadioGroup>

<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/radioGroup1"
android:layout_centerVertical="true"
android:text="Button" />

</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”

propertykmh

 

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

editbackground

 

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

 

package com.example.tutorialapplication;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.widget.EditText;
import android.widget.RadioButton;
import android.widget.Toast;

public class MainActivity extends Activity {

	// public var
	private EditText text;

	// default func
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		// findViewById = Finds a view that was identified by the id attribute
		// from the XML that was processed in onCreate(Bundle).
		// (EditText) = typecast
		text = (EditText) findViewById(R.id.editText1);
	}

	// default func
	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

	/*
	 * Will be executed by clicking on the calculate button because we assigned
	 * "calculate" to the "onClick" Property!
	 */
	public void calculate(View view) {

		RadioButton mileButton = (RadioButton) findViewById(R.id.radio0);
		RadioButton kmhButton = (RadioButton) findViewById(R.id.radio1);
		// if the text field is empty show the message "enter a valid number"
		if (text.getText().length() == 0) {
			// Toast = focused floating view that will be shown over the main
			// application
			Toast.makeText(this, "enter a valid number", Toast.LENGTH_LONG)
					.show();
		} else {
			//parse input Value from Text Field
			double inputValue = Double.parseDouble(text.getText().toString());
			// convert to...
			if (mileButton.isChecked()) {
				text.setText(String.valueOf(convertToMiles(inputValue)));
				// uncheck "to miles" Button
				mileButton.setChecked(false);
				// check "to km/h" Button
				kmhButton.setChecked(true);
			} else { /* if kmhButton isChecked() */
				text.setText(String.valueOf(convertToKmh(inputValue)));
				// uncheck "to km/h" Button
				kmhButton.setChecked(false);
				// check "to miles" Button
				mileButton.setChecked(true);
			}
		}
	}

	private double convertToMiles(double inputValue) {
		// convert km/h to miles
		return (inputValue * 1.609344);
	}

	private double convertToKmh(double inputValue) {
		// convert miles to km/h
		return (inputValue * 0.621372);
	}
}

 

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

To get more Information visit:
Android Developer Reference
Style | Android Developers
Patterns | Android Developers
Building Blocks| Android Developers
 

 

18 thoughts on “How to create first Android mobile App (Tutorial)”

  1. Hi, thanks for this great tutorial. I can understand this better than the one in developer.android.com.

    Do you have other tutorials for android app development? Would be glad to read and learn from it.

  2. Hi,

    Good day!

    I tried to follow your tutorial but I couldn’t figure out why I got these errors:
    [18N] Hardcode string “Calculate”, should use @string resource
    [18N] Hardcode string “kmh”, should use @string resource
    [18N] Hardcode string “miles”, should use @string resource
    No label views point to this text field with an android:labelFor=@+id/editText1″
    attribute
    When I checked my resources it is listed there but then when I follow step 5.3 Edit view properties, the string I added is not in the list. Please help me how to resolve it. Thank you and more power to your blog.

    Regards,
    Joy

    1. i have this warning
      No label views point to this text field with an android:labelFor=@+id/editText1″
      attribute

      help to solve

      1. I added android:hint attribute and added the string “Enter distance”.
        android:hint=”@string/editText1″
        Resource editText1 contain “Enter distance”.

  3. It all was good untill I implement the Logic.
    When I implemment the Logic I got a lot of errors. I dont know how to fix them

  4. Awesomeness!!! Thanks for this =D

    Btw,
    I found that the variable ‘text’ was not declared.
    So I had to add this line,
    EditText text = (EditText) findViewById(R.id.editText1);

  5. My Calculate button is not working when I click on it nothing happens and there is no error anywhere in code please help me out

  6. I cannot find this line

    “Set the “Input type” property for the Text Field to “numberSigned” and “numberDecimal“
    I tried> I right clicked the first button under Graphicak layout tab> show in > properties >input type> I tried to add the “numberSigned” but it doesn’t work, nor it gives an option to add both.

    Can anyone help?

    Thanks.

  7. I did all as per the instruction!
    I am getting this error – The Application has stopped. Please try again! Force close

  8. okay so i changed some of the logic to make work the way i wanted it to.
    - also had the problem of the button not working (fixed that as well)

    here is the code

    import android.os.Bundle;
    import android.app.Activity;
    import android.view.Menu;
    import android.view.View;
    import android.widget.EditText;
    import android.widget.RadioButton;
    import android.widget.Toast;
    import android.widget.Button;
    import android.view.View.OnClickListener;

    public class MainActivity extends Activity {

    private EditText text;
    private int status = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    text = (EditText) findViewById(R.id.editText1);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main, menu);

    Button button = (Button) findViewById(R.id.button1);
    button.setOnClickListener(new OnClickListener()
    {
    @Override
    public void onClick(View view)
    {
    Toast.makeText(MainActivity.this, “Button Clicked”, Toast.LENGTH_SHORT).show();
    calculate(view);
    }

    });
    return true;
    }

    public void calculate(View view) {

    RadioButton mileButton = (RadioButton) findViewById(R.id.radio1);
    RadioButton kmhButton = (RadioButton) findViewById(R.id.radio0);
    // if the text field is empty show the message “enter a valid number”
    if (text.getText().length() == 0) {
    // Toast = focused floating view that will be shown over the main
    // application
    Toast.makeText(this, “enter a valid number”, Toast.LENGTH_LONG)
    .show();
    } else {
    //parse input Value from Text Field

    double inputValue = Double.parseDouble(text.getText().toString());
    double temp = inputValue;

    if (kmhButton.isChecked())
    {
    if(status == 0)
    {
    text.setText(String.valueOf(inputValue));
    Toast.makeText(this, “1″, Toast.LENGTH_LONG)
    .show();
    }
    else
    {
    text.setText(String.valueOf(convertToKmh(temp)));
    Toast.makeText(this, “2″, Toast.LENGTH_LONG)
    .show();
    status = 0;
    }
    }
    else if(mileButton.isChecked())
    {
    if(status == 1)
    {
    text.setText(String.valueOf(inputValue));
    Toast.makeText(this, “3″, Toast.LENGTH_LONG)
    .show();
    }
    else
    {
    text.setText(String.valueOf(convertToMiles(temp)));
    Toast.makeText(this, “4″, Toast.LENGTH_LONG)
    .show();
    status = 1;
    }
    }
    }
    }

    private double convertToMiles(double inputValue) {
    // convert km/h to miles
    return (inputValue * 1.609344);
    }

    private double convertToKmh(double inputValue) {
    // convert miles to km/h
    return (inputValue * 0.621372);
    }

    }

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>