Download - 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
-
7/30/2019 Sb Modules Stp
2/16
2 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 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
-
7/30/2019 Sb Modules Stp
3/16
3 Solution Box Education and Research (P) Limited, Jodhpur (India)
Fi ure m2
Figure m3
-
7/30/2019 Sb Modules Stp
4/16
4 Solution Box Education and Research (P) Limited, Jodhpur (India)
Figure m4
Figure m5
-
7/30/2019 Sb Modules Stp
5/16
5 Solution Box Education and Research (P) Limited, Jodhpur (India)
Figure m8
Figure m9
-
7/30/2019 Sb Modules Stp
6/16
6 Solution Box Education and Research (P) Limited, Jodhpur (India)
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/30/2019 Sb Modules Stp
7/16
7 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 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
-
7/30/2019 Sb Modules Stp
8/16
8 Solution Box Education and Research (P) Limited, Jodhpur (India)
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)
-
7/30/2019 Sb Modules Stp
9/16
9 Solution Box Education and Research (P) Limited, Jodhpur (India)
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
-
7/30/2019 Sb Modules Stp
10/16
10 Solution Box Education and Research (P) Limited, Jodhpur (India)
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;
-
7/30/2019 Sb Modules Stp
11/16
11 Solution Box Education and Research (P) Limited, Jodhpur (India)
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.
-
7/30/2019 Sb Modules Stp
12/16
12 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
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;
publicclass MainActivity extends Activity {
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.
-
7/30/2019 Sb Modules Stp
13/16
13 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 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
-
7/30/2019 Sb Modules Stp
14/16
14 Solution Box Education and Research (P) Limited, Jodhpur (India)
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;
publicclass MainActivity extends Activity {
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
-
7/30/2019 Sb Modules Stp
15/16
15 Solution Box Education and Research (P) Limited, Jodhpur (India)
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.
-
7/30/2019 Sb Modules Stp
16/16
16 Solution Box Education and Research (P) Limited, Jodhpur (India)