You have visited my page for:

seconds!

Monday, December 6, 2010

Create a new project

This is Part 1 in a series of tutorials. Each will build on the previous covering concepts which should be transferable to many applications. In order to cover many typical coding requirements, we are going to create a simple "To Do" application. Each tutorial part will conclude with a functioning application, albeit incomplete. In these series of tutorials we will cover adding, editing, and deleting items in a ListView. Here is what this series of tutorials will cover:

  • Start a new Android application.
  • Add, edit, and delete items in a ListView.
  • Edit "To Do" form.
  • We will start with a simple "one line" ListView. Then we will upgrade it so we can customize and dress up each row.
  • We will add some graphics to the ListView.
  • To improve performance and encapsulation we will move To Do items into a separate class that can  cache the TextView and ImageView widgets.
  • Create a landscape layout.
  • Create a database and table to store our tasks.
1. Create new project

     
2. Select "Android Application". Select "Next"

3. Set new project properties the click "Finish"
  • Project Name: To Do Tutorial
  • Build Target: Select Android 2.1 (you may select any build target, but this tutorial is 2.1)
  • Application Name: To Do Tutorial
  • Package Name: org.androidcodemonkey.todo
  • Create Activity: DetailForm
  • Min SDK: 7 (leave the default)

4. Open layout "main.xml"

5. Right click on "Hello World, DetailForm!" and select "Remove"
6. Now we are going to modify our layout. You can drag controls onto the layout in "Layout" mode, but I prefer to edit the XML directly. It provides me greater control. I am going to add the following controls in the XML mode (add the code from lines 2-26):
  • TableLayout
    • TableRow
      • TextView
      • EditText
    • TableRow
      • TextView
      • RadioGroup
        • RadioButton
        • RadioButton
        • RadioButton
    • TableRow
      • TextView
      • Button
01<linearlayout android:layout_height="fill_parent" android:layout_width="fill_parent" android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android">
02 <tablelayout android:id="@+id/TableLayout01" android:layout_alignparentbottom="true" android:layout_height="fill_parent" android:layout_width="fill_parent" android:stretchcolumns="1">
03  <tablerow>
04   <textview android:text="Task">
05   <edittext android:id="@+id/txtTask">
06  </edittext>
07  <tablerow>
08   <textview android:text="Priority:">
09   <radiogroup android:id="@+id/priority">
10     <radiobutton android:id="@+id/highPriority" android:text="High">
11     <radiobutton android:id="@+id/medPriority" android:text="Medium">
12     <radiobutton android:id="@+id/lowPriority" android:text="Low">
13   </radiobutton>
14  </radiobutton>
15  <tablerow>
16   <textview>
17   <button android:id="@+id/btnSave" android:text="Save">
18  </button></textview>
19 </tablerow>
20</radiobutton>
21</radiogroup>
22</textview>
23  </tablerow>
24   </textview>
25  </tablerow>
26</tablelayout>
27</linearlayout>

7. Change to LayoutView and it should look like this. Feel free to change settings on the display to see how it affects the controls.
 
8. Now we need an "entity" class. To keep our class files organized, let's create package.
  • In the Package Explorer > Right click on "src" > "New" > "Package"

  • Name: "org.androidcodemonkey.entities" Then click "Finish"
9. Let's add the a class for our "Task"
  • In the Package Explorer > Right click on "org.androidcodemonkey.entities" > "New" > "class"
  • Name: TaskBE. Click "Finish"
10. Create the following properties and methods.
  • Create string "item"
  • Create string "priority"
  • Create getItem() 
  • Create setItem()
  • Create getPriority()
  • Create setPriority()
  • Implement "toString()". 
Your TaskBE class should look like this:

01package org.androidcodemonkey.entities;
02
03public class TaskBE {
04 private String item="";
05 private String priority="";
06  
07 public String getItem() {
08  return(item);
09 }
10  
11 public void setItem(String value) {
12  this.item = value;
13 }
14 public String getPriority() {
15  return(priority);
16 }
17 public void setType(String value) {
18  this.priority = value;
19 }
20 public String toString() {
21  return(getItem());
22 }
23}
11. Open DetailForm.java. We are going to add an "onSave" method that will be called when the save button is pressed. When the save button is pressed we are going to retrieve the information from the View.
  • Import reference to entities (line #3)
  • Create a new TaskBE object. (line #20)
  • Create an EditText to retrieve the item entered into the view (line #21)
  • Set the item property of the Task (line #22)
  • Create a RadioGroup to retrieve the priority (line #23)
  • Set the priority property of the task (lines #24-#34)
  • (In the next post we will implement adding the task to an adapter) (line #35)
  • Clear the controls on View (lines #37-#38)
01package org.androidcodemonkey.todo;
02
03import org.androidcodemonkey.entities.*;
04
05import android.app.Activity;
06import android.os.Bundle;
07import android.view.View;
08import android.widget.EditText;
09import android.widget.RadioGroup;
10
11public class DetailForm extends Activity {
12    /** Called when the activity is first created. */
13    @Override
14    public void onCreate(Bundle savedInstanceState) {
15        super.onCreate(savedInstanceState);
16        setContentView(R.layout.main);
17    }
18private View.OnClickListener onSave=new View.OnClickListener() {
19 public void onClick(View v) {
20  TaskBE newTask =new TaskBE();
21  EditText taskItem=(EditText)findViewById(R.id.txtTask);
22  newTask.setItem(taskItem.getText().toString());
23  RadioGroup priorityGroup=(RadioGroup)findViewById(R.id.priority);
24  switch (priorityGroup.getCheckedRadioButtonId()) {
25   case R.id.highPriority:
26    newTask.setType("high_priority");
27    break;
28   case R.id.medPriority:
29    newTask.setType("med_priority");
30    break;
31   case R.id.lowPriority:
32    newTask.setType("low_priority");
33    break;
34  }
35  //To do - Add task to adapter. To be implemented in next post
36  //Clear form
37  taskItem.setText("");
38  priorityGroup.clearCheck();
39  }
40 };   
41
42}
12. Now when the form is created we need instantiate a button and set it to the save button (line #18) and register a callback for when the button is pressed (line #19).
01package org.androidcodemonkey.todo;
02
03import org.androidcodemonkey.entities.*;
04
05import android.app.Activity;
06import android.os.Bundle;
07import android.view.View;
08import android.widget.Button;
09import android.widget.EditText;
10import android.widget.RadioGroup;
11
12public class DetailForm extends Activity {
13    /** Called when the activity is first created. */
14    @Override
15    public void onCreate(Bundle savedInstanceState) {
16        super.onCreate(savedInstanceState);
17        setContentView(R.layout.main);
18        Button btnSave = (Button)findViewById(R.id.btnSave);
19        btnSave.setOnClickListener(onSave);
20         
21    }
22private View.OnClickListener onSave=new View.OnClickListener() {
23 public void onClick(View v) {
24  TaskBE newTask =new TaskBE();
25  EditText taskItem=(EditText)findViewById(R.id.txtTask);
26  newTask.setItem(taskItem.getText().toString());
27  RadioGroup priorityGroup=(RadioGroup)findViewById(R.id.priority);
28  switch (priorityGroup.getCheckedRadioButtonId()) {
29   case R.id.highPriority:
30    newTask.setType("high_priority");
31    break;
32   case R.id.medPriority:
33    newTask.setType("med_priority");
34    break;
35   case R.id.lowPriority:
36    newTask.setType("low_priority");
37    break;
38  }
39  //To do - Add task to adapter. To be implemented in next post
40  //Clear form
41  taskItem.setText("");
42  priorityGroup.clearCheck();
43  }
44 };   
45
46}
13. You can now run the program. When you click "Save" your controls should be cleared. Your screen should look like this

No comments:

Post a Comment