cursus Android Studio les 1

In de eerste les richten we de ontwikkelomgeving in met Android Studio, maken we EersteApp en zetten die op jouw mobiele telefoon of tabletcomputer. De eerste les is niet bedoeld om meteen alles uit te leggen, maar vooral om zo snel mogelijk te beginnen.

We beschrijven hier stap voor stap hoe je Android Studio aangevuld met tools van Google installeert op je computer. We laten zien hoe je daarmee een scherm ontwerpt, hoe je met Java wat programmeert om wat op het scherm te zetten en hoe je EersteApp uploadt naar een Android apparaat. Dat laatste doen we met een USB-kabel en nog niet via de Google Play Store.

Voor extra informatie verwijzen we naar developer.android.com van Google en eventueel naar een Nederlandstalig boek van Michiel de Rond.

Stap 0: Voorkennis

We veronderstellen dat je de cursussen Programming en OOP1 hebt gedaan.

Stap 1: Download Android Studio

Het is mogelijk om met IntelliJ IDEA Ultimate edition Android apps te ontwikkelen en dan hoef je alleen de Android SDK en de Command line tools te installeren. Maar hier volgen we de officiële werkwijze volgens Google.

Ga naar developer.android.com/studio/ en download de installatiesoftware voor Windows-, Apple- of Linux-computers. De website herkent wat je nodig hebt. De laatste versie 3.3.1 is van 8/2/2019 en de download is ongeveer 1 gigabyte. (5 minuten)

Stap 2: Installeer Android Studio

Start de installatie.

De Android Studio IDE, de Android SDK en Android Emulator worden geïnstalleerd. Totaal ongeveer 4 gigabyte op disk. Je kunt bij alle vragen op Next, Finish of Accepteren klikken. (20 minuten)

Stap 3: Configureer project EersteApp

Na de installatie start Android Studio en kan je beginnen aan je eerste app. Ten eerste moet je, precies zoals bij het programmeren van gewone Java applicaties, een project maken.

Een eerste verschil met gewone Java applicaties is dat er geen class is met een main() method. Een Android app heeft een class, die een Activity extends. Kies daarvoor de Empty Activity. Klik op Next.

Vervolgens noem je jouw eerste project: EersteApp. Voor de Package name kies je zoals te doen gebruikelijk iets wat jouw project uniek maakt in de wereld. Zie voorbeeld. En zorg dat Android Studio jouw project ergens opslaat waar je het kan terugvinden. Je maakt jouw EersteApp met Language: Java. De Minimum API level: API 15 is prima, want we willen EersteApp op allerlei Android apparaten laten draaien, ook hele oude, om uit te zoeken welke versies van Android er zijn. Klik op Finish.

Omdat dit het eerste project is, zal Android Studio nog meer installeren, configureren en indexeren. Dat kan lang duren. Onderin het window op de statusbalk laat Android Studio zien wat er gebeurt. Volgende keer zal Android Studio dit project en nieuwe projecten sneller opstarten. (10 minuten)

Als alles goed is gegaan verschijnt dit scherm met de code die Android Studio heeft gegeneerd voor EersteApp. De Tip of the Day is weggeklikt en links in het project panel zijn de mappen open geklikt voor:

Rechts in het editor panel zie je de MainActivity class die in de onCreate() methode iets doet met de layout van het bijbehorende Android-scherm: activity_main.

Stap 4: Ontwerp scherm voor EersteApp

Klik op activity_main.xml en klik daarna op Hello World! Wijzig Hello World! bij voorbeeld in: tekst invullen. Klik in het rechter panel op textAppearence en verander textSize: 24sp en textStyle: B (=Bold).

Het is nu niet nodig om de layout helemaal perfect te maken. Met EersteApp willen we alleen wat informatie laten zien in plaats van Hello World!

Eventueel kan je vanuit onderstaande XML-code kopiëren en plakken.

activity_main.xml        
       
<?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:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="tekst invullen"
        android:textSize="24sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>
        

Stap 5: Schrijf Java-code voor EersteApp

Klik op MainActivity.java en edit de Java-code.

MainActivity.java

package nl.hva.pdiepen;

import android.os.Build;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        TextView tekst = (TextView) findViewById(R.id.textView);

        String t = Build.MANUFACTURER + " " + Build.MODEL
                + "\nAndroid: " + Build.VERSION.RELEASE
                + "\nAPI: " +Build.VERSION.SDK_INT
                + "\n\nPeter van Diepen";

        tekst.setText(t);        
    }
}
        

Stap 6: Computer voorbereiden voor upload naar mobiele telefoon

Door middel van een USB-kabel kan je EersteApp direct testen op een mobiele telefoon, maar dan moet je eerst zowel je computer als je mobiele telefoon voorbereiden op die verbinding.

Installeer de Google USB Driver in Android Studio.

Stap 7: Mobiele telefoon voorbereiden voor download van computer

Stap 8: Test EersteApp op een mobiele telefoon

Maak een verbinding tussen je computer en je mobiele telefoon met een USB-kabel. Klik op Run app in Android Studio. Dan verschijnt het volgende window. Klik op OK.

De eerste keer kan Android Studio nog niet de juiste software voor jouw telefoon genereren. Daarom krijg je eerst nog het volgende window.

Klik op Install and Continue.

Als dat allemaal weer goed is gegaan kan je weer op Finish klikken en verschijnt nu eindelijk jouw EersteApp op je mobiele telefoon!

Samenvatting les 1

Oefening 1

Maak jouw EersteApp, test EersteApp op verschillende Android-apparaten en stuur schermafdrukken naar je docent.