CCCS 325 Mobile Development

Slide 2: Basic application development

Tzu-Yang (Ben) Yu

1
 Announcement
• Assignment 1 is out.

• You can find it from mycourse Assessment Assignments

2
 Today's Content

• Write your first Android application

– Create Button
– Add listener
– Use String resource
– Create spinner

3
 Create an Android project

Please uncheck C++ and

Kotlin support
1. Start a new project
Option 1: Open Android Studio
and choose “Start a new Android
Studio project.

Option 2: Click File (top-left)

New New Project

4
MainActivity and Main Layout

5
MainActivity and Main Layout (explain)

package name

import libraries

The MainActivity extends the Android class activity

onCreate() is the first

method call when the
activity is first created

Specify which layout to use

6
 What is extends? (Inheritance)
Inheritance is a mechanism where a class (subclass) acquires the properties (e.g. methods and fields) of another class
(super class).
If your method overrides one of its superclass's methods, you can invoke the overridden method through the use of the
keyword super. Consider this class, Superclass:

Within Subclass, the simple name printMethod() refers to

Here is a subclass, called Subclass, that overrides
the one declared in Subclass, which overrides the one in
printMethod():
Superclass. So, to refer to printMethod() inherited from
Superclass, Subclass must use a qualified name, using
super as shown. Compiling and executing Subclass prints
the following:
Printed in superclass.
Printed in subclass.

7
The Main Layout

8
The Main Layout

This view gives you This is the blueprint

an idea of how your view which focus
layout will look on an more on the layouts
actual device structure

9
The Main Layout

URL that explains the used namespace

Make the layout the same width and

height as the screen size on the device.

Text view ID

Make the GUI component just large

enough for its content

Button ID

Display the string

These are the settings for the
constraintLayout
10
 Constrained Layout
• Constrained layout was introduced in 2016 and became a default layout in Android
Studio start from year 2017.
• This layout aims for supporting the drag-and-dropping technique for building layout
instead of editing the XML.
• For more information about his layout, please check from the following websites:
– https://developer.android.com/training/constraint-layout/
– https://c1ctech.com/android-creating-complex-layouts-using-constraintlayout/

11
 Add a Button Using the Design Editor
Find the Button component in the palette, click on it, and then drag it into the
design editor so that it’s positioned above the text view. The button appears in
the layout’s design:

12
 Layout Editor showing a layout file in Design mode
1. Palette - Displays the widgets and
layouts that may be dragged into the
Design Editor.
2. Component Tree - Displays the view
hierarchy for the layout.
3. Toolbar - Buttons to configure the
layout's appearance in the Design
Editor.
4. Design Editor - Displays the layout in
Design view (how the layout appears
on a device) and Blueprint view
(outlines of each View).
5. Attributes - For editing the attributes
of the currently selected widget or
layout.

13
 Question

Question?
Before we move to the next topic..

14
 Linking Element and Adding Listener
We can add button click event listener in two ways:
Option 1: Add OnClickListener()

15
 Linking Element and Adding Listener
Option 2: Create a click method and linked with ‘android:onClick’

16
 R.java
• R.java is a special Java file that gets generated by Android Studio whenever
you create a view object with an ID “@+id/labels”.

• The R file is used to keep track of the resources used within the app and it
enables you to retrieve references to resources in your app.

• You can find it from app/generatedJava/.. in your project.

• Note: You never change any of the code within the R file

17
 Use String Resource
• To organize your text display, we can use the String resource.
• You can find the String.xml under res\values.

18
 Spinner

Create spinner from palette..

Infer constraints

19
 Add Items to Spinner
Option 1: using ‘setAdapter()’

20
 Add Items to Spinner
Option 2: Create a click method and linked with ‘android:onClick’

21
 Question

Question?
Before we move to the next topic..

22
Model View Controller-Exercise

23
 Any Questions?

Q Any Questions?

24