Writing a Simple Appevcomp.dcc.ufmg.br/wp-content/uploads/Kotlin-FirstApp.pdf · Android Studio -...
Transcript of Writing a Simple Appevcomp.dcc.ufmg.br/wp-content/uploads/Kotlin-FirstApp.pdf · Android Studio -...
WritingaSimpleApp
Whatdoweneedtowriteanapp?
Whatdoweneedtowriteanapp?
- IntegratedDevelopmentEnvironment
- AndroidStudio
- Device- orEmulator
WhichIDEsexistforAndroid?
WhichIDEsexistforAndroid?
- What'swhatabove?
And,whataretheIDEsbelowthatsupportKotlin?
- Anyothers?
VisualStudio
UnrealEngine
AndroidStudio
CoronaLabs IntelliJIDEA
ApacheCordova
And,whataretheIDEsbelowthatsupportKotlin?
AndroidStudio
IntelliJIDEA
- TryKotlin
- Eclipse
- Vim
- SublimeTest
- Atom
- ...
AndroidStudio
- Google,JetBrains- Kotlin,Java,C++
- Freeware- Sourcecode
Google intros Android Studio, an IDE for building appshttps://www.engadget.com/2013/05/15/google-android-studio/ ZachHonig,05.15.13
Google releases Android Studio 1.0, the first stable version of its IDEhttps://venturebeat.com/2014/12/08/google-releases-android-studio-1-0-the-first-stable-version-of-its-ide/ EmilProtalinsk,08.12.14
StartingaProjectonAndroidStudio
StartingaProjectonAndroidStudio
RemembertoenableKotlinsupport!
StartingaProjectonAndroidStudio
WhichAPItochoose?
StartingaProjectonAndroidStudio
StartingaProjectonAndroidStudio
TheStructureofaProject
- Whatareeachofthesefilesandfolders?
TheActivityCode
- What'sanActivity?
- Explainthesyntax"Bundle?",e.g.,thequestionmark.
packagecom.example.fernando.helloworld
importandroid.support.v7.app.AppCompatActivityimportandroid.os.Bundle
classMainActivity:AppCompatActivity(){overridefunonCreate(savedInstanceState:Bundle?){super.onCreate(savedInstanceState)setContentView(R.layout.activity_main)}}
TheActivityCode
- What'stheoverridekeyworddoing?
- Whydon'twehavesemicolons?
packagecom.example.fernando.helloworld
importandroid.support.v7.app.AppCompatActivityimportandroid.os.Bundle
classMainActivity:AppCompatActivity(){overridefunonCreate(savedInstanceState:Bundle?){super.onCreate(savedInstanceState)setContentView(R.layout.activity_main)}}
RunningtheApp
EnablinganAndroidDevicetoRunourApp
1. Onyourdevice,openSettings>AboutphoneandtapBuildnumberseventimes.
EnablinganAndroidDevicetoRunourApp
1. Returntothepreviousscreen(Settings).Developeroptionsappearsatthebottomofthelist.TapDeveloperoptions.
2. EnableUSBDebugging.
RunningtheAppontheDevice
- Clickrun.
Selectthetargetdeviceyouwant
RunningtheAppontheEmulator
- EmulatorsimulatesanactualAndroiddevice
- Incomingcalls- Incomingtextmessages
- Geolocation- Simulatedifferentnetworkspeeds
- Hardwaresensors:- Rotationandbearing
- AccessGooglePlayStore
AndroidVirtualDevice(AVD)
- Hardwarecharacteristics- Softwarecharacteristics- Privatestorage
ThesameemulatorcanrundifferentAndroidVirtualDevices
LaunchingtheEmulator
- Viathecommandline
$cd/Users/pronesto/Library/Android/sdk/emulator$emulator-avdNexus_5X_API_28-netdelaynone-netspeedfull
- Viatheandroidstudio- Run→Runapp
LaunchingtheEmulator
- Viathecommandline
$cd/Users/pronesto/Library/Android/sdk/emulator$emulator-avdNexus_5X_API_28-netdelaynone-netspeedfull
- Viatheandroidstudio- Run→Runapp- Selectthevirtualdevice
LaunchingtheEmulator
- Viatheandroidstudio- Run→Runapp- Selectthevirtualdevice
Andbeaware:startingtheemulatormighttakeforever...
LeavetheEmulatorinStandBy
- Theemulator'sprocessisindependentfromAndroidStudio
- YoucanevenstartitwithoutAS
CreatinganewAndroidVirtualDevice
- Viathecommandline
$cd/Users/pronesto/Library/Android/sdk/tools/bin$avdmanagercreateavd-ntest-k"system-images;android-25;google_apis;x86"
CreatinganewAndroidVirtualDevice
- Viathecommandline
$cd/Users/pronesto/Library/Android/sdk/tools/bin$avdmanagercreateavd-ntest-k"system-images;android-25;google_apis;x86"
- Viatheandroidstudio- Tools→AVDManager
CreatinganewAndroidVirtualDevice
- Viathecommandline
$cd/Users/pronesto/Library/Android/sdk/tools/bin$avdmanagercreateavd-ntest-k"system-images;android-25;google_apis;x86"
- Viatheandroidstudio- Tools→AVDManager→+CreateVirtualDevice
CreatinganewAndroidVirtualDevice
- Viathecommandline
$cd/Users/pronesto/Library/Android/sdk/tools/bin$avdmanagercreateavd-ntest-k"system-images;android-25;google_apis;x86"
- Viatheandroidstudio- Tools→AVDManager→+CreateVirtualDevice
- Youmustselectanimagetodownload
CreatinganewAndroidVirtualDevice
Anotherthingthatcantakeforever...
DEPARTMENTOFCOMPUTERSCIENCEUNIVERSIDADEFEDERALDEMINASGERAIS
FEDERALUNIVERSITYOFMINASGERAIS,BRAZIL
EDITINGTHEACTIVITY
Whatgoesintoeachfolder?
- Let'sstarttakingalookintothelayoutfolder.Whatdoyouthinkwewillfindthere?
Thisviewhasfourparts.Whatarethey?
Canyoupicturethislayout?
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout 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" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity">
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Whatarethesetwoviews?
DesignEditororTextEditor?
- Bothviewshaveadvantagesanddisadvantages.Canyoulistthem?
Exercise:changethetextview
Whataretheresourcevalues?
- Whatarecolors,stringsandstyles?
- Howcanwecreatenewvalues?
Creatingnewstrings
<resources> <string name="app_name">HelloWorld</string> <string name="hello_Text">Hello World!</string> </resources>
activity_main.xml
strings.xml
Whataretheadvantagesofusingresources?
AddinganewComponenttotheView
HowtoDeterminethePositionoftheButton?
- Forinstance,relativetotheTextView?
HowtoDeterminethePositionoftheButton?
- Forinstance,relativetotheTextView?
<Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="8dp" android:text="Button" app:layout_constraintTop_toBottomOf="@+id/textView" tools:layout_editor_absoluteX="147dp" />
Playingwiththelayout
- Addasecondbuttontoyourview,andtrytopositionthemusingrelativeconstraitns,liketheblueprintontheright.
PlayingwithAttributes
- Trytochangetheattributesofbuttons.Addnewresourcestoyourcolorpalette.
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#3F51B5</color> <color name="colorPrimaryDark">#303F9F</color> <color name="colorAccent">#FF4081</color> <color name="buttonBackground">#BBDEFB</color> </resources>
PlayingwithAttributes
- Trytoarriveatthelayoutontheright§.
§:takenfromhttps://codelabs.developers.google.com/codelabs/build-your-first-android-app-kotlin/index.html#5
DEPARTMENTOFCOMPUTERSCIENCEUNIVERSIDADEFEDERALDEMINASGERAIS
FEDERALUNIVERSITYOFMINASGERAIS,BRAZIL
HANDLINGEVENTS
LinkingJavaandXML
- WhatisthecallsetContentView(...activity_main)doing?
packagecom.example.fernando.helloworld
importandroid.support.v7.app.AppCompatActivityimportandroid.os.Bundle
classMainActivity:AppCompatActivity(){overridefunonCreate(savedInstanceState:Bundle?){super.onCreate(savedInstanceState)setContentView(R.layout.activity_main)}}
Addingasimpleevent
- Wheneverweclickonthe"TOAST"button,weshalldisplaythe"HellowToast!"message.
- Howtoconnectbuttonandevent?
funtoastMe(view:View){valmyToast=Toast.makeText(this,"HelloToast!",Toast.LENGTH_SHORT)myToast.show()}
Linkingviewandevent
WecanedittheXMLlayoutdirectly
<Button android:id="@+id/toast_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="8dp" android:layout_marginLeft="24dp" android:layout_marginStart="8dp" android:layout_marginTop="8dp" android:background="@color/buttonBackground" android:onClick="toastMe" android:text="@string/str_toast" android:textSize="18sp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/textView" />
AddingtheEventHandlerProgramatically
classMainActivity:AppCompatActivity(){overridefunonCreate(savedInstanceState:Bundle?){super.onCreate(savedInstanceState)setContentView(R.layout.activity_main)valtoastButton=findViewById<Button>(R.id.toast)toastButton.setOnClickListener{toastMe()}}privatefuntoastMe(){valmyToast=Toast.makeText(this,"Hello!",Toast.LENGTH_SHORT)myToast.show()}}
Keepingtrackofstate
- Wewouldliketoadda"countMe"eventontotheapp.
- ItincrementsthetextwheneverwetouchCOUNT
- What'sthestateinthiscase?
- Howtokeeptrackofit?
Implementingthecounter
funcountMe(view:View){//GetthetextviewvalshowCountTextView=findViewById<TextView>(R.id.textView)//Getthevalueofthetextview.valcountString=showCountTextView.text.toString()//Convertvaluetoanumberandincrementitvarcount:Int=Integer.parseInt(countString)count++//Displaythenewvalueinthetextview.showCountTextView.text=count.toString();}
- Howtoconnectbuttonandevent?
Associatingbuttonwithevent
Creatinganewactivity
- Again:what'sanactivity?- WhytohavemultipleactivitiesinanAndroidapp?- CreateanewemptyactivitycalledSecondActivity.
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.fernando.helloworld"> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/AppTheme"> <activity android:name=".MainActivity"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <activity android:name=".SecondActivity"></activity> </application> </manifest>
TheManifestFile
- What'sthemeaningofthedifferententriesforactivities?
- What'sthedifferencebetweenMAINandLAUNCHER?
MAIN+LAUNCHER
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.fernando.helloworld"> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/AppTheme"> <activity android:name=".MainActivity"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <activity android:name=".SecondActivity"></activity> </application> </manifest>
TheCodeoftheSecondActivity
- Let'screatethelayoutforthisactivity.
packagecom.example.fernando.helloworld
importandroid.support.v7.app.AppCompatActivityimportandroid.os.Bundle
classSecondActivity:AppCompatActivity(){overridefunonCreate(savedInstanceState:Bundle?){super.onCreate(savedInstanceState)setContentView(R.layout.activity_second)}}
AddingoneTextViewtothelayout
TrytoaddthefollowingTextViewtotheLayout
- Howwouldyouinvokethesecondactivity?
InvokingtheSecondActivity
funrandomMe(view:View){//CreateanIntenttostartthesecondactivityvalrandomIntent=Intent(this,SecondActivity::class.java)//Startthenewactivity.startActivity(randomIntent)}
MainActivity.kt
- AndhowtoassociatethismethodwiththeRANDOMbutton?
Associatingtheobserverwiththehandler
Thusfar,that'sallthatwehave
- Howtogeneratearandomnumberbetween1andcount?
- WeneedtotellSecondActivitywhat'sthevalueofcount.
- Howtodoit?
GlobalVariables
classSecondActivity:AppCompatActivity(){//TOTAL_COUNTislikeastaticvariableinjavacompanionobject{constvalTOTAL_COUNT="total_count"}
overridefunonCreate(savedInstanceState:Bundle?){...}}
SecondActivity.kt
- WestillneedtotellSecondActivitywhat'sthevalueofcount.
- Howtousetheglobalvariabletodoit?
Senddatafromanactivitytoanother
funrandomMe(view:View){//CreateanIntenttostartthesecondactivityvalrandomIntent=Intent(this,SecondActivity::class.java)
//GetthetextviewvalshowCountTextView=findViewById<TextView>(R.id.textView)
//Getthevalueofthetextview.valcountString=showCountTextView.text.toString()
//Convertthecounttoanintvalcount=Integer.parseInt(countString)
//AddthecounttotheextrasfortheIntent.randomIntent.putExtra(SecondActivity.TOTAL_COUNT,count)
//Startthenewactivity.startActivity(randomIntent)}
MainActivity.kt
Gettinginfofromanotheractivity
- Now,SecondActivityneedstogettheinformationpassedbyMainActivity,anduseitasthelimittotherandomnumberthatitwilldisplay.- Howtodoit?
Displayingtherandomnumber
classSecondActivity:AppCompatActivity(){companionobject{constvalTOTAL_COUNT="total_count"}
overridefunonCreate(savedInstanceState:Bundle?){super.onCreate(savedInstanceState)setContentView(R.layout.activity_second)showRandomNumber()}
funshowRandomNumber(){...}}
SecondActivity.kt
- WeneedtoimplementshowRandomNumber...
Displayingtherandomnumber
funshowRandomNumber(){//Getthecountfromtheintentextrasvalcount=intent.getIntExtra(TOTAL_COUNT,0)
//Generatetherandomnumbervalrandom=Random()varrandomInt=0
if(count>0){//AddonebecausetheboundisexclusiverandomInt=random.nextInt(count+1)}
//Displaytherandomnumber.findViewById<TextView>(R.id.textview_random).text=Integer.toString(randomInt)
//Substitutethemaxvalueintothestringresource//fortheheading,andupdatetheheadingfindViewById<TextView>(R.id.textview_label).text=getString(R.string.random_heading,count)}
SecondActivity.kt
Whatarethesetwoparameters?
Buildingstrings
<resources>...<stringname="random_heading">Hereisarandomnumberbetween0and%1d.</string></resources>
strings.xml