.
MV200 - MyVolunteers Apps Project Template
In the previous tutorials, we have learned to…
1) Create REST API
2) Create Web Request using Get Method
3) Create Web Request using Post Method
In the first Android example, we have used HTTPClient. There are some more ways of sending and receiving data through network communication. We will see more examples in the next tutorials.
In this tutorial, we are going to create a standard project template for the User Interface so that we can reuse it in the coming exercises.
|
1) Prepare the REST API Scripts
We will use the REST API Scripts developed in Tutorial MV101.
Download the PHP Framework Scripts and upload to your website.
This tutorial uses a demo url http://notarazi.esy.es/myvolunteers/api/volunteers that provides both GET and POST method. For implementation details, refer http://android-steps.blogspot.my/2015/06/mv101-create-web-api-for-online.html .
2) Prepare the Apps UI and Navigation Template
2.1) Create a new project MyVolunteers200
By default, the project creates an activity, MainActivity.
If you are not sure on the steps to create an Android Project, refer http://android-steps.blogspot.my/2015/06/mv102-android-httpclient-get-method-and.html
Next, add a second activity, VolunteerActivity.
2.2) Add a second activity
Give the name, VolunteerActivity.
If you are not sure on the steps to add an activity, refer http://android-steps.blogspot.my/2015/06/mv103-android-httpclient-post-method.html .
2.3) Edit the Resources.
2.3.1) Drawable
Download the following drawable files and place to your resource folder.
2.3.2) Layouts
File: res/layout/activity_main_list_item.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp" >
<!-- Name Label -->
<TextView
android:id="@+id/name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingBottom="2dip"
android:paddingTop="6dip"
android:textColor="#43bd00"
android:textSize="16sp"
android:textStyle="bold"
android:text="Name"/>
<!-- Email label -->
<TextView
android:id="@+id/email"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingBottom="2dip"
android:textColor="#acacac"
android:text="Email"/>
</LinearLayout>
|
File: res/layout/activity_main.xml
<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"
tools:context=".MainActivity" >
<ListView
android:id="@+id/lvw_persons"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="@string/hello_world" />
<ImageView
android:id="@+id/imv_person"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp"
android:layout_marginBottom="10dp"
android:src="@drawable/person_add_small" />
</RelativeLayout>
|
File: res/layout/activity_volunteer.xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".SettingsActivity" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/person_small"
android:layout_marginTop="20dp"
android:layout_gravity="center_horizontal"
/>
<EditText
android:id="@+id/etx_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:hint="Name" />
<EditText
android:id="@+id/etx_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:hint="Email" />
<Button
android:id="@+id/btn_register"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="Register"
android:background="#e6e6e6" />
</LinearLayout>
|
File:res/menu/activity_main.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="@+id/menu_refresh"
android:orderInCategory="90"
android:showAsAction="always"
android:icon="@drawable/refresh"
android:title="Refresh"/>
<item
android:id="@+id/menu_settings"
android:orderInCategory="100"
android:showAsAction="never"
android:title="@string/menu_settings"/>
</menu>
|
File: res/menu/activity_volunteer.xml (no changes)
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="@+id/menu_settings"
android:orderInCategory="100"
android:showAsAction="never"
android:title="@string/menu_settings"/>
</menu>
|
2.4) Edit Controller Codes
File: MainActivity.java
package com.example.myvolunteers200;
import java.util.ArrayList;
import java.util.HashMap;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import android.os.AsyncTask;
import android.os.Bundle;
import android.app.Activity;
import android.app.ProgressDialog;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import android.widget.Toast;
public class MainActivity extends Activity {
// JSON Node names
private static final String TAG_PERSONS= "result";
private static final String TAG_ID = "id";
private static final String TAG_NAME = "name";
private static final String TAG_EMAIL = "email";
// persons JSONArray
JSONArray persons = null;
// Hashmap for ListView
ArrayList<HashMap<String, String>> alsPersons = new ArrayList<HashMap<String, String>>();
SimpleAdapter adpPersons;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
setViewObjects();
}
@Override
public void onResume() {
super.onResume(); // Always call the superclass method first
refreshList();
}
private void setViewObjects() {
//bind ListView
ListView mListView = (ListView) findViewById(R.id.lvw_persons);
//set adapter
adpPersons = new SimpleAdapter(MainActivity.this, alsPersons,
R.layout.activity_main_list_item, new String[] { TAG_NAME, TAG_EMAIL,}
, new int[] { R.id.name,R.id.email}
);
//plug adapter to ListView
mListView.setAdapter(adpPersons);
//bind ImageView
ImageView imvPerson =(ImageView) findViewById(R.id.imv_person);
//attach onClickListener to ImageView
imvPerson.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
//Toast.makeText(getApplicationContext(), "Add Person", Toast.LENGTH_SHORT).show();
startActivity(new Intent(MainActivity.this, VolunteerActivity.class));
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle item selection
switch (item.getItemId()) {
case R.id.menu_settings:
//
case R.id.menu_refresh:
refreshList();
default:
return super.onOptionsItemSelected(item);
}
}
private void refreshList() {
Toast.makeText(getApplicationContext(), "Refresh List", Toast.LENGTH_SHORT).show();
}
}
|
VolunteerActivity.java
package com.example.myvolunteers200;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;
public class VolunteerActivity extends Activity {
EditText etxName;
EditText etxEmail;
Button btnRegister;
String strName="", strEmail="";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_volunteer);
setViewObjects();
}
private void setViewObjects() {
etxName = (EditText) findViewById(R.id.etx_name);
etxEmail = (EditText) findViewById(R.id.etx_email);
btnRegister = (Button) findViewById(R.id.btn_register);
btnRegister.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
if (isValidFormData()) {
strName=etxName.getText().toString();
strEmail=etxEmail.getText().toString();
registerData();
}
}
private boolean isValidFormData() {
boolean isName = false, isEmail = false;
String emailPattern = "[a-zA-Z0-9._-]+@[a-z]+\\.+[a-z]+";
String strTestValue = "";
//get field values
strTestValue = etxName.getText().toString();
//check field values validity
if (isEmptyString(strTestValue)) {
etxName.setError("Name must not be empty");
Toast.makeText(getApplicationContext(), "Name error", Toast.LENGTH_SHORT).show();
} else {
isName = true;
}
//get field values
strTestValue = etxEmail.getText().toString();
//check field values validity
if (isEmptyString(strTestValue)) {
etxEmail.setError("Email must not be empty");
Toast.makeText(getApplicationContext(), "Email error", Toast.LENGTH_SHORT).show();
} else {
if (strTestValue.matches(emailPattern)) {
isEmail = true;
} else {
etxEmail.setError("Enter valid Email format");
Toast.makeText(getApplicationContext(), "Email error", Toast.LENGTH_SHORT).show();
}
}
return (isName && isEmail);
}
// validating empty string
public boolean isEmptyString(String text) {
return (text == null || text.trim().equals("null") || text.trim()
.length() <= 0);
}
});
}
private void registerData() {
// TODO Auto-generated method stub
Toast.makeText(getApplicationContext(), "Registering...", Toast.LENGTH_SHORT).show();
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.activity_volunteer, menu);
return true;
}
}
|
2.5) Edit AndroidManifest
Insert a permission to use the Internet.
|
File: AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.myvolunteers200"
android:versionCode="1"
android:versionName="1.0" >
<uses-permission android:name="android.permission.INTERNET" />
<uses-sdk
android:minSdkVersion="8"
android:targetSdkVersion="17" />
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name="com.example.myvolunteers200.MainActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
|
OUTCOME.
MainActivity.
Empty List
|
Stub method to refresh the list.
| |
VolunteerActivity.
|
Stub method to register a person.
|
DOWNLOAD
.
No comments:
Post a Comment