19
Ref. CN5E, NT@UW, WUSTL CS5530 CS5530 Mobile/Wireless Systems Android UI Yanyan Zhuang Department of Computer Science http://www.cs.uccs.edu/~yzhuang UC. Colorado Springs

CS5530 Mobile/Wireless Systems Android UI · 2017-03-09 · Running Android Code CS5530 6 Ref. CN5E, NT@UW, WUSTL •Run code on simulator •Run code on a real device o No license

  • Upload
    others

  • View
    2

  • Download
    0

Embed Size (px)

Citation preview

Page 1: CS5530 Mobile/Wireless Systems Android UI · 2017-03-09 · Running Android Code CS5530 6 Ref. CN5E, NT@UW, WUSTL •Run code on simulator •Run code on a real device o No license

Ref.CN5E,NT@UW,WUSTLCS5530

CS5530Mobile/WirelessSystems

AndroidUI

YanyanZhuangDepartmentofComputerSciencehttp://www.cs.uccs.edu/~yzhuang

UC.ColoradoSprings

Page 2: CS5530 Mobile/Wireless Systems Android UI · 2017-03-09 · Running Android Code CS5530 6 Ref. CN5E, NT@UW, WUSTL •Run code on simulator •Run code on a real device o No license

catannounce.txt_

Ref.CN5E,NT@UW,WUSTL2CS5530

• Assignment2willbepostedsoono Dueaftermidterm

• IwillbeawaynextMondayo Dr.Chow’sguestlecture

• Midtermdateo March20

Page 3: CS5530 Mobile/Wireless Systems Android UI · 2017-03-09 · Running Android Code CS5530 6 Ref. CN5E, NT@UW, WUSTL •Run code on simulator •Run code on a real device o No license

Android…

Ref.CN5E,NT@UW,WUSTL3CS5530

• Androido A mobileoperatingsystem developedby Googleo Basedon Linuxkernel anddesignedprimarilyfor smartphones and tablets

• IDEo Androidstudiohttps://developer.android.com/studio/index.html

• AndroidAPIo Javaastheprogramminglanguage

Page 4: CS5530 Mobile/Wireless Systems Android UI · 2017-03-09 · Running Android Code CS5530 6 Ref. CN5E, NT@UW, WUSTL •Run code on simulator •Run code on a real device o No license

Android…

Ref.CN5E,NT@UW,WUSTL4CS5530

• AfastevolvingOS:Dashboards} https://developer.android.com/about/dashboards/index.html

Page 5: CS5530 Mobile/Wireless Systems Android UI · 2017-03-09 · Running Android Code CS5530 6 Ref. CN5E, NT@UW, WUSTL •Run code on simulator •Run code on a real device o No license

Android…

Ref.CN5E,NT@UW,WUSTL5CS5530

• SpecifyMinimumandTargetAPILevelso AndroidManifest.xml

<manifestxmlns:android="http://schemas.android.com/apk/res/android"...><uses-sdk android:minSdkVersion="4"android:targetSdkVersion="15"/>...

</manifest>

• CheckSystemVersionatRuntimeif(Build.VERSION.SDK_INT >=Build.VERSION_CODES.HONEYCOMB){

…...

}

Page 6: CS5530 Mobile/Wireless Systems Android UI · 2017-03-09 · Running Android Code CS5530 6 Ref. CN5E, NT@UW, WUSTL •Run code on simulator •Run code on a real device o No license

RunningAndroidCode

Ref.CN5E,NT@UW,WUSTL6CS5530

• Runcodeonsimulator

• Runcodeonarealdeviceo Nolicenseneeded

o OnAndroid4.2andnewer, Developeroptions ishiddenbydefault

o NeedtoenabledeveloperoptionandUSBdebugging(Galaxyexample):thisisallyouneedtodo} GotoSettings>More>AboutDevice,scrolldowntoBuildNumber

} Tapitrepeatedly(7times)

} SeetheDeveloperoptionsmenuunderSettings>checkUSBdebugging

Page 7: CS5530 Mobile/Wireless Systems Android UI · 2017-03-09 · Running Android Code CS5530 6 Ref. CN5E, NT@UW, WUSTL •Run code on simulator •Run code on a real device o No license

Android DebugBridge(ADB)

Ref.CN5E,NT@UW,WUSTL7CS5530

• AndroidDebugBridge(adb)o Command-linetooltoyoucommunicatewithadeviceo Installing/debuggingapps,andaUnixshell

• Aclient-serverprogramwiththreecomponentso Aclient runsondevelopmentmachine

} Invokeaclientbyissuing`adb`

o Adaemon (adbd)runscommandsonadevice} Runsasabackgroundprocessondevice

o Aservermanagescommunicationbetweenclientanddaemon} Runsasabackgroundprocessondevelopmentmachine

Page 8: CS5530 Mobile/Wireless Systems Android UI · 2017-03-09 · Running Android Code CS5530 6 Ref. CN5E, NT@UW, WUSTL •Run code on simulator •Run code on a real device o No license

Android DebugBridge(ADB)

Ref.CN5E,NT@UW,WUSTL8CS5530

• Toinstalladb (MacOSexample)o Installhomebrew

} ruby-e"$(curl-fsSLhttps://raw.githubusercontent.com/Homebrew/install/master/install)"

o Installadb} brewinstallandroid-platform-tools

o Startadb} $adb devices

Listofdevicesattached

07f105740c8cad3fdevice

} $adb shell

Page 9: CS5530 Mobile/Wireless Systems Android UI · 2017-03-09 · Running Android Code CS5530 6 Ref. CN5E, NT@UW, WUSTL •Run code on simulator •Run code on a real device o No license

AndroidAppStructure

Ref.CN5E,NT@UW,WUSTL9CS5530

• Projectfileso Bydefault,AndroidStudiodisplaysfilesinAndroid view

o manifests} AndroidManifest.xml file

o java} Javasourcecode,separatedbypackagenames

o res} Allnon-coderesources

¨ XMLlayouts,UIstrings,images

Page 10: CS5530 Mobile/Wireless Systems Android UI · 2017-03-09 · Running Android Code CS5530 6 Ref. CN5E, NT@UW, WUSTL •Run code on simulator •Run code on a real device o No license

AndroidAppStructure

Ref.CN5E,NT@UW,WUSTL10CS5530

• Projectfileso Projectview

} Actualfilestructureoftheproject¨ IncludingallfileshiddenfromAndroidview

o Looksfairlycomplexnow

Page 11: CS5530 Mobile/Wireless Systems Android UI · 2017-03-09 · Running Android Code CS5530 6 Ref. CN5E, NT@UW, WUSTL •Run code on simulator •Run code on a real device o No license

CreateanAndroidProject

Ref.CN5E,NT@UW,WUSTL11CS5530

• StartanewAndroidStudioproject,orFileà NewProjecto ApplicationName:"MyFirstApp"o CompanyDomain:"example.com"

• TargetAndroidDevices:keepthedefaultvalueso Wewillgetbacktothislater

• AddanActivitytoMobile:select EmptyActivity• CustomizetheActivity:keepdefaultvaluesà Finisho TakesalongtimetoFinish…

Page 12: CS5530 Mobile/Wireless Systems Android UI · 2017-03-09 · Running Android Code CS5530 6 Ref. CN5E, NT@UW, WUSTL •Run code on simulator •Run code on a real device o No license

CreateanAndroidProject

Ref.CN5E,NT@UW,WUSTL12CS5530

• InAndroidviewo app>java>com.example.myfirstapp >MainActivity.java

} Mainactivity(entrypointforyourapp)} Whenbuildandrunanapp,systemlaunchesaninstanceofthis Activityandloads

itslayout

o app>res>layout>activity_main.xml} Definesthelayoutfortheactivity'sUI

o app>manifests>AndroidManifest.xml} Describesthecharacteristicsoftheappanddefineseachofitscomponents

o Gradle Scripts>build.gradle} 2 fileswiththisname:onefortheprojectandoneforthe"app"module} Mostlyworkwithmodule's build.gradle filetoconfigurehowtheGradle tools

compileandbuildyourapp

Page 13: CS5530 Mobile/Wireless Systems Android UI · 2017-03-09 · Running Android Code CS5530 6 Ref. CN5E, NT@UW, WUSTL •Run code on simulator •Run code on a real device o No license

Running theApp

Ref.CN5E,NT@UW,WUSTL13CS5530

• Onarealdeviceo WindowsmayneedUSBdriverforthedevice

} https://developer.android.com/studio/run/oem-usb.html

o EnableUSBdebugging(earlier)

• Onasimulatoro Createan AndroidVirtualDevice (AVD)definition

} Tools>Android>AVDManager

} CreateVirtualDevice>SelectHardware

} SystemImage > Download (oneoftherecommendedsystemimages)¨ Takesalongtimeagain

Page 14: CS5530 Mobile/Wireless Systems Android UI · 2017-03-09 · Running Android Code CS5530 6 Ref. CN5E, NT@UW, WUSTL •Run code on simulator •Run code on a real device o No license

BuildingSimpleUserInterface

Ref.CN5E,NT@UW,WUSTL14CS5530

• UIisbuiltw/ahierarchyoflayouts(ViewGroup objects)&widgets(Viewobjects)o Layoutsareinvisiblecontainersthatcontrolhowitschildviewsarepositioned

o WidgetsareUIcomponentslikebuttonsandtextboxes

Page 15: CS5530 Mobile/Wireless Systems Android UI · 2017-03-09 · Running Android Code CS5530 6 Ref. CN5E, NT@UW, WUSTL •Run code on simulator •Run code on a real device o No license

BuildingSimpleUserInterface

Ref.CN5E,NT@UW,WUSTL15CS5530

• BuildingUIo XML

o LayoutEditor

Page 16: CS5530 Mobile/Wireless Systems Android UI · 2017-03-09 · Running Android Code CS5530 6 Ref. CN5E, NT@UW, WUSTL •Run code on simulator •Run code on a real device o No license

BuildingSimpleUserInterface

Ref.CN5E,NT@UW,WUSTL16CS5530

• ComponentTree windowo Showsthelayout'shierarchyofviews

• ConstraintLayouto A layoutthatdefinesthepositionforeachviewbasedonconstraintstosiblingviewsandtheparentlayout

Page 17: CS5530 Mobile/Wireless Systems Android UI · 2017-03-09 · Running Android Code CS5530 6 Ref. CN5E, NT@UW, WUSTL •Run code on simulator •Run code on a real device o No license

BuildingSimpleUserInterface

Ref.CN5E,NT@UW,WUSTL17CS5530

• ChangeUIstringso res>values>strings.xml

Page 18: CS5530 Mobile/Wireless Systems Android UI · 2017-03-09 · Running Android Code CS5530 6 Ref. CN5E, NT@UW, WUSTL •Run code on simulator •Run code on a real device o No license

StartActivity

Ref.CN5E,NT@UW,WUSTL18CS5530

• Addamethodin MainActivity.java that'scalledbythebuttono Intent

} Anobjectthatprovidesruntimebindingbetweenseparatecomponents,suchastwoactivities

} The Intent representsanapp’s"intenttodosomething"

o putExtra()} An Intent cancarrydatatypesaskey-valuepairscalled extras

o startActivity()

Page 19: CS5530 Mobile/Wireless Systems Android UI · 2017-03-09 · Running Android Code CS5530 6 Ref. CN5E, NT@UW, WUSTL •Run code on simulator •Run code on a real device o No license

AddupNavigation

Ref.CN5E,NT@UW,WUSTL19CS5530

• Navigationreturntothelogicalparentscreeninapphierarchyo DeclarewhichactivityisthelogicalparentinAndroidManifest.xml

<activityandroid:name=".DisplayMessageActivity"android:parentActivityName=".MainActivity">

<!-- Themeta-datatagisrequiredifyousupportAPIlevel15andlower--><meta-dataandroid:name="android.support.PARENT_ACTIVITY"android:value=".MainActivity"/>

</activity>