Zelf mobiele apps bouwen (deel 3)

We gaan in dit deel verder met de app die we in deel 2 hadden opgezet. Herhaal als het nodig is de stappen door in Android Studio een nieuw project te beginnen met als template Empty Activity. Hiermee zijn al enkele mappen en bestanden voor de app gemaakt en ook al grotendeels ingevuld, zodat je in feite al een werkende app hebt. In het projectvenster zie je deze bestanden en mappen terug onder de map app. Het gaat om:

- manifests: deze map bevat het belangrijke bestand AndroidManifest.xml, dat allemaal details over je app bevat. Er staat bijvoorbeeld in welke activity moet worden begonnen bij het starten van de app. Als toegang nodig is tot systeemonderdelen, zoals internet of de camera, vermeld je dat ook in dit bestand. Bij het uitbreiden van je app zul je hier zelf aanpassingen in maken;

- java: deze map bevat alle broncode voor je app (in Kotlin of Java) in verschillende mappen. Hierbij gebruik je doorgaans de bovenste map (met de ‘package name’ als naam). De twee mappen daaronder bevatten testcode. Er is in de map al één bestand met de naam MainActivity.kt gemaakt, waarin al enkele regels code zijn ingevuld. Aan de extensie .kt kun je zien dat het in Kotlin is geschreven.

- res: deze map bevat extra zogeheten resources (bronnen), verdeeld over mappen. In de map drawable vind je grafische bestanden. De map layout bevat alle lay-outs. Daarmee bedoelen we de schermen voor de app, ofwel grafische interfaces, waarop bijvoorbeeld teksten, afbeeldingen en buttons staan. Zo’n lay-out wordt beschreven in een xml-bestand en voor het eerste eenvoudige scherm is al een bestand activity_main.xml gegenereerd. De map values bevat andere resources, zoals variabelen die in de app worden gebruikt. Zo vind je in strings.xml de naam die je aan de app hebt gegeven terug.

Lay-out openen

Open de automatisch gegeneerde lay-out via het projectvenster door onder app/res/layout te dubbelklikken op activity_main.xml. Deze lay-out wordt dan aan de rechterkant geopend, waar het zoals elk geopend bestand een eigen tabblad krijgt. Bij het bewerken van een lay-out kies je rechtsboven uit de drie modi Code, Split en Design.

Onder Code kun je het xml-bestand rechtstreeks bewerken. Via Design kan dit visueel door bijvoorbeeld elementen naar de app te slepen. Bij de modus Split heb je die twee opties naast elkaar. We beginnen met Design.

Links in het venster Palette zie je alle componenten waarmee je de gebruikersinterface voor je app bouwt, zoals teksten, afbeeldingen en knoppen. Dat doe je door zulke componenten naar je scherm te slepen en daarop te positioneren. Er is al één component voor tekst geplaatst, ook wel TextView genoemd. In de gebruikersinterface zie je dat deze component al de tekst Hello World! bevat. Als je op die tekst klikt, is de TextView-component geselecteerd, wat je ook ziet in het venster Component Tree. Dat is een soort boomstructuur voor alle gebruikte componenten.

Tip: bestanden terugvinden

Eigenschappen aanpassen

Elke component kent talloze eigenschappen die je kunt aanpassen, ook wel attributen genoemd. Zorg daarvoor eerst dat de component is geselecteerd, door erop te klikken in de gebruikersinterface of in de Component Tree. Selecteer als voorbeeld de TextView-component en open rechts (als het nog niet is geopend) het venster Attributes. Hierin vind je alle attributen voor deze component. De tekst voor de TextView is in eerste instantie Hello World! en vind je bij het attribuut met de naam text. De attributen waaraan reeds een waarde is toegekend, vind je altijd snel terug onder Declared Attributes.

Er zijn nog talloze andere attributen. De volledige lijst vind je onder All Attributes. Veel attributen komen in latere delen aan bod, als we dieper ingaan op het bouwen van gebruikersinterfaces. We gaan alvast één belangrijke attribuut met de naam id invullen. Daarmee kunnen we straks in code de component aanwijzen. Dit attribuut vind je al direct bovenaan. Vul de gewenste naam in; als voorbeeld kiezen we text_welkom.

Ga ten slotte rechtsboven naar Code om te zien hoe de lay-out er in het xml-bestand uitziet. Let daarin vooral op de TextView-component en de attributen text en id. Als je het handiger vindt, kun je ook altijd in het xml-bestand aanpassingen maken. Dat gaat in sommige gevallen sneller omdat je wat handiger kunt knippen, kopiëren en plakken.

Code schrijven volgens de richtlijnen

Bestaande code

Je hebt gezien hoe je voor de TextView-component in je ontwerp de tekst aan kunt passen. De aanpassing kun je ook via code maken tijdens de uitvoering van je app. We laten zien hoe je dat doet. Open het bestand MainActivity.kt via het projectvenster. Dit bestand bevat een eenvoudige basis voor de (enige) activity van deze app, waaronder de volgende regels:

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)

}

}

Belangrijk om te weten is dat er verschillende toestanden bestaan waarin een activity kan verkeren. Dit heet ook wel levenscyclus of lifecycle. Je kunt via zogenoemde ‘callbacks’ inhaken op elke (veranderende) toestand. In een van de komende delen gaan we hier uitgebreider op in door de levenscyclus en callbacks met een werkend voorbeeld te demonstreren. Hier gebruiken we zo’n callback voor de belangrijke onCreate() die optreedt zodra onze activity wordt gemaakt. Door hier zelf met sleutelwoord override een functie voor te maken, overschrijf je als het ware de bestaande code, waarbij je met super.onCreate(savedInstanceState) eerst de bestaande code (alsnog) kunt laten uitvoeren. Hierbij is savedInstanceState de bewaarde eerdere toestand van de app. Daaronder kun je dan je eigen aanvullende code schrijven. Je ziet daarin nu alleen de regel setContentView(R.layout.activity_main). Die regel zorgt ervoor dat de gewenste lay-out (in dit geval het bestand activity_main.xml) wordt geladen en op het scherm wordt getoond.

Code toevoegen

Voordat je code gaat schrijven, is het handig om een instelling te wijzigen, zodat de benodigde bibliotheken automatisch worden geïmporteerd als je ze gebruikt in je code (zie het kader ‘Importregels voor bibliotheken’). Vervolgens hoeven we maar twee regels toe te voegen om de tekst te veranderen. Zet de regels direct onder de regel setContentView(). Eerst zoeken we via de in de lay-out toegekende id de TextView-component op en maken we deze beschikbaar via de variabele die we textWelkom noemen:

val textWelkom: TextView = findViewById(R.id.text_welkom) as TextView

Hierna kunnen we eenvoudig de tekst veranderen:

textWelkom.text = "Dit is een live aanpassing!"

Als je geen automatische importregels hebt ingesteld, wordt gevraagd om op Alt+Enter te drukken om de bibliotheken te importeren, die nodig zijn voor deze app. Als je de app start, bijvoorbeeld in de emulator, zie je als het goed is de aangepaste tekst. Je merkt nergens dat de tekst via de code wordt aangepast. Dat is niet omdat het te snel zou gaan om op te vallen, maar omdat de bewuste activity binnen de onCreate() nog niet zichtbaar is gemaakt voor de gebruiker.

Importregels voor bibliotheken

Testen in emulator

Fysiek of virtueel Android-toestel

Om je app te testen heb je een Android-toestel nodig. Je kunt hiervoor een fysiek toestel gebruiken (wat in deel 4 aan bod gaat komen), maar ook een virtueel toestel via de emulator te gebruiken. Die werkt tegenwoordig net zo snel of zelfs sneller dan een ‘echt’ toestel. Doorgaans zul je in de eerste fase van je ontwerp vooral de emulator gebruiken en in de laatste fase – voor het perfectioneren van de app – een echt toestel. Om virtuele toestellen voor de emulator te bekijken en te beheren, open je de AVD (Android Virtual Device) Manager via Tools / AVD Manager.

Virtuele toestellen

Bij een standaardinstallatie heb je een toestelconfiguratie gemaakt voor de Pixel 3a. Als voorbeeld voegen we een virtueel toestel toe via de optie Create Virtual Device. Je ziet dan verdeeld over categorieën als TV, Phone, Wear OS en Tablet allerlei profielen voor bekende apparaten die je als basis voor je virtuele toestel kunt gebruiken, al kun je ook zelf een profiel maken (zie het kader ‘Profielen voor apparaten maken’).

Hier kiezen we onder Phone voor Pixel 4. Zoals je aan het icoontje in de kolom Play Store kunt zien, bevat dit virtuele toestel ook de Google Play Store. Je kunt dus (andere) apps op het toestel installeren vanuit de appstore van Android, net als op een echte telefoon. Klik op Next om verder te gaan.

Nu kun je kiezen welke versie van Android moet worden geïnstalleerd. Onder Recommended zie je aanbevolen releases, maar je kunt ook andere systeem-images kiezen. Dit bepaalt de versie van Android. We gebruiken als voorbeeld de release genaamd Q oftewel Android 10. Klik indien nodig eerst op Download om het systeem-image te downloaden en te installeren. Daarna selecteer je het systeem-image en klik je op Next. Als laatste kun je het toestel een naam geven en een standaard schermoriëntatie kiezen (Portret of Landschap).

Via Show Advanced Settings kun je extra details zien. Zo kies je bij Boot option voor Cold boot als het toestel steeds schoon moet starten, of Quick boot als het verder moet gaan in de toestand waarin je het de laatste keer hebt gebruikt. Klik ten slotte op Finish om de configuratie af te ronden.

Profielen voor apparaten maken

App starten op toestel

Als je het virtuele toestel hebt gemaakt, start je deze vanuit het overzicht door op het groene speelicoontje te klikken. De eerste keer kan het opstarten wat langer duren. Als het toestel is opgestart, kun je het gebruiken zoals een echte Android-smartphone. Zo kun je bijvoorbeeld instellingen veranderen via het instellingenmenu en dankzij de Play Store na inloggen ook aanvullende apps installeren. De emulator zelf geeft je via een knoppenbalk nog diverse extra opties (zie het kader ‘Emulator aanpassen’).

Ga je naar Android Studio, dan selecteer je het toestel in de werkbalk onder Running Devices. Dat kan ook via Run / Select Device (Alt+Shift+F11). Klik je op het groene icoontje (of Shift+F10), dan wordt de app gecompileerd en vervolgens op het virtuele toestel geïnstalleerd en gestart.

Emulator aanpassen