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.

myvolunteersweb101b.zip

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.

drawable.zip

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

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

<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

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

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

</intent-filter>

</activity>

</application>

</manifest>

OUTCOME.

MainActivity. Empty List	Stub method to refresh the list.
VolunteerActivity.	Stub method to register a person.

DOWNLOAD

MyVolunteers200.zip

Android Development Steps

Tuesday, June 2, 2015

MV200 - MyVolunteers Apps Project Template

1) Prepare the REST API Scripts

2) Prepare the Apps UI and Navigation Template

2.1) Create a new project MyVolunteers200

2.2) Add a second activity

2.3) Edit the Resources.

2.3.1) Drawable

2.3.2) Layouts

2.4) Edit Controller Codes

2.5) Edit AndroidManifest

DOWNLOAD

No comments:

Post a Comment