Hallo Android!

Dit is de eerste keer dat ik een tutorial schrijf, en deze is gericht op het bouwen van een heuze Android App in Android Studio, de officiele IDE van Google. Deze tutorial doet de aanname dat je Android Studio geinstalleerd hebt en de emulator geconfigureerd!

Start een nieuw project!

Schermafbeelding 2016-10-27 om 21.06.46.pngAllereerst gaan we in Android Studio een nieuw project starten. Dit doe je door op ‘Start a new Android Studio project’ te klikken.

Schermafbeelding 2016-10-27 om 21.06.27.pngDe volgende stap is om het project aan te maken. De naam van de applicatie wordt ‘Hallo Android’. De locatie is op dit moment echter niet van belang en kan je naar eigen inzicht invullen. Klik vervolgens op Next

Schermafbeelding 2016-10-27 om 21.10.56.pngIn dit scherm kies je welke SDK versie je wil gebruiken. In het kort komt het op het volgende neer. Hoe hoger de SDK versie, hoe hoger de Android versie moet wezen waar je richting target. Zelf gebruik ik in mijn voorbeeld API 15. Je zult echter versies omhoog moeten als je de allernieuwste functies uit de SDK wil gaan aanspreken.

Schermafbeelding 2016-10-27 om 21.13.20.pngVervolgens kiezen we voor een ‘Empty Activity’ dat is voor nu ruim voldoende,  en klikken we op Next.

schermafbeelding-2016-10-27-om-21-13-37
De naamgeving voor de Activity laten we vervolgens ook gewoon op de Default settings staan, dus is voor nu ook prima.

Een snelle rondleiding door de bestanden

Schermafbeelding 2016-10-27 om 21.15.52.png

Het lijstje met bestanden ziet er vervolgens redelijk imponerend uit, en mocht je verder gaan in Android ontwikkeling, dan zul je met al deze bestanden te maken krijgen. Voorlopig beperken we ons tot twee bestanden. MainActivity in de Java map, en activity_main.xml in de res map.

Het maken van de interface

Ga naar activity_main.xml in de res map door hierop te dubbelklikken. Er verschijnt dan het volgende scherm!

Schermafbeelding 2016-10-27 om 21.21.15.png

Klik vervolgens op ‘Design’ om naar de grafische weergave te gaan.

Schermafbeelding 2016-10-27 om 21.21.23.png

Aan de linkerkant van het scherm zie je elementen, en aan de rechterkant van het scherm zie je property’s. Standaard zit er al een schermelement ingebouwd, namelijk een TextView, deze gaan we gebruiken. Plaats vervolgens een button en een EditText (Person name) op het scherm, en geeft de volgende property’s

TextView -> Text: Hello World!, ID: welkomTextView
EditText -> Text: <leeg>, ID: invoerEditText
Button -> Text: Ga door, ID: actieButton

schermafbeelding-2016-10-27-om-21-29-20

Qua design komt het er als volgt zo uit te zien! Natuurlijk mag je gewoon al je artistieke talenten in de strijd gooien.

Code toevoegen

De volgende stap is om code toe te voegen. Allereerst gaan we een listener toevoegen om naar de Actieknop te luisteren. Ga naar de codeeditor ga naar deze sectie.

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

Dit is het gedeelte waar de View wordt opgebouwd. Omdat we willen gaan luisteren naar de button zodra deze opgebouwd wordt, volstaat deze functie.

Allereerst moeten we de button gaan definieren. Dat doe je met deze code:

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

    final Button actieButton = (Button) findViewById(R.id.actieButton);

}

In het scherm zie je vervolgens een melding zoals hieronder. Schermafbeelding 2016-10-27 om 21.38.13.png

Dit betekend dat je de Class ‘Button’ moet importeren. Wanneer je (alt + enter) op een Mac intoetst, gebeurt dit automatisch.

Nu we de button hebben geidentificeerd is het tijd om deze knop te laten werken. Dit doen we als volgt.

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

    Button actieButton = (Button) findViewById(R.id.actieButton);
    if (actieButton != null) {
        actieButton.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v) {
                System.out.println("Iemand klikte op mij");
            }
        });
    }
}

Wederom gaat de compiler hint gevens dat je klassen moet importeren. Wat we nu doen is dat we allereerst controlleren of de Button wel bestaat. Een van de eigenschappen van Java is dat deze voortdurend controleerd of je wel alle uitzonderingen afvangt.

Als de knop bestaat wordt er een listener ingesteld met daarbij een bijbehorende functie.  In deze functie hebben we nu de melding “Iemand klikte op mij”.  Als je de App start zie je nu in de console dat er geluisterd wordt naar de knop. Dit zie je doordat er een melding in de console toegevoegd wordt.

De volgende functie die we toe gaan voegen is dat we Hello World gaan vervangen door je eigen naam als je deze intypt en op “Ga door” klikt.  Dit doe je door de volgende code

System.out.println("Iemand klikte op mij");

Te veranderen in:

System.out.println("Iemand klikte op mij");
TextView hallo = (TextView)  findViewById(R.id.welkomTextView);
EditText naam = (EditText) findViewById(R.id.invoerEditText);

hallo.setText(naam.getText().toString());

Als je vervolgens de App start veranderd het label wanneer je het invoerveld aanpast. We hebben zojuist onze eerste android App gemaakt!

LET OP! Als je deze app eenmaal werkend hebt, zal de compiler aangeven dat er sprake is van ‘Method ivocation’ . De app zal ondanks deze melding gewoon werken, maar er is wel een kleine toelichting nodig.

Android gebruikt in de basis Java, en tijdens het schrijven van de code zal Android Studio deze code al proberen uit te voeren. Omdat het in theorie mogelijk is dat de code niet uitgevoerd wordt doordat een variable niet bestaat krijg je deze melding. Voor deze simpele app is het geen probleem. Voor een wat complexere app is het een zegen, omdat het je forceert om eventuele bugs al op voorhand te voorkomen.

Hoe verder?

Met deze kennis ben je nu in staat  een tweede knop te ontwikkelen die de TextView terugzet / instelt op een voorgedefinieerde waarde.

Advertenties