Door Wouter op wo 31 aug 2011 | 129 reacties |

Tweet

Share

Dit is het eerste artikel in een reeks van 10 artikelen welke stapsgewijs diep in gaan op het ontwikkelen van Android applicaties.

Deze eerste zogenaamde ‘DevTutorial’ is voornamelijk een uitleg over welke programma’s nodig zijn om Android apps te kunnen programmeren en hoe je deze kan installeren. Aan het einde van deze DevTutorial wordt de standaard app van Android een klein beetje aangepast om zo je eerste app te vormen. DevTutorial 2 en de DevTutorials die daar op volgen gaan over het ‘echte’ programmeren. Je leert daar onder andere hoe je knoppen gebruikt, schermen maakt, fouten kan opsporen in je code en gegevens kan downloaden van het internet om deze te gebruiken in een lijst-scherm.

Misschien had je verwacht aan het einde van deze DevTutorial al een aardig functionerende app te kunnen maken. Dat dit niet het geval is heeft te maken met het doel dat ik met deze DevTutorials heb: Toen ik op mijn 13e begon met Java en mijn eerste game maakte (een platformer) was het voor mij erg veel zoekwerk om allerlei verschillende benodigde tutorials bij elkaar te zoeken en ze in het Engels te begrijpen. Ik dacht er niet echt aan om boeken te kopen, daar had ik immers het geld niet voor over. Dingen die ik probeerde werkte bij de eerste poging vaak niet en ik was vervolgens lang aan het debuggen (fouten opsporen) en op het internet aan het zoeken om mijn code werkend te krijgen. Verder gingen veel tutorials ervan uitdat de lezer al programmeer ervaring had wat een soort drempel opwierp.

Ik vond dat uitzoeken leuk om te doen en heb daarvan veel geleerd, al kon dit veel sneller: Ik schrijf deze DevTutorials zoals ik hem graag was tegengekomen wanneer ik net zou zijn begonnen met programmeren. Dit heb ik steeds in mijn achterhoofd gehouden toen ik de DevTutorials aan het schrijven was. Dit heeft er voor gezorgd dat ik af en toe na heb nagedacht over wat voor beginnersfouten er gemaakt kunnen worden en de lezer (jij dus:)) hier over waarschuw of hem vraag iets desnoods meerdere keren te lezen. Soms lees je namelijk vrij gemakkelijk over belangrijke zinnen heen en kan je de rest van de tekst dan minder goed begrijpen. Verder heb ik, als ik dacht dat er een ingewikkeld onderwerp wordt behandeld voor de beginner, de tijd genomen om dit uit te leggen, vaak op meerdere manieren (want anders is nog steeds veel voor je onduidelijk). Ook gebruik ik hierdoor een schrijftaal die op meer ervaren programmeurs (van andere talen/frameworks) een beetje betuttelend kan overkomen. Wanneer ik nieuwe concepten uitgelegd moeten worden heb ik het vaak expres simpel gehouden waardoor ik niet alle kanten ervan belicht (bijvoorbeeld in DevTutorial 2: een method is een verzameling van instructies met een naam, in plaats van een routine relatief ten opzichte van de parameters en de staat van een object die wordt bijgehouden in zijn properties…etcetera). Hopelijk storen jullie je hier niet teveel aan, en vanaf ongeveer DevTutorial 4 is dit steeds minder aanwezig.

Let op: Door deze DevTutorials hoop ik dat je snel en nuttig leert in Android te programmeren. Wat je verwachtingen betreft: verkijk je er niet op, ook mét deze DevTutorials staat er je na deze DevTutorials (en soms tijdens) nog veel uitzoek werk voor je klaar waar je geduld voor nodig hebt en je zeker niet moet onderschatten. Laat dit je er niet van weerhouden hier met plezier mee bezig te gaan:) Als je ergens tegen aanloopt kan je voor deze DevTutorial op deze plek in het forum terecht: http://www.androidworld.nl/forum/android-development/22936-devtutorial-1-helpthread-ontwikkelen-voor-android-benodigde-tools.html.

Ik hoop dat doordat ik het op deze manier aanpak je aan het einde een aardige basis hebt om apps te maken die een klein stapje verder zijn dan de basic apps. Door iets geavanceerdere apps te behandelen in de laatste DevTutorials hoop ik dat wanneer je deze allemaal hebt doorgewerkt je aardig je weg kan vinden in Android Development. Er staan namelijk nog zeeën aan Android Programmeerwerk klaar voor ons developers:).

Over Wouter Vegter

Wouter is mede-eigenaar van Moop.Me, een ontwikkelbureau voor Android-, iPhone- en mobile web-apps. Hij is met Android-ontwikkeling bezig vanaf 2009 en heeft inmiddels veel ervaring op het gebied van consumentenapps en enterprise-apps. Zijn passie voor Android komt voort uit het feit dat er nog erg veel staat te gebeuren als gevolg van de mobile-apps trend en praat hier graag over met andere mensen. Een belangrijk element hierin is de verandering die consumenten én bedrijven (moeten) maken als gevolg van de nieuwe mogelijkheden die deze technologie biedt. Wouter geeft regelmatig workshops en presentaties over dit onderwerp.

Wat gaan we doen

Oke, we kunnen nu beginnen. In deze DevTutorial leer je de volgende dingen:

• Welke tools (kleine programmaatjes) je nodig hebt voor ontwikkelen in Android en in grote lijnen wat ze doen.
• Hoe je de tools installeert op Windows, Ubuntu en MacOS. Voor Windows zijn de stappen uitgebreid beschreven, deze kan je als extra richtlijn gebruiken wanneer je de installatie uitvoert in Ubuntu of MacOS (daar zijn de stappen minder uitgebreid beschreven).
• Uit welke soorten bestanden een app is opgebouwd
• Hoe je deze bestanden overzichtelijk kan beheren in Eclipse
• Welke verschillende vensters er in Eclipse aanwezig zijn en wat ze doen
• Hoe je een emulator in Eclipse aanmaakt en wat die doet.
• Hoe je je eerste app maakt en opstart in je emulator.
• Waar je terecht kan voor vragen en een kleine vooruitblik naar de volgende DevTutorial

Wat heb je nodig

De benodige software wordt in dit deel kort beschreven. Daarna wordt per besturingssysteem (Windows, Ubuntu en Max OS X) stap voor stap beschreven hoe je deze moet installeren (naar welke links je moet gaan, waar je moet klikken, etcetera). Let erop dat je eerst de JDK installeert, daarna pas Eclipse, daarna pas de Android SDK en daarna pas de ADT.

Om in Android te kunnen programmeren heb je de volgende software nodig:

JDK 5 of 6: Java Development Kit versie 5 of 6. Bevat bestanden en kleine programmaatjes (tools) die je nodig hebt om Java-code te schrijven, te verwerken en uit te voeren. Dit zijn onder andere programma’s om java-broncode (platte tekst zonder opmaak, denk bijvoorbeeld aan tekst zoals je die invoert in kladblok of notepad) om te zetten naar Java-bytecode (enen en nullen) en deze beide soorten bestanden te bewerken. Dit is meer omvattend dan de JRE, wat staat voor Java Runtime Environment: dit is de software die je nodig hebt om enkel Java-programma’s uit te kunnen voeren. JRE wordt geleverd bij de JDK. Het installeren van alleen de JRE is niet voldoende.

Eclipse IDE: Eclipse Integrated Development Environment. Dit is het programma dat je gebruikt om de verschillende bestanden die horen bij een Java-programma te organiseren en aan te passen.

Android SDK: Android Software Development Kit. Je kan Android het beste zien als een op zichzelf staande variant van Java (overigens kan je erg veel bestaande Java-code gebruiken in je Android-apps, de technische details hiervoor bewaren we voor een andere tutorial). Om voor Android te programmeren heb je een pakket van bestanden nodig die het scherm, de processor, geluid en andere hardware van een Androidapparaat (bijvoorbeeld smartphone of tablet) aan kunnen sturen via Java. De manier hoe die bepaalde bestanden aangesproken worden – via hoofdzakelijk Java-broncode en XML die de programmeur intypt – wordt programmeren voor Android genoemd. Deze Androidspecifieke bestanden zitten in de de Android SDK. Verder bevat de Android SDK tools die je het programmeren voor Android vergemakkelijken zoals een emulator en ADB (Android Debug Bridge): een tool die je computer met een Androidapparaat verbindt tijdens onder andere  het testen van apps.

ADT: Android Development Tools. Een plugin voor Eclipse die de bestanden en tools van de Android SDK verwerkt in de schermen, knoppen en menu’s in Eclipse.

De handleiding is geschreven om stap voor stap gevolgd te worden. Voordat je een opdracht uitvoert, wil ik van je vragen de opdracht die erna komt al even door te lezen. Anders start je onbedoeld schermen of programma’s op en daarmee pas je instellingen aan die niet passen in deze handleiding. Het is niet de bedoeling dat als je bijvoorbeeld een zip-bestand uitpakt je  al vanuit jezelf het programma opstart wat er net is uitgepakt. Ik weet dat dit misschien een beetje betuttelend overkomt, maar met het installeren van deze programma’s is het belangrijk dat je alle instellingen precies op elkaar afstemt: dat gaat het beste als je de stappen die hieronder precies volgt en bij elke opdracht al een opdracht “vooruit” leest. Verder kom je in deze (en de volgende) DevTutorial(s) een aantal mini-screenshots tegen. Als je hier op klikt, kun je meer uitleg over het desbetreffende onderwerp lezen.

In de stappen hieronder moet je een map kiezen waarin je Eclipse en de Android SDK gaat installeren. Er zit een fout in de Android SDK die ervoor zorgt dat je de SDK niet mag uitpakken/installeren in een map met spaties, of waarvan de namen van de hoger gelegen mappen een spatie bevatten. Stel dat je bijvoorbeeld de Android SDK naar de volgende map uitpakt: C:\Android programmeren\android-sdk-windows\ dan krijg je een fout omdat de naam van de map “Android programmeren” een spatie bevat. Zorg er dus voor dat er geen spaties in een van de mapnamen zit.

Installatie in Windows

Deze handleiding voor Windows gaat uit van Windows 7, maar werkt in de meeste gevallen ook voor Windows Vista en Windows XP.

Installatie JDK

• Ga naar http://www.oracle.com/technetwork/java/javase/downloads/index.html.
• Nu moet je JDK versie 6 downloaden (versie 7 is niet geschikt voor Android). Klik op de knop “Download” onder JDK (dus niet JRE). Klik eventueel op deze knop voor meer uitleg en kijk naar het rode rechthoek :  (er staat een kruis door Java versie 7, deze dus niet downloaden;))
• Accepteer de voorwaarden van Java/Oracle (dat staat boven het lijstje van de bestanden die je kan downloaden: ‘Accept Licence Agreement’).
• Ga naar de regel die begint met ‘Windows x86′. (als je de 64 bits versie van windows gebruikt, ga dan naar de regel die begint met ‘Windows x64′, weet je niet welke je gebruikt, kies dan gewoon Windows x86). Zie eventueel het rode vierkant in deze screenshot: .
• Klik daarachter op op de link die begint met “jdk-6u…”
• Wanneer het downloaden voltooid is, start je de installatie van de JDK door het bestand uit te voeren (dubbelklik erop).
• Volg de installatie-wizard.

Installatie Eclipse

• Ga naar http://www.eclipse.org/downloads/.
• Op de pagina zie je verschillende regels staan met elk hun eigen versie van Eclipse. Ga naar de regel die begint met Eclipse Classic 3.7  en klik achter Windows op “32-Bit”. Gebruik je een 64 bits versie van Windows, klik dan op “64-Bit”. Weet je niet welke versie je gebruikt, klik dan op “32-Bit”.
• Klik op downloadlink op de pagina die op bovenstaande volgt aangegeven met een rood vierkant:  (de tekst in het rode vierkant kan anders zijn, afhankelijk van je fysieke locatie)
• Download het bestand naar een lokatie die voor jou handig is, bijvoorbeeld C:\Android\. Pak vervolgens het bestand uit door er met de rechter muisknop op te klikken en te klikken op ‘Alles uitpakken…’ : .
• Wanneer het downloaden is voltooid pak je het bestand uit naar een locatie die voor jou handig is, bijvoorbeeld C:\Android\Eclipse. Als je de wizard gebruikt van Windows dan moet je wanneer je uit wilt pakken naar bijvoorbeeld C:\Android\Eclipse, in de balk alleen de directory  ”erboven” invullen, zoals het volgende: C:\Android\. Zie ook het volgende screenshot: .
• Wanneer je Eclipse op wilt starten, klik dan op het bestand “Eclipse” (maar doe dit a.j.b. nu nog een niet), dit bestand staat in de map waar je Eclipse hebt uitgepakt. Uitgaande van bovenstaand voorbeeld staat het programma “Eclipse” in de map C:\Android\Eclipse\

Installatie Android SDK

• Ga naar http://developer.android.com/sdk/index.html
• Klik bij Windows op de link android-sdk_r12.zip (het kan zijn dat het getal 12 in ‘r12′ is veranderd naar een hoger getal, afhankelijk van wanneer je deze DevTutorial doorloopt).
• Wanneer het downloaden is voltooid pak het bestand op dezelfde manier uit als eclipse (zie vorige paragraaf) uit naar een locatie die voor jou handig is, vul bijvoorbeeld net zoals bij de vorige paragraaf C:\Android\ in: .

Onthoud de locatie waarnaar je de bestanden uitpakt(!), deze heb je nodig bij het installeren van ADT.

Wanneer je Eclipse en de Android SDK in C:\Android\ hebt uitgepakt, dan ziet deze map er als volgt uit: . De beide .zip bestanden kan je trouwens nu verwijderen, je hebt ze niet meer nodig.

Installatie ADT

• Start Eclipse (als je niet meer weet hoe je dat doet, kijk dan in stap 5 bij het kopje “Installatie Eclipse”).
• Als dit de eerste keer is dat Eclipse opstart, wordt je gevraagd een “workspace” te kiezen. De workspace is een map waarin alle bestanden staan die gegenereerd worden door Eclipse voor Android: het is een soort “Mijn Documenten” voor Eclipse wanneer je in Java/Android programmeert. Je kan verschillende workspaces hebben. Je kan schakelen tussen workspaces door in Eclipse te klikken op “File–>Switch Workspace”. Ik raad je aan de workspace te plaatsen in dezelfde map als waar je Eclipse en de Android SDK naartoe hebt uitgepakt:
• Klik bovenin het scherm van Eclipse op “Help–>Install New Software”
• In het scherm dat tevoorschijn komt, ga met je muis naar het invulveld dat rechts staat van “Work with:” vul daar het volgende adres in: https://dl-ssl.google.com/android/eclipse
  Krijg je een foutmelding of verschijnt er niks in de volgende stap, gebruik dan het volgende adres: http://dl-ssl.google.com/android/eclipse
• Druk op Enter terwijl je nog met je cursor in het textveld bent, en wacht todat in het midden van het scherm “Developers Tools” verschijnt.
• Druk op het pijltje/plusje bij developers tools zodat die uitgeklapt wordt en zet een vinkje bij alle opties.
• Klik twee keer op Next zodat je bij dit scherm komt: Accepteer de licentie-overeenkomst (Klik op “I accept the terms of the license agreements”) en klik op “Finish”.
• Wacht tot de installatie voltooid is. Klik vervolgens op de knop “Restart Now”.
  Als je tijdens de installatie een waarschuwing tegenkomt zoals  in dit screenshot, klik dan op OK.
• Wanneer Eclipse opnieuw is opgestart, klik je bovenin het scherm van Eclipse op “Window–>Preferences”
• In het scherm dat verschijnt, klik je in de linkerlijst op Android
• Nu moet je de locatie van de map gebruiken waar je de Android SDK naar hebt uitgepakt. Deze locatie moet je invullen in het invulveld wat rechts staat van “SDK location”. Je kan ook de knop rechts van het invulveld gebruiken om de locatie op te zoeken van de map waarnaar je de Android SDK hebt uitgepakt. Als je alles hebt uitgepakt naar Android zoals beschreven in deze handleiding, dan moet je het volgende invullen:
  N.b. Eclipse controleert of de map die je invult onder andere de map ‘tools’ bevat. Krijg je een foutmelding dat je niet de juiste map hebt geselecteerd, controleer dan via Windows Verkenner of die map ook de map ‘tools’ bevat:
• Wanneer je de locatie hebt ingevuld, klik je op Apply. Je kan de volgende waarschuwing krijgen: . Deze waarschuwing wijst je er op dat je nog de platform tools voor de SDK moet installeren.  Dit gaan we fixen in de volgende stap. Klik vervolgens op OK zodat het scherm verdwijnt.
  
• Klik bovenin het scherm van Eclipse op “Window –> Android SDK and AVD Manager”
• Klik in de linkerlijst op “Available packages”.
• Vouw de onderdelen in de rechterhelft uit en zet een vinkje bij de volgende zes regels:
• Klik op de knop “Install Selected”
• In het scherm dat daar op volgt, klik je op “Accept All” en vervolgens op de knop “Install”
• Wacht totdat de installatie voltooid is en druk op “Close” (als er hiervoor nog een vraag wordt gesteld over het restarten van ADB moet je op “Yes” klikken)
• Sluit het scherm van “Android SDK and AVD Manager” door op het kruisje te klikken.

Installatie in Ubuntu

Deze handleiding gaat uit van Ubuntu 10.10 maar werkt ook op de meeste andere Ubuntu versies.

Wanneer je de handleiding voor Ubuntu vergelijkt met die voor Windows, valt je op dat er meer screenshots bij Windows  staan. Omdat de handleidingen op veel plekken erg op elkaar lijken heb ik minder screenshots bij de Ubuntu handleiding neergezet. Als je toch extra hints wil tijdens de installatie in Ubuntu raad ik je aan ook de handleiding voor Windows te lezen.

Installatie JDK

• Open de terminal (In Ubuntu: Ga in de startbalk naar Toepassingen –> Hulpmiddelen –> TerminalVenster)
• Voer het volgende commando uit: sudo apt-get update
• Voer daarna dit commando uit: sudo apt-get install sun-java6-jdk

Installatie Eclipse

• Ga naar http://www.eclipse.org/downloads/.
• Op de pagina zie je verschillende regels staan met elk hun eigen versie van Eclipse. Ga naar de regel die begint met Eclipse Classic 3.7  en klik achter Linux op “32-Bit”. Gebruik je een 64 bits versie van Linux, klik dan op “64-Bit”. Weet je niet welke versie je gebruikt, klik dan op “32-Bit”.
• Klik op downloadlink op de pagina die op bovenstaande  volgt.
• Waneer het downloaden is voltooid pak je het bestand uit naar een locatie die voor jou handig is, bijvoorbeeld /home/je-gebruikersnaam/android/
• Wanneer je Eclipse op wilt starten, klik dan op het bestand “Eclipse”, dit bestand staat in de map waar je Eclipse hebt uitgepakt. Uitgaande van bovenstaand voorbeeld staat het programma “Eclipse” in de map /home/je-gebruikersnaam/android/eclipse/

Installatie Android SDK

• Ga naar http://developer.android.com/sdk/index.html
• Klik bij “Linux (i386)” op de link “android-sdk_r12-linux_86.tgz” (het kan zijn dat het getal 12 in “r12″ is veranderd naar een hoger getal, afhankelijk van wanneer je deze DevTutorial bekijkt).
• Waneer het downloaden is voltooid pak je het bestand uit naar een locatie die voor jou handig is, bijvoorbeeld /home/je-gebruikersnaam/android/

Onthoud de locatie waarnaar je de bestanden uitpakt(!), deze heb je nodig bij het installeren van ADT.

Wanneer je Eclipse en de Android SDK in “/home/je-gebruikersnaam/android” hebt uitgepakt, dan kan deze map er als volgt uit zien:

Installatie ADT

De installatie van de ADT in Ubuntu gaat op dezelfde manier als in Windows. Scroll dus s.v.p. omhoog en gebruik de Installatiehandleiding van ADT voor Windows om ADT te installeren op Ubuntu.

Een klein verschil is de directory die je in moet vullen bij stap 10 (“Nu moet je de locatie van de map gebr….”). Als je, net zoals ik, alles hebt uitgepakt naar de directory “/home/je-gebruikersnaam/android” dan moet je deze locatie invullen: “/home/woutervegter/android/android-sdk-linux_86″. Hetzelfde geldt voor het kiezen van een locatie voor je workspace, ik raad je aan deze te zetten op “/home/woutervegter/android/workspace” (Vergeet uiteraard niet mijn gebruikersnaam te vervangen door de jouwe.)

Installatie in Mac OS X

Deze handleiding gaat ervan uit dat je Max OS X versie 10.5 gebruikt. Is dit niet het geval, doe dan een update van je besturingssysteem.

Wanneer je de handleiding voor Mac OS X vergelijkt met die voor Windows en Ubuntu, valt je op dat er geen screenshots staan bij de handleiding voor Max OS X. Omdat de handleidingen op veel plekken erg op elkaar lijken heb ik geen screenshots  neergezet bij de Mac OS X handleiding. Als je toch extra hints wil tijdens de installatie in Mac OS X raad ik je aan ook de handleiding voor Windows en Ubuntu te lezen.

Installatie JDK

Bij Mac OS X versie 10.5 is de JDK al voorgeïnstalleerd

Installatie Eclipse

• Ga naar http://www.eclipse.org/downloads/.
• Op de pagina zie je verschillende regels staan met elk hun eigen versie van Eclipse. Ga naar de regel die begint met Eclipse Classic 3.7  en klik achter Mac Cocoa op “32-Bit”. Gebruik je een 64 bits versie van Mac OS, klik dan op “64-Bit”. Weet je niet welke versie je gebruikt, klik dan op “32-Bit”.
• Klik op download link op de pagina die op bovenstaande  volgt.
• Waneer het downloaden is voltooid pak je het bestand uit naar een locatie die voor jou handig is, bijvoorbeeld /Users/je-gebruikersnaam/android/
• Wanneer je Eclipse op wilt starten, klik dan op het bestand “Eclipse”, dit bestand staat in de map waar je Eclipse hebt uitgepakt. Uitgaande van bovenstaand voorbeeld staat het programma “Eclipse” in de map /Users/je-gebruikersnaam/android/eclipse/

Installatie Android SDK

• Ga naar http://developer.android.com/sdk/index.html
• Klik bij “Mac OS X (intel)” op de link “android-sdk_r12-mac_86.zip” (het kan zijn dat het getal 12 in “_r12″ is veranderd naar een hoger getal, afhankelijk van wanneer je deze DevTutorial bekijkt).
• Waneer het downloaden is voltooid pak je het bestand uit naar een locatie die voor jou handig is, bijvoorbeeld /Users/je-gebruikersnaam/android/

Onthoud de locatie waarnaar je de bestanden uitpakt(!), deze heb je nodig bij het installeren van ADT.

Installatie ADT

De installatie van de ADT in Max OS X gaat op dezelfde manier als in Windows. Scroll dus s.v.p. omhoog en gebruik de Installatie handleiding van ADT voor Windows om ADT te installeren op Mac OS X.

Een klein verschil is de directory die je in moet vullen bij stap 10 (“Nu moet je de locatie van de map gebr….”). Als je, net zoals ik, alles hebt uitgepakt naar de directory “/Users/je-gebruikersnaam/android” dan moet je deze lokatie invullen: “/Users/woutervegter/android/android-sdk-linux_86″. Hetzelfde geldt voor het kiezen van een lokatie voor je workspace, ik raad je aan deze te zetten op “/Users/woutervegter/android/workspace” (Vergeet uiteraard niet mijn gebruikersnaam te vervangen door de jouwe.)

Eclipse + Android SDK + ADT: introductie in je ontwikkelomgeving

Je hebt zojuist je hele ontwikkelomgeving geïnstalleerd. Nu je heb een grote verzameling van allerlei programmaatjes, schermpjes, knoppen en menu’s die je helpen om Android-apps te kunnen ontwikkelen. Om bekend te worden met je ontwikkelomgeving, gaan we een hele simpele app maken en vervolgens al die tools langslopen die je helpen een app te ontwikkelen. We zullen beginnen met het aanmaken van een emulator, dat is een Androidtelefoon die draait op je eigen computer. Daarna hebben we het over de ‘Package Explorer’ die je helpt verschillende bestanden te openen en te ordenen, vervolgens kijken we naar het editor-scherm waarin je bestanden aan kan passen, ook met behulp van de ‘Editor Tabs’. We kijken ook naar het ‘problems window’ en het ‘console window’. Om schermen (knoppen,tekst, vlakken, etcetera) aan te passen kijken we  als laatste naar de ‘Layout Editor’ en hoe je daarvan de eigenschappen kunt aanpassen met behulp van het ‘Properties Window’. Hiermee passen we de standaard Android-app een beetje aan zodat je een hele simpele app maakt. Ter afsluiting wordt uitgelegd hoe je deze app kan laden en opstarten in je emulator.

Emulator: aanmaken en opstarten

Om je apps te kunnen testen heb je een Emulator of een Fysieke Androidtelefoon nodig. In het begin is het het handigst om een Emulator te gebruiken: dat is een programma op je computer dat een Androidtelefoon precies nadoet of anders gezegd: simuleert. Je kan verschillende emulators aanmaken, en bij elke emulator kan je kiezen welke versie van het Android OS hij moet hebben (bijvoorbeeld 1.6, 2.1 of 2.3). Hierdoor kan je gemakkelijk je apps testen op de verschillende Androidversies. We gaan nu een Emulator maken met  de Android 2.1 versie. Dit is een veelgebruikte versie en hij is uitgebreid genoeg om je eerste apps op uit te testen.

• Klik in de menubalk van Eclipse op Windows–>Android SDK and AVD Manager.
• Hierin zie je de emulators staan die je hebt aangemaakt . Deze lijst is nu nog leeg. Klik op New… om een nieuwe emulator aan te maken.
• Neem de volgende instellingen over en klik op Create AVD.
• In het scherm dat je nu weer voor je krijgt (dat scherm met het overzicht van de emulators), selecteer je de emulator die je hebt aangemaakt (met de naam My_Emulator) en klik je op start (als je daarna een scherm krijgt met als titel launch options, klik dan gewoon op launch zonder iets aan te passen).
• Je emulator wordt nu opgestart, de eerste keer opstarten kan best een tijdje duren (op mijn quad core i7 macbook pro met ssd harde schijf duurt het bijvoorbeeld 1 minuut en 11 seconden, op mijn vijf jaar oude laptop met gewone harde schijf duurde het wel meer dan 3 minuten).
• Als je na het opstarten meldingen krijgt als: “Application X (In process com.android.X) is not responding”, klik dan steeds op “Wait”.
• Wanneer de emulator is opgestart moet je twee seconden op de menu knop drukken om het scherm aan te zetten.
• Daarna kan je een app uitproberen zoals bijvoorbeeld de rekenmachine: .
• Je kan nu de emulator sluiten door gewoon bovenin op het kruisje te drukken (windows/linux) of op het rode bolletje (Mac OS X).  Je kan de emulator ook aan laten staan voor als je straks een eigen app uit gaat proberen. Sluit het scherm dat het overzicht van de emulators bevat.

Androidproject aanmaken

Als je een app downloadt uit de Android Market wordt er op de achtergrond een bestandje gedownload dtat als bestandsnaam eindigt op de letters .apk. Deze app wordt vervolgens gebruikt door je Android telefoon om de app te installeren. Zo’n bestandje waar de app in staat kan je genereren met Eclipse. In Eclipse geef je aan wat voor programeer- bestanden er bij de app horen, wat voor plaatjes je in de app wilt tonen, wat voor geluidjes je af wilt spelen en wat voor taalbestanden je wilt gebruiken als een telefoon bijvoorbeeld op Nederlands staat of wanneer de telefoon op Engels staat. Zo zijn er nog meer verschillende soorten bestanden die bij een complete app horen. Het handige van Eclipse is dat het al die verschillende bestanden op een overzichtelijke manier bij elkaar kan houden. Wanneer je die verschillende bestanden bij elkaar hebt zodat je ze kan aanpassen en uitbreiden dan heet die verzameling bestanden een Androidproject. Bij elke app die je uiteindelijk wilt maken hoort dus één Androidproject waar verschillende bestanden in staan die als voer dienen om het app-bestandje te genereren. Wanneer je dus een app wilt maken, zul je als eerste een nieuw Androidproject willen maken. We gaan nu een hele simpele app maken zodat we de belangrijkste schermen van Eclipse kunnen verkennen:

• Maak een nieuw Androidproject aan door in de menubalk van Eclipse te klikken op File–>New–>Project…
• Klik in het daaropvolgende scherm op het mapje Android en vervolgens op Android Project. Klik daarna op Next: .
• Neem de volgende instellingen over en klik op Finish: .

Er wordt nu een Android project voor je gegenereerd, zodat uiteindelijk je Eclipse-scherm er alsvolgt uit ziet: .

Een verschil met het screenshot en jouw scherm kan zijn dat er bij jouw scherm minder opties zijn in het gedeelte waar je “Build Target” moet kiezen. Dit komt omdat, wanneer je de DevTutorial stipt hebt gevolgd, je alleen programmeerbestanden hebt gedownload voor Android 2.1 terwijl ik ze voor bijna allemaal heb. Dit verschil maakt verder weinig uit, het gaat er om dat je “Android 2.1-update1″ kiest bij build target.

De windows van Eclipse en de Editor Tabs van het Editor Window

Doe eerst even dit: kijk in de linkerkant van je Eclipse-scherm onder Package Explorer naar het mapje ‘src’. Vouw dat mapje uit, inclusief het mapje moop.me.simpleapp en dubbelklik vervolgens op MainActivity.java zodat in het midden van je Eclipse scherm het bestand MainActivity.java geladen wordt. Ga ook nog even naar de menubalk bovenin Eclipse en klik op op Window–>Preferences (Eclipse–> Preferences bij een Mac) en ga naar het volgende scherm en zet een vinkje bij Show line numbers: .

Nu heb je Eclipse  voor je open zoals je hem vaak zult zien: . Zoals je kan zien is het scherm ingedeeld in verschillende vlakken, hier zijn ze aangegeven met paarse vierkanten: . In elk paars vlak zitten meerdere windows die je tevoorschijn kan halen door op de tabs te klikken. De tabs zijn in het vorige plaatje aangegeven met rode vierkanten. Je kan een window groter maken door te dubbelklikken op de tab. Je kan het window weer kleiner maken door er opnieuw op te dubbelklikken. Je kan een window sluiten door te klikken op het kruisje dat in de tab staat. Alle windows (die in de tabs zitten) hebben op een of ander manier te maken met het Androidproject waar je op dit moment mee bezig bent:

• Package Explorer Window: deze zie je helemaal links staan. Alle bestanden die belangrijk zijn voor je Android-app staan hier netjes weergegeven in een mapstructuur. Belangrijke mappen zijn de ‘src’ map en de ‘res’ map. In de ‘src’ map staan alle bestanden die je zelf programmeert en in de ‘res’ map staan allerlei andere bestanden zoals plaatjes, geluiden, taalbestanden, scherm-layouts die je in je app kan laden.
• Editor Window: dit is het scherm dat geopend wordt als je op een bestand klikt in de Package Explorer. Als het een bestand was dat stond in het mapje ‘src’ dan wordt het geopend met een code editor: een scherm dat een tekstbestand aan kan passen en dat allerlei trucjes heeft zodat de programmeur sneller code kan typen. Als je een ander soort bestand opent dan krijg je een ander soort editor. Als je bijvoorbeeld een layout xml-bestand opent (een bestand dat beschrijft hoe een Androidscherm eruit moet zien) dan wordt de Layout Editor geopend.
  • Klik bijvoorbeeld eens in je Package Explorer op het mapje ‘res’ en dan op het mapje layout, en open dan het bestand main.xml. Nu wordt er een Layout Editor geopend waarmee je dus een Androidscherm aan kan passen: .
  • Kijk nog eens naar het Eclipse-scherm via dit plaatje: . Je ziet onderin het editor window van de Layout Editor twee tabs staan, aangegeven met twee rode vierkanten. Deze tabs heten Editor Tabs en worden gebruikt om op een andere manier te kijken naar het bestand dat je geladen hebt in je Editor Window. In dit geval heb je twee tabs voor de Layout Editor: met de linker tab zie je grafische weergave van je scherm en met de rechtertab zie je code-weergave van je scherm. De code-weergave betekent de programmeercode die ingelezen wordt door je Androidtelefoon en op basis daarvan je scherm visueel maakt. Klik eens op de code-weergave tab, dat is de rechtertab. Nu ziet je scherm er als volgt uit: .
  • Op dezelfde manier zijn er voor andere soorten bestanden andere soorten Editors. Zo heb je de Manifest Editor die geopend wordt als je AndroidManifest.xml opent (deze staat bijna helemaal onderin je Package Explorer); . Let er even op dat je hier ook weer editor tabs ziet: Manifest, Application, Permissions, Permissions en AndroidManifest.xml. Elk van deze Editor Tabs laat je op een andere manier kijken naar het bestand AndroidManifest.xml. De complete code van het bestand zie je net zoals de Layout Editor in de helemaal rechtse editor-tab (AndroidManifest.xml). Bij de andere Editor Tabs pas je verschillende onderdelen van het bestand AndroidManifest.xml aan. Onthoud alsjeblieft wat Editor Tabs zijn: in de komende DevTutorials zal ik er vaak naar verwijzen door  bijvoorbeeld te zeggen: open AndroidManifest.xml in de Permissions Editor tab en klik op Add… en voeg een een uses permission toe van het type android.permission.INTERNET (wat een uses permission is en wat een android.permission.INTERNET is, dat leer je in een toekomstige DevTutorial – al kan je het misschien nu al wel raden).
• Outline Window: Dit is de window die helemaal rechts staat: dit window geeft een samenvatting van het bestand dat je in je Editor Window actief hebt. Open eens het bestand main.xml, dan zie je rechts een samenvatting van hoe het scherm is opgebouwd door middel van namen van verschillende scherm-vlakken : . Als je nou het bestand MainActivity.java opent, dan zie je een andere samenvatting staan in de outline:  (op zich wel logisch, omdat je te maken hebt met een ander soort bestand). In de samenvatting staan de verschillende onderdelen van het bestand genoemd dat je hebt geopend in de editor window. Je kan hier nog een stap verder doorklikken, dat kan in de Properties Window (die wordt beschreven in het volgende kopje).
• Properties Window: Deze staat in het horizontale vlak rechtsonderin het scherm van Eclipse. Je moet dan nog wel even op de tab van de Properties Window te klikken; deze geeft de eigenschappen weer van een element wat je hebt geselecteerd.
  • Het kan ook zijn dat je Properties Window er nog niet staat. Je kan hem tevoorschijn halen door bovenin de menubalk van Eclipse te gaan naar Window –> Show View–> Other… en dan te zoeken op Properties en vervolgens op Ok te klikken: .
  • Zoals je weet worden in de Outline Window de onderdelen weergegeven van het bestand wat je geopend hebt in de Editor window. Als je nou klikt op een onderdeel in de Outline dan worden de eigenschappen van dat onderdeel weergegeven in het Properties Window: Open het bestand main.xml (die zit in res/layout in de Package Explorer window), ga naar de Graphical Layout Editor Tab. Zorg er ook voor dat je het Properties scherm actief hebt onderin je scherm van Eclipse, en klik dan in de Outline Window op de TextView met daarachter de tekst “Hello World, MainActivity!”: .
  • In de Properties Window zie je vervolgens de eigenschappen van de TextView die je in de Outline hebt geselecteerd. Een TextView is in Android een balkje waarin je tekst weer kan geven op het scherm. Als je naar beneden gaat scrollen in het Properties Window zie je andere eigenschappen staan, waaronder de Text-eigenschap: . De tekst die er nu in staat, is een snelkoppeling naar een zinnetje dat ergens anders staat in je Androidproject. We kunnen deze zin ook aanpassen door er onze eigen tekst neer te zetten. Vul in het veld Text de volgende zin in: “Hello Androidworld!” .Wat je nu doet is eigenlijk een eigenschap aanpassen van de TextView, in het Engels heet dat in het enkelvoud een Property. Je zou dus ook kunnen zeggen: je hebt net de Property Text van de TextView van main.xml veranderd van @string/hello naar “Hello AndroidWorld!”.
• Problem Window: Dit window zit in hetzelfde vlak als je Properties Window en geeft je een overzicht van de fouten die in je Androidproject aanwezig zijn. Als  je er op klikt, zie je dat er geen fouten in staan: . We gaan nu expres een fout maken om te kunnen zien hoe dit scherm werkt:
  • Open MainActivity.java en haal de puntkomma (‘;’) weg aan het einde van regel 11 en sla het bestand op (klik op de diskette linksbovenin Eclipse of druk op Ctrl+S voor Windows of Ubuntu of Command+s voor Mac).
  • Nu zie je in de Problem Window Errors (1 item) staan. Vouw deze regel uit: . Wanneer je een fout maakt in een bestand in je Android Project dan wordt dat weergegeven in je Problem Window. Als je op zo’n foutmelding dubbelklikt springt je Editor Window automatisch naar de regel waar de fout staat.
  • Als je nu weer de puntkomma terugzet en het bestand MainActivity.java opslaat dan zie je dat de foutmelding weer verdwijnt: .

Dit zijn alle Windows die belangrijk zijn om nu te kennen. Als je ooit per ongeluk een Editor Window afsluit dan kan je hem weer tevoorschijn halen door bovenin de menubalk van Eclipse te gaan naar Window –> Show View–> Other… en dan te zoeken naar de Window die je wilt hebben.

Als je wilt, kun je de windows in Eclipse ook verplaatsen naar een andere plek in het scherm van Eclipse. Ik vind het handig om het Properties Window naast mijn Package Explorer window te hebben:

• Klik op de tab van de Properties Window en houd je muisknop ingedrukt. Sleep de tab vervolgens naar de tab van de Package Explorer window en laat hem rechts ervan los zodat er een klein horizontaal rechthoek verschijnt rechts van de Package Explorer window tab: <– zoals je ziet is de muisaanwijzer niet meegenomen in dit  screenshot, maar als je goed kijkt kan je rechts van Package Explorer window tab het zwarte rechthoekje zien.
• Je scherm moet er nu als volgt uit zien: . Als je nu rechts op een onderdeel in de Outline klikt zie je links een mooi lijstje met daarin de eigenschappen van het onderdeel: .
• En als je wil kan je nu gemakkelijk terugschakelen naar het Package Explorer window door op de tab van het Package Explorer window the klikken: .

App opstarten

Toen je zojuist een Androidproject aanmaakte, heb je een simpele app gegenereerd. Net hebben we via de Layout Editor tab van main.xml, via het Outline Window, via het Properties Window de tekst aangepast van je hoofdscherm. Nu gaan we deze app opstarten. Je hoeft hiervoor niet apart de emulator op te starten als je hem al gesloten had: hij wordt automatisch opgestart.

• Klik op het play-knopje bovenin Eclipse, hij is in dit screenshot aangegeven met een rood vierkantje: .
• Je krijgt dan een vraag die gaat over hoe je je Project Simple app wil opstarten. Kies voor Android Application en klik op OK: .
• Als je emulator alweer was afgesloten word de emulator eerst nog opgestart. Daarna wordt automatisch je app opgestart. Je kan zien dat de tekst die je zelf hebt ingevoerd nu op het scherm staat: .

Kom je wel in het home screen van de emulator, maar wordt de app niet opgestart, druk dan na 2-3 minuten wachten nog een keer op de play-knop bovenin het scherm van eclipse terwijl je de emulator aan laat staan (dit zorgt ervoor dat de app opnieuw wordt opgestart in de emulator). Je kan ook proberen de app op te zoeken in het opstartmenu van je emulator/Androidtelefoon.

Succes ermee! Mocht er iets niet werken in deze DevTutorial: kijk dan eerst zelf goed of je niet iets verkeerd hebt overgenomen. Kom je er nog steeds niet uit? Stel dan pas een vraag op het forum op deze plek waar we elkaar kunnen helpen. We helpen je graag hoor , maar het is belangrijk dat je zelf eerst ook even moeite doet om je vraag op te lossen: dan krijgen wij niet duizenden vragen en leer je zelf ook fouten op te sporen.

Ik hoop dat je dit leuk vond om te doen en zie je graag terug op het forum of in de volgende DevTutorial. In de volgende DevTutorial leer je onder andere de volgende belangrijke begrippen: Source, Syntax, Block, Activity, Method, Views, Button en if block. Hiermee gaan we een simpele reken app maken.

Share Us:

Follow us: