Scribd
Upload
14 views

Lab Activity 1 - Intro & IO

Uploaded by

ellyshakhan99
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
14 views

Lab Activity 1 - Intro & IO

Uploaded by

ellyshakhan99
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 39

UNIVERSITI TEKNOLOGI MARA

FACULTY OF COMPUTER AND MATHEMATICAL SCIENCES


ICT602/ICT650 MOBILE TECHNOLOGY AND DEVELOPMENT
LAB 1 – BASIC INPUT OUTPUT
INPUT & OUTPUT
Outline
•We will try to build an app
that
A. display a notification or
text when a user press a
button
B. display an output based on
user input

Dr. Ahmad Iqbal Hakim Suhaimi 3


A - Display notification or text
when a user press a button

Dr. Ahmad Iqbal Hakim Suhaimi 4


Start a New Project
• Launch Android Studio and click on “New Project”

Dr. Ahmad Iqbal Hakim Suhaimi 5


Configure your template
• Choose Empty Activity

Dr. Ahmad Iqbal Hakim Suhaimi 6


Configure your project
1. App name:
Lab1-iqbal
2. Leave package
name as default
3. Take note save
location
4. Choose Java
5. Make sure MIN
API is 21
6. Click Finish and
wait for gradle

Dr. Ahmad Iqbal Hakim Suhaimi 7


API
• The higher the API the more functionalities you can
include in your app

• However chances your app being supported by


most phones is slimmer

• Usually, select API 21 because it is a good


compromise!

Dr. Ahmad Iqbal Hakim Suhaimi 8


Wait for Gradle!
• Sit back and wait for Gradle to generate your
application!

Dr. Ahmad Iqbal Hakim Suhaimi 9


Changing view (UI & Java)
• Click on activity_main.xml tab

Dr. Ahmad Iqbal Hakim Suhaimi 10


UI design through Drag & Drop or XML
• UI design can be done through drag & drop and
XML coding or both. Click on Code / Split / Design to
change view accordingly.

Dr. Ahmad Iqbal Hakim Suhaimi 11


UI View
• You can add UI Elements in here
• Design view is where you can plan out your
Application User Interface

Dr. Ahmad Iqbal Hakim Suhaimi 12


Let us place Button and Text View!
• Lets add Button below TextView
• Drag & drop a button
• Click on the button and Infer constraint

Dr. Ahmad Iqbal Hakim Suhaimi 13


Configure Button
• Rename Button to something Interesting!!
• Click on the button and click Attribute
• Type in “SUBMIT” as text properties and don’t
forget to hit Enter

Dr. Ahmad Iqbal Hakim Suhaimi 14


Configure Button
• Now lets bind the Button with a function…
• We need to add functionality to this button so it
could link to a method to display text! (Button to
TextView)

Dr. Ahmad Iqbal Hakim Suhaimi 15


Configure Button
• Type in displayText as onClick properties and hit
Enter

Dr. Ahmad Iqbal Hakim Suhaimi 16


OK lets do some coding!
• Now we need to finish up with some coding and create
displayText( ) method!
• Click on the “MainActivity.java” tab
• At the very minimum, you will get a skeleton Application

Dr. Ahmad Iqbal Hakim Suhaimi 17


The three important step to remember
1. Declare class-level private/public View
objects

2. Use findViewById to assign View


objects in onCreate( ), just below set
ContentView( );

3. Use the View objects!!

Dr. Ahmad Iqbal Hakim Suhaimi 18


View
• “View” is a UI class that can be placed on the Phone
Screen

• The most basic “View” class are


• “TextView”
• “EditText”
• “Button”

• Both “EditText” and “Button” extends “TextView” class

• … “TextView” extends from“View” class

• Remember this, because it may become relevant later…

Dr. Ahmad Iqbal Hakim Suhaimi 19


In this case
• Declare TextView and Button class level objects
(tvMessage and submitButton)

Dr. Ahmad Iqbal Hakim Suhaimi 20


IMPORT!!!!!!!!!!!!!!!!!!!!!!!!!!!!
• When a blue box appear, Press ALT + ENTER to
import class

• TextView and Button class will be imported.

Dr. Ahmad Iqbal Hakim Suhaimi 21


Assign using findViewById
• Assign tvMessage and submitButton using
findViewById

Dr. Ahmad Iqbal Hakim Suhaimi 22


Use the View Object!
• At the of MainAcitivity Class, create displayTex()
method

Dr. Ahmad Iqbal Hakim Suhaimi 23


Use the View Object!
• Add action, because the objective of this
application is to display a welcome text
• then write a welcome text using TextViewObject
when the Button is clicked!

Dr. Ahmad Iqbal Hakim Suhaimi 24


Adding Toast!
In displayText() method, type the following…

Dr. Ahmad Iqbal Hakim Suhaimi 25


Run the app
• Click Run button on the toolbar

Dr. Ahmad Iqbal Hakim Suhaimi 26


Finished Product

• Toast Notification
appears at the bottom
and disappear after few
seconds.

Dr. Ahmad Iqbal Hakim Suhaimi 27


Handling Input/Output
• Next, we will look into various ways in handling
input/output

• Most basic form of input comes from user action in


EditText, Button presses or slider scrolling/swiping

• Most basic form of output or feedback comes in


form of TextView, vibration (tactile), and
notifications.

Dr. Ahmad Iqbal Hakim Suhaimi 28


Add PlainText
• Drag & Drop PlainText
• Infer constraint on PlainText
• Define id “editText”

Dr. Ahmad Iqbal Hakim Suhaimi 29


Declare EditText

Dr. Ahmad Iqbal Hakim Suhaimi 30


Assign View Objects with findViewById
• In onCreatemethod..

Dr. Ahmad Iqbal Hakim Suhaimi 31


Use Objects by creating displayText method

Dr. Ahmad Iqbal Hakim Suhaimi 32


Get text from editText

Dr. Ahmad Iqbal Hakim Suhaimi 33


Run the app
• Click Run button on the toolbar

Dr. Ahmad Iqbal Hakim Suhaimi 34


Output
• Type in your name and click BUTTON

Dr. Ahmad Iqbal Hakim Suhaimi 35


Exercise
• Add a “Reset” button to remove all
messages with toast message shows
“Name cleared”
• Hint: create a new resetText method using
etName.getText().clear();

• Generate release signed apk


https://www.youtube.com/watch?v=
QqQ83qK6_rk

• Submit the app (app-release.apk)!

Dr. Ahmad Iqbal Hakim Suhaimi 36


Submission
• Complete the exercise
• Rename your release app.apk file as follows
accordingly
• ICT602CS2515A5BIqbalLab1.apk
• Upload your signed apk file to your google drive
account
• Get the shareable link and make sure link sharing is
turned ON!

• Submit the Google Drive link via MS Teams


(Channel: Assignment Lab) assignment by 30th
April2024.

Dr. Ahmad Iqbal Hakim Suhaimi 37


How to locate your app?
• Run your app at least once
• Generate signed apk file
https://www.youtube.com/watch?v=QqQ83qK6_rk

• Click locate on Notification once done

• A window will be open showing the signed release apk file

• The release signed apk file also can be found in app/release


folder
Dr. Ahmad Iqbal Hakim Suhaimi 38
END

You might also like