Android App erstellen

In diesem Artikel zeige ich euch wie man eine einfache Android App erstellen kann. Im letzten Teil habe ich euch ja bereits meine Developer Blog App vorgestellt. Diese verwendet ein einfaches WebView Element um damit eine Webseite anzuzeigen. Schritt für Schritt bauen wir uns nun eine eigene App und werden diese auch direkt am Computer testen.

Android App erstellen

Im letzten Artikel habe ich euch bereits die ersten beiden Schritte bei der Erstellung einer neuen App gezeigt. Im dritten Schritt muss man sich eine Vorlage aussuchen. Das Android Studio bietet jede Menge fertiger Vorlagen, für unsere erste App reicht eine leere Activity.

Im nun folgenden Dialogfenster müssen wir noch einen Namen für die Activity definieren. Wieder ein recht schwieriger Schritt… ich benötige dafür länger als für die Programmierung der restlichen App 😉

Damit ist das Grundgerüst der ersten App auch schon fertig. Im Hintergrund erstellt das Android Studio anhand unserer Angaben den Code und die ganzen Dateien unseres Projekts. Das kann etwas dauern, man landet dann umgehend in einer recht komplex gestalteten Arbeitsumgebung. Anfänger wird das vermutlich erst einmal abschrecken, aber keine Angst: mit ein wenig Übung findet man sich bald blind zurecht.

Die Menüs und die Fenster kann man beliebig konfigurieren, deshalb sieht euer Setup nicht zwingend so aus wie bei mir. Normalerweise gibt es im größten Bereich (meist rechts oben) den Codeeditor der vermutlich zu Beginn leer ist und sonst immer den Inhalt von Code Dateien anzeigt. Auf der linken Seite befinden sich mehrere verschachtelte Fenster die Einstellungen oder die Menüstruktur anzeigen. Für den Anfang sollte der Reiter „Projekt“ geöffnet sein, dieser Zeigt alle Unterordner unseres Projekts. Du findest dort unter dem Java Ordner eine mit der Company Domain und dem Namen der Activity benannten Java Datei den Einsprungspunkt der App.

Der Screenshot zeigt die Activity „DeveloperBlog“ und im Code Bereich wird der Source Code meiner ersten App angezeigt. Man beachte die onCreate Methode. Diese wird beim Start der App ausgeführt und ist der Einsprungspunkt.

Apps programmieren

In einer durch den Assistenten erstellten leeren Activity sieht die onCreate Methode in etwa so aus:

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

diesen Code solltest du nun im Android Studio sehen.  In den beiden Zeilen der Methode passiert nicht sehr viel. Zuerst wird die onCreate der Superklasse ausgeführt. Das bedeutet einfach, dass die onCreate Methode der AppCompatActivity ausgeführt wird. AppCompatActivity deshalb, da meine neu erstellte Activity von dieser Klasse alle Variablen und Funktionen geerbt hat:

public class DeveloperBlog extends AppCompatActivity {

Wenn du nicht weißt, was damit gemeint ist, dann solltest du noch einmal über objektorientierte Programmierung beziehungsweise Java Programmierung nachlesen.

Nach dem Aufruf der onCreate der Parent Klasse wird in der zweiten Zeile das activity_main Layout geladen. Dieses sieht man, wenn man unter dem Ordner res den Unterordner layout öffnet. Doppelklick der Datei öffnet entweder die XML (Layouts werden in einer XML Struktur definiert), oder einen grafischen Editor (je nach Einstellung). Das sieht dann in etwa so aus:

Anfänger können in diesem grafischen Editor per Drag and Drop Elemente Platzieren und bearbeiten. Profis werden wohl eher direkt im XML arbeiten. Du kannst die Ansicht unten zwischen Design und Text (XML) jederzeit umschalten. In der leeren Activity sind im Layout nur zwei Dinge definiert. Das ist zum einen ein RelativeLayout und darin eine TextView mit dem Text „Hello World“. Wenn du die leere Activity ausführst würdest du nur eine leere Seite mit dem Hello World Text sehen.

Erster Test

Bevor wir uns nun die leere Activity Schablone zur WebView App umbauen sollten wir noch lernen wie man die App testet. Das ist eigentlich ganz einfach. Man muss lediglich den grünen Pfeil oben in der Menüleiste klicken:

Es öffnet sich nun ein Dialogfenster in dem man auswählt wo man die App ausführen möchte. Moment mal… bei dir ist dort alles leer? Du hast zwei Möglichkeiten:

• du hast ein Android Smartphone oder Tablet über ein USB Kabel am Rechner angeschlossen
  es gibt zwei Probleme warum dein Gerät nicht angezeigt wird. Das kann zum einen sein, dass dein Betriebssystem das Gerät nicht erkennt – was in seltensten Fällen der Grund ist! Oder aber der Entwicklermodus ist unter Android nicht aktiviert. Wie man den Entwicklermodus aktiviert kannst du Googlen. Je nach Android Version ist das eine Option unter Einstellungen oder eine Kombination aus Klicks.
• du definierst dir einen Emulator und startest deine App damit
  über den „…“ Button neben „Android virtual device“ kannst du dir selber ein virtuelles Android Gerät zusammen klicken. Da kann man neben RAM, Prozessor, Displaygröße auch zahlreiche Informationen wie Android Version definieren. Am besten du wählst für den Start ein vordefiniertes Gerät der Nexus Reihe.

Die Auswahl mit angeschlossenem Handy und definierten Emulator sieht bei mir so aus:

Mit einem Klick auf „Ok“ wird deine App kompiliert und sofern es keine Fehler gibt auf dem Emulator oder am angeschlossenen Android Gerät gestartet. Achtung: der Emualtor braucht oft sehr lange zum Starten. Du solltest einen einmal gestarteten Emulator laufen lassen!

Meine WebView App

Du solltest nun in der Lage sein dich im Android Studio halbwegs zurecht zu finden und das aktuelle Projekt auf einem Android Gerät zu testen. Wenn du bereits die leere Hello World Activity erfolgreich getestet hast, dann kannst du diese nun zu einer WebView App umbauen.

Java Code

Wir beginnen beim Java Code der Activity. Diese enthält wie bereits erwähnt den onCreate Einsprungspunkt. Wir erweitern den Code um vier weitere Zeilen in der wir ein WebView Element aus dem Layout holen und dieses Konfigurieren:

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.webkit.WebView;
import android.webkit.WebViewClient;

import java.util.Locale;

public class DeveloperBlog extends AppCompatActivity {
    private WebView wv;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_developer_blog);

        //WebView Dinge
        wv = (WebView)findViewById(R.id.webView);
        wv.setWebViewClient(new WebViewClient());
        wv.getSettings().setJavaScriptEnabled(true);

        wv.loadUrl("https://developer-blog.net");
    }
}

Wir holen uns das WebView Element anhand seiner Id. Diese ist „webView“. Danach erlauben wir die Ausführung von JavaScript – welches ja heute fast alle Webseiten benötigen. Das funktioniert mit einem Aufruf der „setJavaScriptEnabled“ Funktion. Wir übergeben true, wir wollen diese Option aktivieren. Zuletzt müssen wir in der letzten Zeile noch eine URL laden. Ich lade bei meiner App meinen Blog, ihr dürft dort eure Webseite eintragen! Achtung: für das WebView Element benötigen wir weitere Java Klassen. In den ersten Zeilen der Datei gibt es dazu neue import Statements.

Layout

Im nächsten Schritt müssen wir das Layout anpassen. Zur Erinnerung: die leere Activity enthält derzeit nur ein Textelement mit einem Text. dieses müssen wir durch das WebView Element ersetzen. Dieses WebView Element soll Vollbild angezeigt werden. Der XML Code dafür sieht wie folgt aus:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="at.ziegelwanger_edv.developerblog.DeveloperBlog"
    tools:showIn="@layout/activity_developer_blog">

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        >
        <WebView android:id="@+id/webView"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />
    </LinearLayout>
</RelativeLayout>

Wie ihr seht ist in einem LinearLayout, dass sowohl in der Breite als auch in der Höhe den kompletten Bildschirm ausfüllt (fill_parent) ein WebView Tag mit der ID webView definiert. Auch dieses WebView Element ist Bildschirm füllend. fill_parent füllt immer nur das übergeordnete Element vollständig aus. Das heißt, dass WebView wird in voller Größe des LinearLayouts dargestellt und das LinearLayout in voller größer des übergeordneten RelativeLayouts. Das RelativeLayout ist dort mit match_parent an die max. Größe des Android Displays ausgerichtet.

Manifest

Wir haben nun Java Code, der eine URL öffnet und ein Layout in dem ein WebView Element definiert ist. Eigentlich sind wir fertig oder? Falsch. Das wichtigste einer jeden Android App ist seine Manifest Datei. Das ist quasi eine globale Konfigurationsdatei in der alle App Informationen für das Android Betriebssystem abgespeichert sind. Man findet dort Infos wie zum Beispiel der Name der App – dieser wird in zahlreichen Menüs im Android Betriebssystem verwendet. In dieser Datei werden auch die Rechte verwaltet, die eine App haben darf. Wenn du eine App aus dem Store lädst wirst du immer gefragt, ob du der App Zugriff auf bestimmte Daten wie Fotos, Kontakte, Internet usw. geben willst. Unsere App benötigt Zugriff auf der Internet, sonst wird die WebView die Webseite nicht laden können. Du definierst die Rechte dafür in  der Manifest Datei mit folgender Zeile:

<uses-permission android:name="android.permission.INTERNET" />

Diese Zeile einfach vor dem schließenden </manifest> Tag einfügen.

Jetzt darfst du die App testen.

Fazit

Ich habe dir gezeigt wie du eine Android App erstellen kannst. Aus der leeren Activity wird mit wenig Code eine WebView App die eine Webseite darstellen kann. Als nächstes zeige ich dir wie man die App Icons austauscht beziehungsweise eigene Icons erstellt und wie man die App vom Debug Modus in den Release Modus bekommt und im Google Play Store veröffentlicht.

Ich hoffe die Anleitung ist verständlich dokumentiert. Bei Fragen einfach als Kommentar posten!