Module 1-App Design and Development

Indian IT Industry, which is more or less export driven, is going through paradigm shift. As the number of computing devices (smart phones, tablets, desktops, laptops etc.) is increasing, innovation is flowing in the application development. On one side you can see the increase in number of e-services (retails, governance etc.) and on other side demand for developing mobile application for serving them. Can you foresee the domestic market in application development? To serve this, the biggest challenge is to keep pace with the latest development in technologies.
"Earlier, employees looked at IT jobs as an entitlement- you do an engineering course and are assured of a job. That's no longer the case. Technology changes are rapid... employees need to be re-skill and evolve"---These were the words of Som Mittal President Nasscom, the highest body in Indian IT industry.

To provide solution at both the levels, this program aims to build advance skills and enhance modelling approach among budding software engineers. Module 1 includes Installation of required software and tools. Short description of software used. Very first application and understanding of various part of android project. Widgets and their implementation using XML and Code. LoveCheck application using XML code and dynamic code.

Installation of Required Software:

Anytime you think of application development, unfortunately or fortunately you have to do some programming stuff. So you should have a good hand at programming skills. For android application development, generally we require Java. If you know java, Good and if not, there is nothing to worry about; we are all set to sharpen our programming skills as well while writing our applications. Earlier you were required to install a list of fancy items, but thanks to developers at Google, who have made the installation process quite easy by bundling all the required tools and software in a single package. Just go to developer.android.com/sdk and download the ADT bundle from the list mentioned (Dont worry we will be providing a copy of ADT bundle for both windows and linux with this module ) After you have downloaded the ADT bundle (the package we were talking about), unpack it (extract it in some folder, you may name it android_development. There are two folder namely eclipse and sdk. Eclipse is an IDE (Integrated Development Environment, I will be explaining shortly) and SDK (Software Development Kit) contains all the necessary software tools we require to build android projects. And you are done with software installation (believe me nothing else is required )

Exploring The ADT Bundle:

Let me first list out the things the package, we have download, contains Eclipse with ADT plugin Android SDK Tools Android Platform Tools The Latest Android Platform The Latest Android System Image for the emulator

Solution Box Education and Research (P) Limited, Jodhpur (India)

As we discussed, we will be doing some programming stuff, so we will need an editor, compiler eclipse serve the same purpose. But it is not just an editor; it is a powerful IDE which makes your programming experience awesome (you will realize it when you will start developing). ADT plugin is an extension which allows us to create, debug android application using eclipse. Android SDK tools help us to build apps, make .apk files (file that is installed in any device as an application), porting them on device etc. The bundle includes the latest android platforms tools (4.2 jelly bean at time of writing this module). After writing the application we need to test it on some android powered device. If you have one, well, if dont, we have virtual devices. Virtual devices, no these are not other planet material, these are just simple emulator software which create virtual stance of real devices on which we can test our applications.

Making our very first app:

So with everything in place, we are all set to start our android application development experience. So go to the folder where we unpacked the ADT Bundle, open the eclipse and run the eclipse by clicking on eclipse icon (figure m1)

Figure m1

And now create a new android project by clicking on file/new/android application project Name the project SbFirst and other as per the figure m3 and click on next, leave as it is and click on next. Now you can create an icon for app but for a time being leave it and click on next, further choose blank activity and click on next and finally click on finish. It will look like figure m5. So before testing it any AVD (android virtual device), we have to create one. Click on window/android virtual device manager. In appeared dialog box click on new (figure m6) and fill the entries as per figure m7.Launch the AVD by clicking on start button in AVD manager dialog box. Now its time to test our application on the AVD we have just created (it will take some time, once AVD launches, dont close it). In eclipse, there is play button on the tool bar select Run as/Android Application (figure m8). After your app is running successfully in AVD, lets understand various part of android project. Go to project explorer located on left side of eclipse (figure m9).

Solution Box Education and Research (P) Limited, Jodhpur (India)

Figure m2

Figure m3

Solution Box Education and Research (P) Limited, Jodhpur (India)

Figure m4

Figure m5

Solution Box Education and Research (P) Limited, Jodhpur (India)

Figure m8

Figure m9

Solution Box Education and Research (P) Limited, Jodhpur (India)

Figure m7

We can see there are different folders like src, gen, assets etc. At present we will be focusing on three parts, first the file which defines the layout (user interface) of your application and file is activity_main.xml. This file is located in res/layout of our android project (SbFirst in this case). Second, the MainActivity.java file which defines the functionality of our android application. This file is located inside src folder of our android project and third AndroidManifest.xml where we define our activities (we will discuss shortly), different hardware permission etc. (Explore the code of these files) Now we have a basic idea of android project, we can proceed to Activity.

Activity:
An activity in simple terms is just a window which contains the user interface of our application. If you have used some android application in past, you might have noticed there are many windows in many applications. So an application can have one or more number of activities. By default our application starts with a main activity and other we can define in a hierarchy. For every activity we have a layout file (.xml) and a .java file for defining its. In latest ADT tools it s quite easy to define a

Solution Box Education and Research (P) Limited, Jodhpur (India)

new activity for an application (we will learn in 2nd Module). Every activity goes through various stages while we run an application like paused, stopped, resumed etc. particularly known as activity life cycle (we will discuss in 2nd module).

Widgets:
Widgets are just fancy objects in android application which are used for various functionalities. As a part of this module we will practise TextView, EditText, Button, ProgressBar and Toast. First we will discuss all these widgets using xml code in our layout file (located where?), then we will define all in our .java file dynamically. At present, we are not discussing any full working application, so we need something to check the status of different widgets we are going to define in our application. For that purpose we will use a very powerful java class Log (to use Log in our code, we need to import android.util.Log class, in eclipse just press ctrl+shift+o, it will automatically import all necessary class)

TextView:
TextView is a simple text-field view. Whenever we want display some predefined (non-editable) text, we use TextView. In xml code, we use text attribute (see activity_main.xml code below) to define the text we want to display.

Create a new android project; name it Views (you know how to create a new android project in eclipse). Open its activity_mail.xml file (by default it will be displayed in graphical view, change it to xml view by clicking on activity_main.xml button located on bottom of box where we write

code figure m10)

Replace the existing code with the following code:
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/test"/> </LinearLayout>

In the text attribute of TextView , we have used a string resource (@ sign is used whenever we refer a resource object from xml). This will raise an error. Open string.xml file located in res/values folder of our android project (in string.xml file we defined string resources so that we can change from a single place for later changes) change its code as below:
<?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">Views</string> <string name="action_settings">Settings</string>

Solution Box Education and Research (P) Limited, Jodhpur (India)

<string name="test">this is simple text view</string> </resources>

This how we create string resources in android project. Lets save the changes and run your android project (you know how to do it). We can see your Views application running

Figure m10

in the AVD we created (figurem10). Lets understand basics of creating user-interface. First we define a parent layout (viewGroup) and as a part of it we create different sub-view. Likewise, we have defined LinearLayout as a parent view and TextView as a part of it. These have different attribute like width, height, orientation (as we see in the code written above). Above code will be explained in detail in lecture with this module.

EditText:
EditText is simply a user-editable text-field. Whenever we want, user to enter some data like username, password etc., we use EditText. In EditText, we have used hint attribute (see the code below) to show a hint in field (ever noticed the semi-transparent hint message in user-name field of your facebook login page?) In the activity_main.xml file Views project, add the following code (shown in bold letters)
<LinearLayout 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" android:orientation="vertical" > <TextView

Solution Box Education and Research (P) Limited, Jodhpur (India)

android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/test" /> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/hint" /> </LinearLayout>

See we have again used a string resource. Open string.xml file (located where?) and add the code shown in bold below
<?xml version="1.0" encoding="utf-8"?> <resources> <string <string <string <string </resources> name="app_name">Views</string> name="action_settings">Settings</string> name="test">this is simple text view</string> name="hint">enter some text here</string>

Save everything and run the application (how press ctrl+F11 for eclipse ) it will appear like figure m11.

Figure m11

Enter some text into it will appear like figure m12.

Figure m12

Button:
A simple button is a widget clicking on which we expect something desirable to happen (that desirable we need to define in our java code, we will discuss later). To add a button add the following code in our activity_main.xml file in same way we added TextView and EditText as parts of LinearLayout Also we need to create a string resource. Just add following code in string.xml file
<string name="btntxt">Enter!</string>

Solution Box Education and Research (P) Limited, Jodhpur (India)

activity_main.xml code

<Button android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/btntxt" />

Save everything and press ctrl+F11 see application will appear like

Though we havent defined what should happen when the button is clicked. So far we have been working with activity_main.xml only. Now onwards we will get hands dirty with MainActivity.java file also. Look in gen folder of Views project (in project explorer pane). There is file named R.java. This is an automatically generated file by eclipse and one should not try to edit this file (strictly!!). R.java keeps track of all the resources we create and generate ids which can be used in java code. Before moving further, lets understand one more widget, Toast.

Toast:
Toast is a simple method for notification in android application. Say we want some message to be displayed when we click upon the button we created in Views application, we can do this by implementing Toast. To implement this, first we need to define a listener function for our button. A button listener is just a method in which we define what should happen when we click upon that button. Listener will be discussed in details in 2nd module, At present we will be implementing by adding an attribute onClick in Button tag of our activity_main.xml file as below
<Button android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/btntxt" android:onClick="showMessage" />

showMessage is the name of the method which returns a view (we will define) when the button is clicked. Open MainActivity.java file and change its content as given below
package in.co.solutionbox.views; import android.app.Activity; import android.os.Bundle;

10

Solution Box Education and Research (P) Limited, Jodhpur (India)

import android.view.View; import android.widget.Toast; public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } public void showMessage(View view){ Toast.makeText(this,"Button is clicked", Toast.LENGTH_SHORT ).show(); }

See here we have implemented the sendMessage method. It should following three conditions public have avoid return value there should only one parameter View (this will be the view which was clicked) To use a View object we need to import its class android.view.View (in eclipse, just press ctrl+shift+o, it will automatically import all the required classes required). Along with, we have also implemented the Toast widget. It has three parameters, Context which is used to provide a reference (this keyword is used to tell the same class) String that should be displayed Length , for how long message should be displayed Save everything and run the application. When we click upon the button, application will appear like figure m12.

11

Solution Box Education and Research (P) Limited, Jodhpur (India)

So now we know how to implement a simple listener method for our button and Toast widget in our application. What if I want to display the string I enter into EditText field? First we need to add an id attribute to EditText tag in activity_main.xml file as below
<EditText android:id="@+id/message" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/hint" />

For this I need to use the string entered in EditText field. Open MainActivity.java and add the code shown in bold
package in.co.solutionbox.views; import import import import import android.app.Activity; android.os.Bundle; android.view.View; android.widget.EditText; android.widget.Toast;

public class MainActivity extends Activity { EditText message; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } public void showMessage(View view){ message = (EditText) findViewById(R.id. message); String str = message.getText().toString(); Toast.makeText(this,str, Toast.LENGTH_SHORT ).show(); } }

See here we have defined an EditText object (for this we need to import android.widget.EditText class). findViewById() is the method which helps us to refer the EditText view created in our activity_main.xml file by using its id. Also we have created a string variable str to store the message we entered in the EditText field. getText() is the method which returns the text entered and toString() converts it into the string. See we have passed str as string parameter in Toast.makeText method. Save everything and run the application. When we click upon the button, it will appear like figure m13.

12

Solution Box Education and Research (P) Limited, Jodhpur (India)

So far we have learned EditText, TextView, Button, Toast Widgets. So its time to do something on your own.

To Do Exercise:
You might have seen in movies (or tried with yourself too :D) that a girl (or a boy) is having a flower in her/his hand. She keeps on removing its pattles one by one, chanting the he loves me/ he loves me not. You just need to help her by designing a simple application which can tell randomly that his beloved loves her or not. Let me remind your school days. You might have played a game in which you used to write two names on piece and perform some comparison. Based upon, you used to do prediction how much those two persons loved each other. Design an android application to do the same. Ask user to enter two string and compare them using java string methods and predict how much they love each other.

Progress Bar:
Let me finish this module by introducing progress bar widget. As the name suggest, it is as a visual display indicator for progress of process. A simple progress may look like figure m14.

There can be many operations inside your activity like fetching some information from internet or loading some video. Its good to implement a progress bar to show the progress of such operations. So without adding much ado, lets start implementing it. Create a new android project and name it ProgressBarDemo (you know how to do?) Open it activity_main.xml file and change its code as below

13

Solution Box Education and Research (P) Limited, Jodhpur (India)

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="match_parent" android:orientation="vertical" > <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Start Progress Bar" android:onClick="startProgress"/> <ProgressBar android:id="@+id/progress" android:layout_width="match_parent" android:layout_height="wrap_content" style="@android:style/Widget.ProgressBar.Horizontal" /> </LinearLayout>

See the style attribute in the ProgressBar tag. The style, we mentioned here, will display the progress bar in a horizontally (as we saw in the last figure). Open MainActivity.java file and change its code as below
package in.co.solutionbox.progressbardemo; import import import import import android.app.Activity; android.os.Bundle; android.view.View; android.widget.ProgressBar; android.widget.Toast;

public class MainActivity extends Activity { private static final int PROGRESS= 1; private ProgressBar mProgress; private int mProgressStatus = 0;

@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } public void startProgress(View view){ mProgress = (ProgressBar) findViewById(R.id.progress);

while(mProgressStatus <10000){ mProgressStatus += PROGRESS; mProgress.setProgress(mProgressStatus); } Toast.makeText(this, "Progress Bar completes", Toast.LENGTH_SHORT).show();

} }

14

Solution Box Education and Research (P) Limited, Jodhpur (India)

Save everything and run the project. When you click upon the button, app will appear like figure m14.

Here progress bar completes as soon as you click upon the button. Though we have discussed progress bar here for sake of a new widget but progress bars are not implemented the way we have implemented here. We implemented them using threads (a concept in java programming). We will be implementing them in the 2nd module.

To Do Exercise:

Implement the progress in LoveCheck application, you created in the last exercise.

15

Solution Box Education and Research (P) Limited, Jodhpur (India)

16

Solution Box Education and Research (P) Limited, Jodhpur (India)