Saturday 27 December 2014

Creating First Android Application using PhoneGap and AngularJS

In this post, I will be showing how you can create your first android application using PhoneGap and AngularJS. First of all you have to follow my another post to setup PhoneGap framework and create first android application using PhoneGap. Once you are done with creating your first application using PhoneGap, you can follow this post to add AngularJS capability to your created PhoneGap project. Adding AngularJS capability to PhoneGap project is pretty much simple. 

If you would like to see the steps in video, you can refer my video attached below:



OR

You can follow below steps:

1. Download AngularJS zip from here and extract it. Extracted directory structure should look like below. While writing this project I downloaded Angular-1.3.8.


2. Now it's time to add AngularJS features into PhoneGap project. Create 'lib/angular' directory under below directory. Notice that, below directory structure is the structure of PhoneGap project which is imported into Android Studio.

<WorkSpace>\<ProjectName>\<ModuleName>\src\main\assets\www 

Copy all  selected *.js files (mentioned as selected in above image) from extracted AngularJS directory to created directory 'lib/angular'.

3. Now create app.js file under below directory.

<WorkSpace>\<ProjectName>\<ModuleName>\src\main\assets\www\js

app.js
var nvhybridandroidapp = angular.module("nvhybridandroidapp", []);
nvhybridandroidapp.controller("MyController", function ($scope) {
   $scope.message = "Welcome to first android app built using PhoneGap and AngularJS";
});

4. Change index.html file to add greed marked text:

<WorkSpace>\<ProjectName>\<ModuleName>\src\main\assets\www\index.html
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>

<!-- Adding Angular specific java script files -->
<script type="text/javascript" src="lib/angular/angular.js"></script>

<!-- Adding created app.js file -->
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript">
            app.initialize();
</script>

<!--Configure ng-app to bind html to the var created in app.js-->
<html  ng-app="nvhybridandroidapp">
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Hello World</title>
    </head>
    <body>

        <!--Configure ng-controller to 'MyController' defined in app.js-->
        <div class="app"  ng-controller="MyController">
            <h1>Apache Cordova</h1>

            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>

            < !--Print the message variable defined in app.js-->
            <h1>Message: {{message}}</h1>

             < !--Bind message variable (defined in app.js) with input element -->
            <input type="text" ng-model="message"/>
        </div>
    </body>
</html>

You can refer below image to visualize above 2,3,4 steps:


5. Changes are done. Now you are pretty much ready to run your application. Once you run the application, your running application in AVD (emulator) looks like below. 



If you are able to see the running application on emulator with given message, I would say congratulations !!. You have created your first android application using PhoneGap and AngularJS.

If you want to refer sample project, you can refer from GitHub.

Friday 26 December 2014

Hybrid App Development - Android Application Development using PhoneGap

If you are very new to PhoneGap application development, this post can help you to kick off android application development using PhoneGap framework. In this post, I will walk you through the steps that I performed to setup the environment to develop PhoneGap based android application on Windows machine. I am using Android Studio as IDE to develop, test and run the android applications.

If you would like to see the steps in video, you can refer my video attached below:


Below are my other posts related to Android Application Development:
About PhoneGap:

PhoneGap is mobile development framework. It facilitates developers to build mobile application using JavaScript, HTML5 and CSS3. This framework is owned by Adobe and open sourced as Apache Foundation Project named ‘Apache Cordova’. Mobile applications which are developed using PhoneGap called Hybrid Apps. These applications are not fully native in nature. These apps use native web view type elements to display application resources. Hybrid Apps can be run inside a device native container where devices browser engine is used to render HTML and process Java Scripts. The major benefit of this framework is, same HTML5 code base can be used by projects developed for different OS like iOS, Android etc. You just need to do minor platform specific changes in these files to run on different OS based devices.

That's enough about PhoneGap, there is plethora of options on net that you can refer to get more detail on PhoneGap framework, it's history, it's pros/cons etc. Let's start with steps to develop first hybrid application.

Prerequisites
I assume you already have android application development environment setup (JDK, Android SDK, Android Studio). don't you? If you don't, please refer this link (at least step-1, 2 and 3.B) to setup Android SDK and then install Android Studio using this link. Also, install Apache Ant by following this link.

Before going ahead, ensure that you have setup below environment variables:
  • Defined JAVA_HOME and added '%JAVA_HOME%\bin' to PATH
  • Added path to your Android SDK platform-tools and tools directory in PATH variable, i.e. <SDK_DIR>\platform-tools;<SDK_DIR>\tools
  • Defined ANT_HOME and added '%ANT_HOME%\bin' to PATH
Installing and Setting up PhoneGap Framework

1. Download PhoneGap from here and extract. At this point of time, I downloaded PhoneGap-2.9.1.
2. Now you need to generate cordova.jar. In a terminal window, navigate to '<PhoneGap-
    2.9.1>\lib\android\framework' directory and run below comman:

   <PhoneGap-2.9.1>\lib\android\framework>android update project -p . -t android-21


   And then run below command:

   <PhoneGap-2.9.1>\lib\android\framework> ant jar
   This command will generate the cordova-2.9.1.jar file under directory <PhoneGap-
   2.9.1>\lib\android\framework\cordova-2.9.1.jar
   
Creating PhoneGap Project

1. To create the PhoneGap project, In a terminal window, navigate to '<PhoneGap-
    2.9.1>\lib\android\bin' directory and run below command to create the project:

   create <project_folder_path> <package_name> <project_name>


2. Now you need to import project into Android Studio. Open Android Studio and select the option 'Import non-Android Studio Project' to import your created project. 


3. Once your project is imported successfully, open the index.html file and add any html element inside body tag say any header tag to display your text. 

4. Its time to run the project. Ensure that you have setup AVD (Android Virtual Device) to run the project. If you didn't, you can refer my other post to setup AVD. 

Now click the run button shown in below image and wait till your AVD is launched. Once AVD is launched, unlock the screen and see your running application with the text that you have added in index.html.


I hope this post helped you out creating your first PhoneGap based android application. Please provide your feedback to improve this post further.

!! Happy Android Application Development !!

Sunday 21 December 2014

Android Application Development using Android Studio: Tab Based Application

If you are looking for creating a tab based android application using Android Studio, I would say you reached to right post. In this post I will be showing how you can create tab based android application. Also, you can watch this video to get more detail on the application that I will walk you through in this post.




Application Requirement
First of all I would like to describe the application requirement. I just thought to create a simple application which can be used to maintain daily expenses. I would call it ‘Expense Book’ and this application can be used to add your expenses in terms of transactions and view the list of created transactions.  Below image describes requirement very well than my word.


Environment Setup
To develop this application, Android Studio is used. Before creating this application you should ensure to have following software installed:
  • JDK 7
  • Android SDK
  • Android Studio 1.0.1


If you have not installed these tools, you can refer my post to install it from scratch. 

How to develop above application?




1. Open Android Studio and go to ‘File > New Project…’ and click on ‘Next’ by following default options and finish. 

2. Create layout files (.xml) which are shown as selected in below image:


tab.xml

This xml is the layout of tab bar.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!--  Screen Design for Food tab -->
    <ListView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/listView" />
</LinearLayout>

If you open this xml in android studio and go to 'design' tab, you will see below layout.


addtransactiontab.xml

This xml is the layout of first tab. All text fields and action button is added in this layout.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!--  Screen Design for Food tab -->
    <FrameLayout android:id="@android:id/tabcontent"
        android:layout_height="fill_parent" android:layout_width="fill_parent">
        <LinearLayout
            android:id="@+id/tab1"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical"
            android:clickable="true"
            android:background="@drawable/bg_loading_320">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:text="Add Transaction"
                android:id="@+id/addTransactionView"
                android:layout_centerHorizontal="true"
                android:layout_alignParentTop="true"
                android:textSize="25dp"
                android:singleLine="false"
                android:textColor="#ffff9408" />

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="textPersonName"
                android:ems="10"
                android:id="@+id/txtTransactionName"
                android:layout_marginTop="34dp"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:layout_alignParentRight="true"
                android:layout_alignParentEnd="true"
                android:hint="Transaction Name" />

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="date"
                android:ems="10"
                android:id="@+id/txtTransactionDate"
                android:hint="Date - DD/MM/YYYY " />

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="phone"
                android:ems="10"
                android:id="@+id/txtAmount"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
               android:hint="Amount" />

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/txtPayee"
                android:hint="Payee" />

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:ems="10"
                android:id="@+id/txtTransactionDetial"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:hint="Transaction Detail"
                android:singleLine="false" />

            <Button
                android:layout_width="237dp"
                android:layout_height="52dp"
                android:text="Add Transaction"
                android:id="@+id/btnAdd"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="27dp"
                android:enabled="false"
                android:background="#ffffa00f"
                android:layout_gravity="center_horizontal"
                android:textSize="25dp" />
        </LinearLayout>
    </FrameLayout>
</LinearLayout>

If you open this xml in android studio and go to 'design' tab, you will see below layout.



 listtransactiontab.xml

This xml is the layout of second tab. List view is added to see the list of added transactions.

<?xml version="1.0" encoding="utf-8"?>

<TabHost android:layout_width="fill_parent"
               android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android"
               android:id="@android:id/tabhost">
               <LinearLayout android:id="@+id/LinearLayout01"
                              android:orientation="vertical" android:layout_height="fill_parent"
                              android:layout_width="fill_parent">
                              <TabWidget android:id="@android:id/tabs"
                                             android:layout_height="wrap_content"      
                                                    android:layout_width="fill_parent"></TabWidget>
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"/>
               </LinearLayout>

</TabHost>




3. Implement activity classes to render layout and perform action. 
  
TabBar.java

First of all you need to create 'TabActivity', This class is responsible to add required tabs when application is opened.This is the first activity that is executed when application is run.

package com.nverm.expensebook.activity;

import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;

import com.nverm.expensebook.R;

public class TabBar extends TabActivity {
    /** This method is called when the activity is first created. */
    
@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

       // This is the tab.xml view
        setContentView(R.layout.tab);
       
        /* TabHost will have Tabs */
        TabHost tabHost = (TabHost)findViewById(android.R.id.tabhost);
       
        /* If you want to create new tab, you can use newTabSpec() on TabHost.*/
        /* addTransTabId1 is addTransactionTabSpec Id. This can be used to access outside. */
        /* addTransTabId1 is listTransTabId1 Id. This can be used to access outside. */
       
       TabSpec addTransactionTabSpec = tabHost.newTabSpec("addTransTabId1");
        TabSpec listTransactionTabSpec = tabHost.newTabSpec("listTransTabId1");
        
        /* Using setIndicator() of TabSpec you can set name for the tab which is displayed on UI */
        /* Using setContent() you can set content for a particular tab. */
       
        addTransactionTabSpec.setIndicator("Add Transaction").setContent(new 
                                Intent(this,AddTransactionTab.class));
        listTransactionTabSpec.setIndicator("Transaction List").setContent(new 
                                 Intent(this,TransactionListTab.class));

        /* Add tabSpec to the TabHost to display. */
        tabHost.addTab(addTransactionTabSpec);
        tabHost.addTab(listTransactionTabSpec);
       
    }
}
  
 AddTransactionTab.java

 This class is responsible to fetch added transaction detail on click of 'Add Transaction' button and saving into list.

public class AddTransactionTab extends Activity {
    
    // This list is used to store added transactions
    static List<Transaction> transactionList = new ArrayList<Transaction>();

    EditText tranNameTxt, tranDateTxt, amountTxt, payeeTxt, transactionDetailTxt;
  
  @Override
    protected void onCreate(Bundle instance) {
        super.onCreate(instance);
      
       // This is the addtransactiontab.xml view
        setContentView(R.layout.addtransactiontab);

        // Fetch filled text values into local variables
        tranNameTxt = (EditText) findViewById(R.id.txtTransactionName);
        amountTxt = (EditText) findViewById(R.id.txtAmount);
        payeeTxt = (EditText) findViewById(R.id.txtPayee);
        tranDateTxt = (EditText) findViewById(R.id.txtTransactionDate);
        transactionDetailTxt = (EditText) findViewById(R.id.txtTransactionDetial);

        final Button addButton = (Button) findViewById(R.id.btnAdd);

        // On click of  button, save transaction into list
        addButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Transaction transaction = new Transaction();
                transaction.setTranNameTxt(tranNameTxt.getText().toString());
                transaction.setTranDateTxt(tranDateTxt.getText().toString());
                transaction.setAmountTxt(amountTxt.getText().toString());
                transaction.setPayeeTxt(payeeTxt.getText().toString());
                transaction.setTransactionDetailTxt(transactionDetailTxt.getText().toString());
                transactionList.add(transaction);
                System.out.println("Added transaction into list:" + transactionList);

                // Show alert of adding transaction
                Toast.makeText(getApplicationContext(), 
                      "Added transaction successfully !! Enjoy !!", Toast.LENGTH_SHORT)
                        .show();
            }
        });

        // On change of name text field
            tranNameTxt.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {
           }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
                addButton.setEnabled(!tranNameTxt.getText().toString().trim().equals(""));
            }

            @Override
            public void afterTextChanged(Editable s) {

            }
        });
    }
}

  ListTransactionTab.java
 This class is responsible to show added transactions on 'Transaction List' tab.

package com.nverm.expensebook.activity;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

import com.nverm.expensebook.R;
import com.nverma.expensebook.vo.Transaction;

public class TransactionListTab extends Activity {

    /** This method is called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
                              super.onCreate(savedInstanceState);

        // If list is empty show empty text message      
        if(AddTransactionTab.transactionList.isEmpty()){
            TextView textView = new TextView(this);
            textView.setText("\n               No transactions added yet !!!");
            setContentView(textView);
            return;
        }else{          
           // This is the listtransactiontab.xml view
            setContentView(R.layout.listtransactiontab);
        }

        final ListView listView = (ListView) findViewById(R.id.listView);

        String [] transactionNames = new String[AddTransactionTab.transactionList.size()];
        int i = -1;
        for(Transaction transaction : AddTransactionTab.transactionList){
            transactionNames[++i] = "Name:"
            + transaction.getTranNameTxt() 
            + ", Amount:" + transaction.getAmountTxt()
            + ", Date:" + transaction.getTranDateTxt();
        }

        // Define a new Adapter
        // 1 parameter - Context
        // 2 parameter - Layout for the row
        // 3 parameter - ID of the TextView to which the data is written
        // 4 parameter- the Array of data
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
                android.R.layout.simple_list_item_1, android.R.id.text1, transactionNames);

        // Assign adapter to ListView
        listView.setAdapter(adapter);

        // ListView Item Click Listener
        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> parent, View view,
                                    int position, long id) {

                // ListView Clicked item index
                int itemPosition     = position;

                // ListView Clicked item value
                String  itemValue    = (String) listView.getItemAtPosition(position);

                //Get transaction from list from given position
                Transaction transaction = AddTransactionTab.transactionList.get(itemPosition);

                // Show detail of transaction when any list item is clicked
                Toast.makeText(getApplicationContext(),transaction.toString() ,
                              Toast.LENGTH_SHORT).show();
            }
        });
    }
}

  Transaction.java

package com.nverma.expensebook.vo;

public class Transaction {
    private String tranNameTxt, tranDateTxt, amountTxt, payeeTxt, transactionDetailTxt;;

    public String getTranNameTxt() {
        return tranNameTxt;
    }

    public void setTranNameTxt(String tranNameTxt) {
        this.tranNameTxt = tranNameTxt;
    }

    public String getTranDateTxt() {
        return tranDateTxt;
    }

    public void setTranDateTxt(String tranDateTxt) {
        this.tranDateTxt = tranDateTxt;
    }

    public String getPayeeTxt() {
        return payeeTxt;
    }

    public void setPayeeTxt(String payeeTxt) {
        this.payeeTxt = payeeTxt;
    }

    public String getAmountTxt() {
        return amountTxt;
    }

    public void setAmountTxt(String amountTxt) {
        this.amountTxt = amountTxt;
    }

    public String getTransactionDetailTxt() {
        return transactionDetailTxt;
    }

    public void setTransactionDetailTxt(String transactionDetailTxt) {
        this.transactionDetailTxt = transactionDetailTxt;
    }

    @Override
    public String toString() {
        return  "Transaction Name : " + tranNameTxt + "\n" +
                "Transaction Date : " + tranDateTxt + "\n" +
                "Amount : " + amountTxt + "\n" +
                "Payee : " + payeeTxt + "\n" +
                "Transaction Detail : " + transactionDetailTxt ;
    }
}

4. Once you created these files, you are ready to run the application now. Before running application, ensure to setup AVD (Android Virtual Device). On click of run button, you will be asked to select environment to run the application. If you setup your AVD, you can choose 'Launch Emulator' option and select your AVD.


On click of 'Ok' button emulator is initialized and opened. Once you unlock the screen you will be able to see tab based application. Now you can add transaction and see added transaction on list tab. 


I hope this post helped you out creating and understanding tab based android application. If got this helping, please feel free to share your feedback. 

! Happy Android Application Development !