sb modules stp

7/30/2019 Sb Modules Stp

1/16

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

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 innumber 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/sdkand 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 requireto 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


2/16


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 androidpowered device. If you have one, well, ifdont, 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)

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

Figure m1


3/16


Fi ure m2

Figure m3


4/16


Figure m4

Figure m5


5/16


Figure m8

Figure m9


6/16


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/layoutof 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 toActivity.

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 wehave a layout file (.xml) and a .java file for defining its. In latest ADT tools its quite easy to define a

Figure m7


7/16


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 textattribute (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 androidproject in eclipse).

Open its activity_mail.xml file (by default it will be displayed in graphical view, change it toxml 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:

In the textattribute 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:

ViewsSettings


8/16


this is simple text view

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

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 likeusername, password etc., we use EditText. In EditText, we have used hintattribute (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)


9/16


android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="@string/test"/>

See we have again used a string resource. Open string.xml file (located where?) and add the code

shown in bold below

Views

Settingsthis is simple text view

enter some text here

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

Enter some text into it will appear like 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

Enter!

Figure m11

Figure m12


10/16


activity_main.xml code

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

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 belowpackage in.co.solutionbox.views;

import android.app.Activity;import android.os.Bundle;


11/16


import android.view.View;

import android.widget.Toast;

publicclass MainActivity extends Activity {

@Override

protectedvoid onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);

}

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


12/16


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

For this I need to use the string entered in EditText field. Open MainActivity.java and add the code

shown in boldpackage in.co.solutionbox.views;

import android.app.Activity;

import android.os.Bundle;import android.view.View;

import android.widget.EditText;import android.widget.Toast;


EditText message;

@Override

protectedvoid onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);}

publicvoid 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 stras string parameter in Toast.makeText method.

Save everything and run the application. When we click upon the button, it will appear like figure

m13.


13/16


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


14/16


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 belowpackage in.co.solutionbox.progressbardemo;

import android.app.Activity;

import android.os.Bundle;import android.view.View;

import android.widget.ProgressBar;

import android.widget.Toast;


privatestatic finalintPROGRESS= 1;private ProgressBar mProgress;privateintmProgressStatus = 0;

@Override

protectedvoid onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);}

publicvoidstartProgress(View view){mProgress = (ProgressBar) findViewById(R.id.progress);

while(mProgressStatus


15/16


Save everything and run the project. When you click upon the button, app will appearlike 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 2

nd

module.

To Do Exercise:

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


16/16


sb modules stp

Documents