[Tutorial] Part 1 - Listview with SQL Lite

Basic Tutorials concerning: GUI, Views, Activites, XML, Layouts, Intents, ...

[Tutorial] Part 1 - Listview with SQL Lite

Postby AndroidCodeMonkey » Sat Feb 06, 2010 7:09 pm

Android "To Do" Application Tutorial
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.

Part 1: Create a new project
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)

Image

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

Image

In the Package Explorer > Right click on "src" > "New" > "Package"
Name: "org.androidcodemonkey.entities" Then click "Finish"
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:
Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1. package org.androidcodemonkey.entities;
  2.  
  3. public class TaskBE {
  4.  private String item="";
  5.  private String priority="";
  6.  
  7.  public String getItem() {
  8.   return(item);
  9.  }
  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. }
  24.  
Parsed in 0.033 seconds, using GeSHi 1.0.8.4


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
    Create a new TaskBE object.
    Create an EditText to retrieve the item entered into the view
    Set the item property of the Task
    Create a RadioGroup to retrieve the priority
    Set the priority property of the task
    (In the next post we will implement adding the task to an adapter)
    Clear the controls on View


Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1.  
  2. package org.androidcodemonkey.todo;
  3.  
  4.  
  5.  
  6. import org.androidcodemonkey.entities.*;
  7.  
  8.  
  9.  
  10. import android.app.Activity;
  11.  
  12. import android.os.Bundle;
  13.  
  14. import android.view.View;
  15.  
  16. import android.widget.EditText;
  17.  
  18. import android.widget.RadioGroup;
  19.  
  20.  
  21.  
  22. public class DetailForm extends Activity {
  23.  
  24.     /** Called when the activity is first created. */
  25.  
  26.     @Override
  27.  
  28.     public void onCreate(Bundle savedInstanceState) {
  29.  
  30.         super.onCreate(savedInstanceState);
  31.  
  32.         setContentView(R.layout.main);
  33.  
  34.     }
  35.  
  36. private View.OnClickListener onSave=new View.OnClickListener() {
  37.  
  38.  public void onClick(View v) {
  39.  
  40.   TaskBE newTask =new TaskBE();
  41.  
  42.   EditText taskItem=(EditText)findViewById(R.id.txtTask);
  43.  
  44.   newTask.setItem(taskItem.getText().toString());
  45.  
  46.   RadioGroup priorityGroup=(RadioGroup)findViewById(R.id.priority);
  47.  
  48.   switch (priorityGroup.getCheckedRadioButtonId()) {
  49.  
  50.    case R.id.highPriority:
  51.  
  52.     newTask.setType("high_priority");
  53.  
  54.     break;
  55.  
  56.    case R.id.medPriority:
  57.  
  58.     newTask.setType("med_priority");
  59.  
  60.     break;
  61.  
  62.    case R.id.lowPriority:
  63.  
  64.     newTask.setType("low_priority");
  65.  
  66.     break;
  67.  
  68.   }
  69.  
  70.   //To do - Add task to adapter. To be implemented in next post
  71.  
  72.   //Clear form
  73.  
  74.   taskItem.setText("");
  75.  
  76.   priorityGroup.clearCheck();
  77.  
  78.   }
  79.  
  80.  };    
  81.  
  82.  
  83.  
  84. }
  85.  
  86.  
  87.  
  88.  
Parsed in 0.036 seconds, using GeSHi 1.0.8.4


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

Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1.  
  2.         Button btnSave = (Button)findViewById(R.id.btnSave);
  3.  
  4.         btnSave.setOnClickListener(onSave);
  5.  
  6.  
Parsed in 0.033 seconds, using GeSHi 1.0.8.4


13. You can now run the program. When you click "Save" your controls should be cleared. Your screen should look like this

Image

Here is the complete source code

DetailFrom.java
Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1. package org.androidcodemonkey.todo;
  2.  
  3.  
  4.  
  5. import org.androidcodemonkey.entities.*;
  6.  
  7.  
  8.  
  9. import android.app.Activity;
  10.  
  11. import android.os.Bundle;
  12.  
  13. import android.view.View;
  14.  
  15. import android.widget.Button;
  16.  
  17. import android.widget.EditText;
  18.  
  19. import android.widget.RadioGroup;
  20.  
  21.  
  22.  
  23. public class DetailForm extends Activity {
  24.  
  25.     /** Called when the activity is first created. */
  26.  
  27.     @Override
  28.  
  29.     public void onCreate(Bundle savedInstanceState) {
  30.  
  31.         super.onCreate(savedInstanceState);
  32.  
  33.         setContentView(R.layout.main);
  34.  
  35.         Button btnSave = (Button)findViewById(R.id.btnSave);
  36.  
  37.         btnSave.setOnClickListener(onSave);
  38.  
  39.        
  40.  
  41.     }
  42.  
  43. private View.OnClickListener onSave=new View.OnClickListener() {
  44.  
  45.  public void onClick(View v) {
  46.  
  47.   TaskBE newTask =new TaskBE();
  48.  
  49.   EditText taskItem=(EditText)findViewById(R.id.txtTask);
  50.  
  51.   newTask.setItem(taskItem.getText().toString());
  52.  
  53.   RadioGroup priorityGroup=(RadioGroup)findViewById(R.id.priority);
  54.  
  55.   switch (priorityGroup.getCheckedRadioButtonId()) {
  56.  
  57.    case R.id.highPriority:
  58.  
  59.     newTask.setType("high_priority");
  60.  
  61.     break;
  62.  
  63.    case R.id.medPriority:
  64.  
  65.     newTask.setType("med_priority");
  66.  
  67.     break;
  68.  
  69.    case R.id.lowPriority:
  70.  
  71.     newTask.setType("low_priority");
  72.  
  73.     break;
  74.  
  75.   }
  76.  
  77.   //To do - Add task to adapter. To be implemented in next post
  78.  
  79.   //Clear form
  80.  
  81.   taskItem.setText("");
  82.  
  83.   priorityGroup.clearCheck();
  84.  
  85.   }
  86.  
  87.  };    
  88.  
  89.  
  90.  
  91. }
  92.  
  93.  
Parsed in 0.041 seconds, using GeSHi 1.0.8.4


TaskBE.java
Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1. package org.androidcodemonkey.entities;
  2.  
  3.  
  4.  
  5. public class TaskBE {
  6.  
  7.  private String item="";
  8.  
  9.  private String priority="";
  10.  
  11.  
  12.  
  13.  public String getItem() {
  14.  
  15.   return(item);
  16.  
  17.  }
  18.  
  19.  
  20.  
  21.  public void setItem(String value) {
  22.  
  23.   this.item = value;
  24.  
  25.  }
  26.  
  27.  public String getPriority() {
  28.  
  29.   return(priority);
  30.  
  31.  }
  32.  
  33.  public void setType(String value) {
  34.  
  35.   this.priority = value;
  36.  
  37.  }
  38.  
  39.  public String toString() {
  40.  
  41.   return(getItem());
  42.  
  43.  }
  44.  
  45. }
  46.  
  47.  
Parsed in 0.038 seconds, using GeSHi 1.0.8.4


main.xml
Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1.  
  2. <linearlayout android:layout_height="fill_parent" android:layout_width="fill_parent" android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android">
  3.  
  4.  <tablelayout android:id="@+id/TableLayout01" android:layout_alignparentbottom="true" android:layout_height="fill_parent" android:layout_width="fill_parent" android:stretchcolumns="1">
  5.  
  6.   <tablerow>
  7.  
  8.    <textview android:text="Task">
  9.  
  10.    <edittext android:id="@+id/txtTask">
  11.  
  12.   </edittext>
  13.  
  14.   <tablerow>
  15.  
  16.    <textview android:text="Priority:">
  17.  
  18.    <radiogroup android:id="@+id/priority">
  19.  
  20.      <radiobutton android:id="@+id/highPriority" android:text="High">
  21.  
  22.      <radiobutton android:id="@+id/medPriority" android:text="Medium">
  23.  
  24.      <radiobutton android:id="@+id/lowPriority" android:text="Low">
  25.  
  26.    </radiobutton>
  27.  
  28.   </radiobutton>
  29.  
  30.   <tablerow>
  31.  
  32.    <textview>
  33.  
  34.    <button android:id="@+id/btnSave" android:text="Save">
  35.  
  36.   </button></textview>
  37.  
  38.  </tablerow>
  39.  
  40. </radiobutton>
  41.  
  42.  
  43.  
  44. </radiogroup></textview></tablerow></textview></tablerow></tablelayout></linearlayout>
  45.  
  46.  
Parsed in 0.005 seconds, using GeSHi 1.0.8.4


I will continue this tutorial with part 2 shortly

I have additional screen caps for this tutorial and additional tutorials on my blog
Android Code Monkey Blog
User avatar
AndroidCodeMonkey
Freshman
Freshman
 
Posts: 4
Joined: Sun Jan 24, 2010 7:15 am

Top

Return to Novice Tutorials

Who is online

Users browsing this forum: No registered users and 3 guests