CS 2122:- Mobile Programming

By Mesfin Belachew /PhD/

Assistant Professor,

5/1/20 AAiT 1
 Android Mobile Programming

5/1/20 AAiT 2
 Android Mobile Programming
1 Android Major Components
– There are four main Android app components:
• Activities: entry point for interacting with the user (Ex. To start Camera, read Email, etc.),
• Services: general-purpose entry point for keeping an app running in the
background (Ex. Play music, notification listeners, screen savers, etc.),
• Content providers: share app data that can be stored on file, database,
web, or on any storage location (Ex. contact information, SQLite database, etc.), and
• Broadcast receivers: enables the system to deliver events to the app outside
of a regular user flow (Ex. alarm to post a notification, alert, etc.).
– Whenever you create or use any of them, you must include
elements in the project manifest .

5/1/20 AAiT 3
 Android Mobile Programming …..
– Components are declared in the <manifest ... >
...
manifest, namely in the file name <application ... >
“AndroidManifest.xml” <activity android:name=”name_of_activity">
……
– The main components that are </activity>
required for the created App will be <receiver android:name=”name_of_the_receiver">
……
generated by default using the </receiver>
Android Studio <service android:name="name_of_the_service">
……
– each components has its own syntax </service>
to be followed <provider android:name="name_of_the_ provider">
……
</provider>
</application>
</manifest>

5/1/20 AAiT 4
 Android Mobile Programming …..

2 Android Execution Environment

– Set Up Android Environment
• need an android SDK and Java Development Kit (JDK)
• Java syntax is used for writing code,
• run on Dalvik Virtual Machine,
– Android Development Tools,
• Android SDK (https://developer.android.com/studio)
• Android Virtual Device (AVD), once installed,
– HelloWorld: First Android Application,

5/1/20 AAiT 5
 Android Mobile Programming ….. Environment
• Android Studio Layout Editor (intro)
o First window after an app is
created/opened using the studio,
o 1 – Folder section, to select one item,
o 2- to switch between design & text (xml
form) mode
o 3- Palette – drag & drop elements,
o 4- component tree to see the hierarchy
of the components,
o 5 – view window to display xml, java,
design view
o 6- Preview button to show some
preview, if applicable

5/1/20 AAiT 6
 Android Mobile Programming ….. Environment
• Create Virtual Device (Emulator)
• In Android Studio, select Tools
> Android > AVD Manager,
• then +Create Virtual Device,
• Set display size (Size), API,
pixels (Resolution & Density),
choose a device, etc.
• Once it is completed, new
emulator will listed and ready
for use,
• While running the App, you
need to select emulator
You can also use your own physical device, to be connected
through USB cable, set the developer options in settings app
5/1/20 AAiT 7
 Android Mobile Programming ….. Environment
• Gradle configuration
• Is used to adjust some settings
about your mobile App, like
version, libraries,
• Located in the
build.gradle(Module:app),
• Used to define some
dependencies to be used,
• Version will be set here when
some major updates are
happening

5/1/20 AAiT 8
 Android Mobile Programming ….. Environment
• Log Statements
• Logcat pan is used to display messages, errors, warnings, etc. while
compiling, debugging and running the App,
• The window/pan has different options to display variety of information
about the running App,

5/1/20 AAiT 9
 Android Mobile Programming …..

3 Android Activities
• Activity Lifecycle indicate the path of activity from it’s creation up to
it's destroyed
• Shows the interaction with the user
– onCreate():
– onStart():
– onResume():
– onRestart():
– onPause()
– onStop()
– onDestroy(), Activity Lifecycle

5/1/20 AAiT 10
 Android Mobile Programming ….. Activities
• Android Activities
package com.Debosmita.Activitytest; @Override
import android.os.Bundle; @Override
public void onStart() { public void onPause() {
import android.app.Activity; super.onStart(); super.onPause();
import android.util.Log; Log.d(tag, "onStart() Event"); Log.d(tag, "onPause() Event");
}
public class MainActivity extends Activity { }
String tag = "Events"; @Override
public void onStop() {
@Override @Override super.onStop();
protected void onCreate(Bundle public void onRestart() { Log.d(tag, "onStop() Event");
savedInstanceState) { super.onRestart(); }
super.onCreate(savedInstanceState); Log.d(tag, "onRestart() Event");
setContentView(R.layout.activity_main); @Override
} public void onDestroy() {
Log.d(tag, "onCreate() Event"); @Override super.onDestroy();
} public void onResume() { Log.d(tag, "onDestroy() Event");
super.onResume(); }
Log.d(tag, "onResume() Event");
} }
5/1/20 AAiT 11
 Android Mobile Programming ….. Activities
• Android Activities, when you run the App, you will see how the
different activities are executed, who is following whom ……

5/1/20 AAiT 12
 Android Mobile Programming …..

4 Android View/Layout Editor

– is responsible for the user interface of the Android application,
– is a widget which appears on screen, in XML file
– many view objects in Android, like buttons, text, text edit, image view,
check/radio/toggle button, switch, etc.
– There are also view groups to show multiple view objects in specific
order/fashion, like Linear, Table, Relative, Frame, Grid and Absolute Layout

5/1/20 AAiT 13
 Android Mobile Programming ….. View
• Layout Editor is used to edit the layout of the components on the App,
– Contains all layout xml files
– To select select design
surface, design + blueprint,
orientation, phone pixel,
API version, action bar
type, size of the preview,
etc.,
– Move, position, resize, etc.
components in the editor
– All the above can also be
done using xml code,

5/1/20 AAiT 14
 Android Mobile Programming ….. View
– View Groups can be also concatenated (linked in chain)
<RelativeLayout
Relative Layout android:layout_width="wrap_content"
android:layout_height="wrap_content">
Linear Layout <LinearLayout
android:layout_width="wrap_content"
Grid Layout android:layout_height="wrap_content">
<GridLayout
Button, Image, Text, android:layout_width="wrap_content"
etc. android:layout_height="wrap_content">
<!-- view objects, like buttons, text, text edit,
image view, -->
</GridLayout>
</LinearLayout>
</RelativeLayout>

5/1/20 AAiT 15
 Android Mobile Programming ….. View
– Example, Linear Layout
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height=" wrap_content "
android:orientation="vertical" >
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="How are you doing ?"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:id="@+id/button1"
android:layout_width="152dp"
android:layout_height="wrap_content"
android:text="Press Here" />
</LinearLayout>
5/1/20 AAiT 16
 Android Mobile Programming ….. View
– For your practice, try to design the screen shot shown below.

Hint: RelativeLayout is best

5/1/20 AAiT 17
 Android Mobile Programming ….. View
– Table Layout
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height=" wrap_content ">
<TableRow >
<!-- view objects, like buttons, text, text edit,
image view, -->
</TableRow>
<TableRow >
<!-- view objects, like buttons, text, text edit,
image view, -->
</TableRow>
</ TableLayout >

Hint: use layout_span in the table leyout

5/1/20 AAiT 18
 Android Mobile Programming ….. Interactive UI

5 Interactive User Interface

– invoked action when the user clicks or taps on a clickable UI element,
– Called a click handler,
– It can be defined in two ways, in the XML editor or in the main activity using
java code (both have the same effect)
– Procedure:-
• Create the UI component, it can be Button, Image, etc.
• Assign ID for the UI, make the it Clickable, usually in XML ,
• Add a method in the main activity to react to the action of the interaction,

5/1/20 AAiT 19
 Android Mobile Programming ….. Interactive UI
• Simple Exercise (defining the UI interaction in XML)
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content”
android:gravity="center">
………. <Button
@Override android:id="@+id/displayText"
protected void onCreate(Bundle savedInstanceState) { android:layout_width="100dp"
super.onCreate(savedInstanceState); android:layout_height="wrap_content"
setContentView(R.layout.activity_main); android:text="Display"
} android:onClick="showToast"/>
public void showToast(View view) </RelativeLayout>
{
Toast.makeText(getApplicationContext(), "Display
Button is Clicked !", Toast.LENGTH_SHORT).show();
}
………..
5/1/20 AAiT 20
 Android Mobile Programming ….. Interactive UI
• Simple Exercise (defining the UI interaction in the main activity)
……….
public class MainActivity extends AppCompatActivity {
private int mCount = 0;
…….. private TextView chngVal;
<Button private Button incBtn;
android:id="@+id/increaseValue" ……….. protected void onCreate(Bundle savedInstanceState) {
android:layout_width="150dp" ……….
android:layout_height="wrap_content" incBtn = (Button) findViewById(R.id.increaseValue);
android:text="Increase by 1" /> chngVal = (TextView) findViewById(R.id.displayNumber);
<TextView incBtn.setOnClickListener(new View.OnClickListener() {
android:id="@+id/displayNumber" @Override
android:layout_width="wrap_content" public void onClick(View view) {
android:layout_height="wrap_content" mCount++;
android:layout_toRightOf="@id/increaseValue" chngVal.setText(String.valueOf(mCount));
android:textSize="30sp" } });
android:text="0"/> }
………..
5/1/20 AAiT
……….. 21
 Android Mobile Programming ….. Interactive UI
• For your exercise

5/1/20 AAiT 22
 Android Mobile Programming ….. Layout Editor

6 Text and Scrolling Views

• TextView – one of widely used component,
• TextView and Scrolling View classes are a subclass of the View class
• Text view - to display single/multiple lines of text
• Scrolling view –to scroll content if the size doesn't fit to the device
display,
• Scrolling view – can be applied on single components or even a group
of components in specific layout

5/1/20 AAiT 23
 Android Mobile Programming ….. Layout Editor
• TextView & Scrolling View – Explanations
<RelativeLayout TextView 1
android:layout_width="match_parent"
android:layout_height=" wrap_content "> TextView 2
<TextView >
TextView 3
android:id="@+id/article_heading”
………../> Scroll View
<TextView >
android:id="@+id/article_subheading”
………../>
<ScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content”>
<TextView >
android:id="@+id/article”
………../>
</ScrollView>
</ RelativeLayout >
5/1/20 AAiT 24
 Android Mobile Programming ….. Launcher Icon

7 Launcher Icon
• Each app you create with Android Studio starts with
a default launcher icon,
• Launcher icons are also called app icons or product
icons,
• You can change the default icon either with image,
clipart or text,
• Change also the foreground and background part of
icon
ClipArt
• Image- you need to design them with .png format,
clipart- are built in symbols to select,
5/1/20 AAiT 25
 Android Mobile Programming ….. Launcher Icon
• Select res folder from folder section,
the select new then image asset, the
configure image asset dialog will
appears,
• Once the image asset dialog is
opened change the different options
exist, like rename the icon, select
from image or from clipart, resize
the icon, change the background
color/image, etc.
• Once parameter set, you click next
and finalize the icon creation
5/1/20 AAiT 26
 Android Mobile Programming ….. Launcher Icon

• Change the Launcher Icon (exercise)

– Design your own .png image for your App,
– Make the size 512x512 pixel,
– Follow the procedure how to change launcher icon, and
– Display the final result

5/1/20 AAiT 27