16
SWEN-101: Software Engineering Freshman Seminar Tutorial 5: Android Studio – Prototyping 1 Android Studio - Prototyping Objective: In this tutorial you will learn about creating buttons in Andriod Studio and adding interactivity to navigate screens. At the end of the session you will be able to: Create Activities Create Buttons Write program to provide functionality to your android project We will create a simple application as shown below.First screen of our application consists of two elements: A text “Page 1!” which is bold and italic. A button named ‘GO TO PAGE 2’. Clicking on this button will switch the screen to “Page 2!”. Second screen has the same elements (text and button). Clicking on button ‘GO TO PAGE 1’ will take you to the previous screen “Page 1”.

Android Studio - Prototypingswen-101/projects/Tutorials/Tutorial 5 - Prototyping.pdfSWEN-101: Software Engineering Freshman Seminar Tutorial 5: Android Studio – Prototyping 2 Part

  • Upload
    others

  • View
    9

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Android Studio - Prototypingswen-101/projects/Tutorials/Tutorial 5 - Prototyping.pdfSWEN-101: Software Engineering Freshman Seminar Tutorial 5: Android Studio – Prototyping 2 Part

SWEN-101: Software Engineering Freshman Seminar Tutorial 5: Android Studio – Prototyping

1

Android Studio - Prototyping Objective: In this tutorial you will learn about creating buttons in Andriod Studio and adding interactivity to navigate screens. At the end of the session you will be able to:

● Create Activities ● Create Buttons ● Write program to provide functionality to your android project

We will create a simple application as shown below.First screen of our application consists of two elements:

● A text “Page 1!” which is bold and italic. ● A button named ‘GO TO PAGE 2’.

Clicking on this button will switch the screen to “Page 2!”. Second screen has the same elements (text and button). Clicking on button ‘GO TO PAGE 1’ will take you to the previous screen “Page 1”.

Page 2: Android Studio - Prototypingswen-101/projects/Tutorials/Tutorial 5 - Prototyping.pdfSWEN-101: Software Engineering Freshman Seminar Tutorial 5: Android Studio – Prototyping 2 Part

SWEN-101: Software Engineering Freshman Seminar Tutorial 5: Android Studio – Prototyping

2

Part 0: Open the project which you created in tutorial 4. 1. Go to File -> Open

2. Go to the directory where the project was stored and click ‘OK’.

#end_of_part_0

Page 3: Android Studio - Prototypingswen-101/projects/Tutorials/Tutorial 5 - Prototyping.pdfSWEN-101: Software Engineering Freshman Seminar Tutorial 5: Android Studio – Prototyping 2 Part

SWEN-101: Software Engineering Freshman Seminar Tutorial 5: Android Studio – Prototyping

3

Part 1: Working on User Interface 1. Select the activity that titled with your userID, and open the activity editor window in ‘Design’

mode by going into the “res” folder → “layout” → “activity_main.xml” and double click on it. Note: If you are not able to see the text “Hello World” here, you’ll notice that there are issues by clicking on the warning/error sign as shown in the screenshot below

When you click on that warning sign you will see error messages saying “Failed to load AppCompat ActionBar with unknown error” and “Failed to instantiate more than one class”.

To rectify this error, go to “res” folder → “Values” folder → styles.xml Here, change the code of <style name=”AppTheme” parent=”Theme.AppCompat.Light.DarkActionBar”> </style> To <style name=”AppTheme” parent=”Base.Theme.AppCompat.Light.DarkActionBar”> </style>

2. Let us modify the text field: a. Double click on the text which is currently 'Hello World!'. It should open attribute

window. b. Change the text to 'Page 1!'. c. Expand the ‘textApperance’ field in the attribute window and make the text larger

by changing the textSize to 30sp. d. Make it Bold and Italic. Refer the attached screenshot.

Page 4: Android Studio - Prototypingswen-101/projects/Tutorials/Tutorial 5 - Prototyping.pdfSWEN-101: Software Engineering Freshman Seminar Tutorial 5: Android Studio – Prototyping 2 Part

SWEN-101: Software Engineering Freshman Seminar Tutorial 5: Android Studio – Prototyping

4

3. Let us add a button: a. Go to palette and click on “Button” group. b. Now you can drag and drop the button from palette to your application's screen.

To do so, click on button, hold and drag onto the screen. c. Drop it below the text.

d. Double click on it to bring the properties window of your button. e. Change its text to 'GO TO PAGE 2'

Page 5: Android Studio - Prototypingswen-101/projects/Tutorials/Tutorial 5 - Prototyping.pdfSWEN-101: Software Engineering Freshman Seminar Tutorial 5: Android Studio – Prototyping 2 Part

SWEN-101: Software Engineering Freshman Seminar Tutorial 5: Android Studio – Prototyping

5

4. Let's create our second screen which will be our second activity. a. Right click on name of your application. b. Go to New -> Activity -> Empty Activity

c. Give Activity name as 'activity_userid_2' d. Click on 'Finish'.

Page 6: Android Studio - Prototypingswen-101/projects/Tutorials/Tutorial 5 - Prototyping.pdfSWEN-101: Software Engineering Freshman Seminar Tutorial 5: Android Studio – Prototyping 2 Part

SWEN-101: Software Engineering Freshman Seminar Tutorial 5: Android Studio – Prototyping

6

5. Now edit the text and add a button to the second activity as shown in the image below (See steps 2 and 3 above for review if needed).

#end_of_part_1

Page 7: Android Studio - Prototypingswen-101/projects/Tutorials/Tutorial 5 - Prototyping.pdfSWEN-101: Software Engineering Freshman Seminar Tutorial 5: Android Studio – Prototyping 2 Part

SWEN-101: Software Engineering Freshman Seminar Tutorial 5: Android Studio – Prototyping

7

Part 2: Adding the Functionality using Java

1. Go to Project Window on the left of the screen and open in ‘Android’ Scope. 2. Expand 'app' -> 'java' -> 'com.example.username.helloworld'. 3. Open 'MainActivity.java’. This is how the file will look like.

4. Now we will start adding code step-by-step in order to get the features as shown at the

start of the tutorial. First we will add 4 import statements as shown in the screenshot below. These import statements are used to import the necessary files and packages which contain methods and classes with predefined functionality.

Page 8: Android Studio - Prototypingswen-101/projects/Tutorials/Tutorial 5 - Prototyping.pdfSWEN-101: Software Engineering Freshman Seminar Tutorial 5: Android Studio – Prototyping 2 Part

SWEN-101: Software Engineering Freshman Seminar Tutorial 5: Android Studio – Prototyping

8

5. Now, let us add code for the button. Enter the 2 lines shown in the below screenshot. We define a variable named 'button' of type 'Button' to hold values related to the button we used in UI. 'private' is an access modifier which means this variable can only be used within this class. The id of the button is assigned to the 'button' variable using 'findViewById()' method.

Note: onCreate() is a method used to define the actions to be taken when this activity is initiated i.e. when this page is loaded. It is protected so it can be used in the classes which inherited this class. 'Bundle savedInstanceState' : The savedInstanceState is a reference to a Bundle object that is passed into the onCreate method of every Android Activity. Activities have the ability, under special circumstances, to restore themselves to a previous state using the data stored in this bundle. If there is no available instance data, the savedInstanceState will be null. For example, the savedInstanceState will always be null the first time an Activity is started, but may be non-null if an Activity is destroyed during rotation. ‘setContentView(R.layout.activity_main)’ in this code ‘R’ means Resource, ‘layout’ means design, ‘acitivity_main’ is the xml you have created under ‘res->layout->acitivity_main.xml’.

Page 9: Android Studio - Prototypingswen-101/projects/Tutorials/Tutorial 5 - Prototyping.pdfSWEN-101: Software Engineering Freshman Seminar Tutorial 5: Android Studio – Prototyping 2 Part

SWEN-101: Software Engineering Freshman Seminar Tutorial 5: Android Studio – Prototyping

9

6. Now, we will add code for what is to be done once the button is clicked on. 'setOnClickListener()' method is used. First we create a new object and then call 'onClick()' method by passing that object. Here we define the method named 'openActivity2()' (You can give the name of your activity instead of Activity2).

Page 10: Android Studio - Prototypingswen-101/projects/Tutorials/Tutorial 5 - Prototyping.pdfSWEN-101: Software Engineering Freshman Seminar Tutorial 5: Android Studio – Prototyping 2 Part

SWEN-101: Software Engineering Freshman Seminar Tutorial 5: Android Studio – Prototyping

10

7. Write the openActivity2() code that will open Activity2 when the button is clicked, as shown in the below screenshot. Note: An intent is an abstract description of an operation to be performed. It can be used to launch another activity. So inside openActivity2() method, object 'intent' of 'Intent' type is created and the activity_2 class is passed as a value. Then 'intent' variable is passed to 'startActivity' method which is used to start a new activity, in this case, activity_2.

Page 11: Android Studio - Prototypingswen-101/projects/Tutorials/Tutorial 5 - Prototyping.pdfSWEN-101: Software Engineering Freshman Seminar Tutorial 5: Android Studio – Prototyping 2 Part

SWEN-101: Software Engineering Freshman Seminar Tutorial 5: Android Studio – Prototyping

11

The below screenshot shows the complete code of the MainAcitvity java file.

Note: The package name will be different in your case after ‘com.example.’ Remember that this Activity1.java is a backend file for activity_1.xml file. Every functionality is needed to be written in class MainActivity {.....} which extends(inherits) class AppCompatActivity.

Page 12: Android Studio - Prototypingswen-101/projects/Tutorials/Tutorial 5 - Prototyping.pdfSWEN-101: Software Engineering Freshman Seminar Tutorial 5: Android Studio – Prototyping 2 Part

SWEN-101: Software Engineering Freshman Seminar Tutorial 5: Android Studio – Prototyping

12

8. Now go to Activity2.java and write the following code in it. Here, we add button2 and write code to open MainActivity when button2 is clicked. Refer to the following image.

9. Save all the changes and run the application. 10. Push all the changes to your GitHub repository as you have learnt in Tutorial 3 (Add ->

Commit -> Push)

#end_of_part_2

Page 13: Android Studio - Prototypingswen-101/projects/Tutorials/Tutorial 5 - Prototyping.pdfSWEN-101: Software Engineering Freshman Seminar Tutorial 5: Android Studio – Prototyping 2 Part

SWEN-101: Software Engineering Freshman Seminar Tutorial 5: Android Studio – Prototyping

13

Part 3: Read and learn about some basic concepts related to User Interfaces in Android (Note: No steps to follow are involved in this part) Android Layouts: An Android layout is a class that handles arranging the way its elements appear on the screen. There are some standard layouts in android which are widely used, explained as follows: 1) Linear Layout : LinearLayout is a view group that aligns all children in a single direction, vertically or horizontally.

2) Relative Layout : RelativeLayout is a view group that displays how child views are positioned relative to each other.The position of each view can be specified as relative to sibling elements (such as to the left-of or below another view) or in positions relative to the parent RelativeLayout area (such as aligned to the bottom, left or center).

Page 14: Android Studio - Prototypingswen-101/projects/Tutorials/Tutorial 5 - Prototyping.pdfSWEN-101: Software Engineering Freshman Seminar Tutorial 5: Android Studio – Prototyping 2 Part

SWEN-101: Software Engineering Freshman Seminar Tutorial 5: Android Studio – Prototyping

14

3) Grid Layout: GridLayout uses a grid of infinitely-thin lines to separate its drawing area into rows, columns, and cells. It supports both row and column spanning, this means it is possible to merge adjacent cells into a large cell (a rectangle) to contain a View.

4) ConstraintLayout : It is the most recent type of layout which was introduced in android on May 30, 2016. Previously for the more complex User Interfaces, mixture or different layouts e.g linear and relative layouts were used. Constraint Layout is efficient enough to create complex UI while avoiding the programming complexities. It is the default layout in Android Studio. Let's Check which layout is used in our project. Observe the xml file from top. On the second line it say's 'ConstraintLayout' which is followed by 'android.support.constraint'.

#end_of_part_3

Page 15: Android Studio - Prototypingswen-101/projects/Tutorials/Tutorial 5 - Prototyping.pdfSWEN-101: Software Engineering Freshman Seminar Tutorial 5: Android Studio – Prototyping 2 Part

SWEN-101: Software Engineering Freshman Seminar Tutorial 5: Android Studio – Prototyping

15

Part 4: Object Oriented Programming Overview (Note: No steps to follow are involved in this part) It is a type of programming in which programmers define not only the data type of a data structure, but also the types of operations (functions) that can be applied to the data structure. In this way, the data structure becomes an object that includes both data and functions. In addition, programmers can create relationships between one object and another. For example, objects can inherit characteristics from other objects. One of the principal advantages of object-oriented programming techniques over procedural programming techniques is that they enable programmers to create modules that do not need to be changed when a new type of object is added. A programmer can simply create a new object that inherits many of its features from existing objects. This makes object-oriented programs easier to modify.

Object: Objects are the basic run-time entities in an object-oriented system. Programming problem is analyzed in terms of objects and nature of communication between them. When a program is executed, objects interact with each other by sending messages. Different objects can also interact with each other without knowing the details of their data or code. An object is an instance of a class. A class must be instantiated into an object before it can be used in the software.

Class: A class is a collection of objects of a similar type. Once a class is defined, any number of objects can be created which belong to that class. A class is a blueprint, or prototype, that defines the variables and the methods common to all objects of a certain kind.

Instance: The instance is the actual object created at runtime. One can have an instance of a class or a particular object. State: The set of values of the attributes of a particular object is called its state. The object consists of state and the behaviour that's defined in the object's class. Method: Method describes the object’s behaviors. A Dog has the ability to bark. So bark() is one of the methods of the Dog class. Message Passing: The process by which an object sends data to another object or asks the other object to invoke a method. Message passing corresponds to "method calling".

Page 16: Android Studio - Prototypingswen-101/projects/Tutorials/Tutorial 5 - Prototyping.pdfSWEN-101: Software Engineering Freshman Seminar Tutorial 5: Android Studio – Prototyping 2 Part

SWEN-101: Software Engineering Freshman Seminar Tutorial 5: Android Studio – Prototyping

16

Abstraction: Abstraction refers to the act of representing essential features without including the background details or explanations. Classes use the concept of abstraction and are defined as a list of abstract attributes. The main advantage of abstraction is we can achieve security and provide more flexibility while using the system by using it. Encapsulation: It is the mechanism that binds together data and corresponding methods into a single module, and keeps both safe from outside interference and misuse. In short, it isolates a particular code and data from all other codes and data. A well-defined interface controls the access to that particular code and data. Storing data and functions in a single unit (class) is encapsulation. Data cannot be accessible to the outside world and only those functions which are stored in the class can access it. Inheritance: It is the process by which one object acquires the properties of another object. This supports the hierarchical classification. Without the use of hierarchies, each object would need to define all its characteristics explicitly. However, by use of inheritance, an object needs only to define those qualities that make it unique within its class. It can inherit its general attributes from its parent. A new sub-class inherits all of the attributes of all of its ancestors. Polymorphism: Polymorphism means the ability to take more than one form. An operation may exhibit different behaviors in different instances. The behavior depends on the data types used in the operation. It is a feature that allows one interface to be used for a general class of actions. The specific action is determined by the exact nature of the situation. In general, polymorphism means "one interface, multiple methods", This means that it is possible to design a generic interface to a group of related activities. This helps reduce complexity by allowing the same interface to be used to specify a general class of action. It is the compiler's job to select the specific action (that is, method) as it applies to each situation. #end_of_part_4 #End_of_tutorial_5