11
1 1 CPET 565 Mobile Computing Systems CPET/ITC 499 Mobile Computing Tutorial 2 Tap Button Counter App Reference Android Programming Concepts, by Trish Cornez and Richard Cornez, pubslihed by Jones & Barlett Learning, pp. 68-81. Android Developer API Guides, http://developer.android.com/guide/index.html Paul I-Hai Lin, Professor Spring 2017 A Specialty Course Purdue University M.S. Technology Graduate Program Dept. of Computer, Electrical and Information Technology Purdue University Fort Wayne Campus Prof. Paul Lin 2 Tap Button Counter App Objectives 1. Add an orientation to the Manifest file 2. Construct a new user interface file 3. Use the “onClick” property for a button in the layout file 4. Employ the Model-View-Controller architecture Counter.java - Java source file will serve as the Model blue print of the application A Counter object will present the data related to the count of taps on the application View object – in main_layout.xml file as visual display object MainActivity.java – the Controller acting as the conduit between the Counter object and the visual display objects of the user interface Prof. Paul Lin

CPET 565 Mobile Computing Systems CPET/ITC 499 …lin/CPET565/2017S/2-Lectures/CPET565-499-Lab… · 1 1 CPET 565 Mobile Computing Systems CPET/ITC 499 Mobile Computing Tutorial 2

Embed Size (px)

Citation preview

1

1

CPET 565 Mobile Computing SystemsCPET/ITC 499 Mobile Computing

Tutorial 2

Tap Button Counter AppReference

Android Programming Concepts, by Trish Cornez and Richard Cornez, pubslihed by Jones & Barlett Learning, pp. 68-81.

Android Developer API Guides, http://developer.android.com/guide/index.html

Paul I-Hai Lin, ProfessorSpring 2017

A Specialty Course Purdue University M.S. Technology Graduate Program

Dept. of Computer, Electrical and Information Technology

Purdue University Fort Wayne CampusProf. Paul Lin

2

Tap Button Counter App

Objectives1. Add an orientation to the Manifest file2. Construct a new user interface file3. Use the “onClick” property for a button in the layout

file4. Employ the Model-View-Controller architecture

Counter.java - Java source file will serve as the Model blue print of the application

A Counter object will present the data related to the count of taps on the application

View object – in main_layout.xml file as visual display object

MainActivity.java – the Controller acting as the conduit between the Counter object and the visual display objects of the user interface

Prof. Paul Lin

2

3

Model-View-Controller Architecture

Prof. Paul Lin

4

Model-View-Controller Architecture

Prof. Paul Lin

3

5

Model-View-Controller Architecture

Prof. Paul Lin

6

Tap Button Counter App

Procedure – Creating the Android Project1) Launch Android Studio2) Start a new Android Studio Project 3) Configure the project with the following settings* Application Name: Tap Button Counter* Company Domain:* Package Name:* Form: Phone Tablet* Minimum SDK:* Empty Activity* File Name options:** Activity Name: MainActivity** Layout Name: activity_main

Prof. Paul Lin

4

7

AndroidManifest.xml<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="com.cornez.tapbuttoncounter" ><application

android:allowBackup="true"

android:icon="@mipmap/ic_launcher"android:label=""Tap Button Counter"android:theme="@style/AppTheme" >

<activityandroid:screenOrientation="landscape"

android:name=".MainActivity"android:label="@string/app_name" ><intent-filter><action android:name="android.intent.action.MAIN" /><category android:name="android.intent.category.LAUNCHER" />

</intent-filter></activity>

</application></manifest>

Prof. Paul Lin

8

app/res/values/string.xml

<resources>

<string name="app_name">Tap Button Counter</string>

<string name="hello_world">Hello world!</string>

<string name="action_settings">Settings</string>

<string name="tap_btn">TAP</string>

<string name="zero">0</string>

</resources>

Prof. Paul Lin

5

9

Create a new main_layout.xml Res/layout, right click => New > XML => Layout.xml

Prof. Paul Lin

10

Create a new main_layout.xml Res/layout, right click => New > XML => Layout.xml

Prof. Paul Lin

6

11

Create a new main_layout.xml Res/layout, right click => New > XML => Layout.xml

Prof. Paul Lin

12

Create a new main_layout.xml RelativeLayout

• TextView• button

Prof. Paul Lin

7

13

Create a new main_layout.xml Res/layout, right click => New > XML => Layout.xml<?xml version="1.0" encoding="utf-8"?>

<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent" android:layout_height="match_parent">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textAppearance="?android:attr/textAppearanceLarge"

android:text="@string/zero"

android:id="@+id/textView"

android:layout_alignParentTop="true"

android:layout_centerHorizontal="true"

android:textSize="60sp" />

Prof. Paul Lin

14

Create a new main_layout.xml Res/layout, right click => New > XML => Layout.xml

<Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="@string/tap_btn"android:id="@+id/button"android:layout_centerVertical="true"android:layout_centerHorizontal="true"android:textSize="60sp"android:onClick="countTap" />

</RelativeLayout>

Prof. Paul Lin

8

15

Create a new menu_main.xml Res/ right click => New > Directory => menu_main.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools" tools:context=".MainActivity">

<item android:id="@+id/action_settings" android:title="@string/action_settings"

android:orderInCategory="100" app:showAsAction="never" />

</menu>

Prof. Paul Lin

16

Counter.java Class

package com.lin.tapbuttoncounter;class Counter {

private int mCount;

public Counter(){ mCount = 0;

} public void addCount(){

mCount++; } public Integer getCount() { return mCount; }

}

Prof. Paul Lin

9

17

MainActivity.java package com.lin.tapbuttoncounter;

//import android.support.v7.app.AppCpmatActivity;

import android.app.Activity;

import android.os.Bundle;

import android.view.Menu;

import android.view.MenuItem;

import android.view.View;

import android.widget.TextView;

public class MainActivity extends Activity {

//MODEL

private Counter count;

//VIEW

private TextView display;Prof. Paul Lin

18

MainActivity.java @Override

protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main_layout);

count = new Counter();display = (TextView) findViewById(R.id.textView);

}public void countTap(View view){

count.addCount();display.setText(count.getCount().toString());

}

Prof. Paul Lin

10

19

MainActivity.java @Override

public boolean onCreateOptionsMenu(Menu menu) {// Inflate the menu;// this adds items to the action bar if it is present.getMenuInflater().inflate(R.menu.menu_main,

menu);return true;

}

Prof. Paul Lin

20

MainActivity.java @Overridepublic boolean onOptionsItemSelected(MenuItem item) {

// Handle action bar item clicks here. The action bar will

// automatically handle clicks on the Home/Up button, so long// as you specify a parent activity in AndroidManifest.xml.

int id = item.getItemId();

//noinspection SimplifiableIfStatement

if (id == R.id.action_settings) {return true;

}return super.onOptionsItemSelected(item);

}}

Prof. Paul Lin

11

Summary

Q/A?

Prof. Paul Lin 21