Apps... Wie macht man sowas? | Android
17.07.2016
7 minute read

Der erste Post der App-Serie \o/

Zurück zur Übersicht >>


Diese Post-Serie entstand für das Forum “elitepvpers”.
Einen Backlink zum zugehörigen Thread findest du hier


1. Vorbereitung

In diesem Beispiel werde ich Windows benutzen. Die Android Devtools funktionieren aber auch auf macOS und Linux.

Ob ihr eure eigene IDE mit Plugins benutzt (zb IntelliJ IDEA) oder Android Studio ist egal. Wichtig ist nur, dass ihr euch zurechtfindet.

In diesem Beispiel werden wir aus Gründen der Einfachheit aber Android Studio benutzen.

Android Studio hat unter anderem den Vorteil, dass es euch nerviges rumhantieren mit der PATH Variable und dem Android SDK erspart. Alles wichtige kommt bereits mit dem Setup oder kann in einer schönen GUI nachinstalliert werden.

BTW: Falls ihr eure vorhandenen Einstellungen von IntelliJ oder PHPStorm übernehmen möchtet schaut euch das Plugin Settings Repository an. Eventuell werde ich zu dem Thema auch später nochmal etwas posten.

2. Installation

Geht auf developer.android.com und klickt auf “Download Android Studio”. Die Installation selbst ist relativ selbsterklärend. Wichtig ist nur, dass ihr ALLE Komponenten installiert.

Nach dem Start werdet ihr vom “Android Studio Setup Wizard” begrüßt. Dieser ist wie die Installation selbsterklärend und eigentlich reicht es durchgehend auf “Next” zu klicken. Wichtig ist nur, dass ihr ALLE SDK Components installiert:

Intel HAXM wird euch helfen schnell und stressfrei auf virtuellen Android Handys zu testen. Ohne HAXM solltet ihr euch darauf einstellen, dass Geräte mehrere MINUTEN booten können und selbst dann nur schleppend Funktionieren. Das liegt daran, dass viele emulierte Handys eine ARM/MIPS CPU verwenden die unsere x86/x64 CPU erstmal emulieren muss. Abhilfe schafft wie erwähnt HAXM (emulation auf Hardwareebene) und/oder ein AVD mit x86 CPU.

Wie ihr euer AVD auf x86 umstellt werde ich später noch zeigen.

Nachdem alles installiert ist seht ihr den IntelliJ Homescreen:

3. Projekt erstellen

Wir erstellen ein neues Projekt und geben die Daten ein:

Wozu die Company Domain? Bei Java werden Klassen in Pakete aufgeteilt. Diese haben per Konvention die umgedrehte Domain des Entwicklers als Präfix.

Aus lukas.moe wird also moe.lukas.Paket.Klasse

Wenn ihr keine Domain habt ist das auch nicht schlimm. Rein Syntax-technisch ist es völlig egal was ihr eintragt. Nehmt aber irgendetwas, dass ihr vor alle eure Apps stellen könnt, um es sauber zu halten. Ein Beispiel wäre Nachname.Name.Appname.Paket.Klasse

Auf dem nächsten Screen werden wir aufgefordert das API Level zu wählen.

Ein API Level ist in Android nichts weiter als eine neue Version der API’s die euch zur Verfügung stehen um Apps zu entwickeln. Jedes mal wenn Google eine neue Version von Android veröffentlicht wird das API Level um 1 erhöht. Mit jeder Erhöhung werden entweder Features hinzugefügt, entfernt oder als deprecated markiert.

Es ist also wichtig sich im Voraus zu überlegen ob man eine breite Masse and Handys unterstützen will oder Zugriff auf die neusten Features möchte.

Meistens ist aber ersteres der Fall.

Ich arbeite gerne mit API Level 15 weil es rund 97% der kaufbaren Android Geräte abdeckt.

Als nächstes fügen wir die erste Activity hinzu. Für den Anfang könnt ihr euch Activities wie die Fenster eines normalen Programms vorstellen.

Wir nehmen hier die Empty Activity. Alles zu Generieren wäre ja langweilig : ^)

Als Namen wähle ich hier “FacebookActivity”. Den Layout Namen braucht ihr nicht zu ändern. Android Studio generiert ihn automatisch aus dem Activity Namen.

Nach dem klick auf “Next” müsst ihr kurz warten. Gradle wärmt den Cache auf und versucht schon mal die App zu kompilieren. Dadurch werden die Compilezeiten später deutlich kürzer.

Nach dem Start wird Android Studio anfangen das Projekt zu indexieren. Dies kann je nach dem wie schnell euer Rechner ist einige Zeit dauern.

Sobald alles fertig ist befinden wir uns in dieser Ansicht:

Jetzt kann’s losgehen!

4. Programmieren

Als aller erstes öffnet ihr die FacebookActivity.java. Falls die Klasse noch AppCompatActivity extended ändern wir dies nun zu

public class FacebookActivity extends Activity {
   ...
}

In der Funktion void onCreate(Bundle) befindet sich der Code der direkt nach dem öffnen der Activity ausgeführt wird.

In unserem Fall ist das lediglich ein super.onCreate(); (weiterreichen des Events an die Elternklasse) und ein setContentView(R.layout.activity_facebook); welches die Activity rendert und anzeigt.

Weiter geht’s im Design. Klappt euch den res Ordner aus und öffnet das Layout unserer Activity.

Wie ihr seht wurde bereits ein kleines “Hello World” generiert.

Laaangweilig! Klickt auf das “Hello World” und entfernt es mit der Entf-Taste. Dann packt ihr euch das “WebView Widget” und zieht es in die Activity.

Wechselt unten am Rand von “Design” auf “Text”. Wir schreiben jetzt ins WebView XML Element folgende Attribute:

<WebView
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/webView"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true"
/>

Dadurch wird unser Element auf die volle breite und höhe gezogen und automatisch gecentert. Allerdings haben wir immer noch diesen hässlichen weißen Rand:

Um den zu entfernen tauschen wir die @dimen’s im RelativeLayout Element durch 0dp.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="0dp"
    android:paddingLeft="0dp"
    android:paddingRight="0dp"
    android:paddingTop="0dp"
    tools:context="moe.lukas.facebookextreme.FacebookActivity">

Nun müssen wir der WebView noch sagen was sie tun soll. Als erstes fügen wir über der onCreate Methode eine Variable ein in der wir das WebView Objekt speichern.

public class FacebookActivity extends Activity {

  private WebView webView;

  ...
}

Das ist nötig weil wir später noch eine Zweite Methode haben werden die auch Zugriff auf die WebView braucht.

Nun schreiben wir folgenden Code in die onCreate Methode der FacebookActivity:

// Erstelle ein neues WebView Objekt
webView = (WebView) findViewById(R.id.webView);

// Rufe die Settings ab und modifiziere sie
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);

Die WebView weiß nun, dass sie eine Website mit Javascript anzeigt. Da dies aus Sicherheitsgründen nur verwendet werden sollte wenn es notwendig ist wird euch Android Studio eventuell einen Fehler ankreiden.

In diesem Fall schreibt ihr über das @Override die @SuppressLint("SetJavaScriptEnabled") Annotation um den Fehler zu ignorieren.

Da wir wissen wollen was unsere App tut wenn sich nichts auf dem Bildschirm bewegt bauen wir noch einen kleinen “Ladebildschirm”.

Schreibt folgendes ans Ende der onCreate() Methode:

final ProgressDialog progress = ProgressDialog.show(FacebookActivity.this, "Einen moment noch!", "Seite wird geladen...");

Damit wir den “Ladebildschirm” auch im richtigen Moment ein/ausblenden können müssen wir noch einen WebViewClient Programmieren und mit ihm die entsprechenden Events abfangen.

Um Text zu sparen werde ich mir mühe geben den Code so gut wie möglich zu Kommentieren :) Schreibt folgendes in die onCreate() Methode:

webView.setWebViewClient(new WebViewClient() {
  /*
   * Diese Methode wird jedes mal aufgerufen wenn sich die URL ändert.
   * Der Perfekte Moment also um den Loader anzuzeigen!
   */
  public boolean shouldOverrideUrlLoading(WebView wv, String url) {
    if (!progress.isShowing()) {
      progress.show();
    }

    wv.loadUrl(url);

    return true;
  }

  /*
   * Wird aufgerufen sobald die Seite fertig geladen wurde.
   * Perfekt um den Loader wieder zu verstecken.
   */
   public void onPageFinished(WebView view, String url) {
     if (progress.isShowing()) {
       progress.dismiss();
     }
   }
});

Als letztes braucht ihr dann nur noch anzugeben welche URL geladen werden soll:

webView.loadUrl("http://m.facebook.com");

Damit könnten wir eigentlich schon anfangen zu testen. Bevor wir das machen fügen wir aber der Klasse FacebookActivity noch eine Methode hinzu, damit unser “Zurück”-Button am Handy auch etwas sinnvolles zu tun hat.

@Override
public void onBackPressed() {
  if (webview.canGoBack()) {
    webview.goBack();
  }
}

Damit die App zur Laufzeit auch funktioniert müssen wir Android noch sagen, dass wir Zugriff aufs Internet haben wollen.

Öffnet dazu die AndroidManifest.xml:

Dann fügt ihr eine Permission direkt unter dem manifest Element ein:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="moe.lukas.facebookextreme">

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

...
</manifest>

5. Testen

Klickt oben in der Toolbar auf den “Play”-Button. Es öffnet sich ein Fenster und ihr müsst kurz warten bis ADB gestartet ist.

Klickt unten auf “Create new emulator”. Klickt auf das Nexus 5 und dann auf “Next”. Wählt hier nach Möglichkeit ein Image aus dessen ABI x86 ist. Zum Schluss wechselt ihr noch ins Hochformat und aktiviert Hardwaregrafik.

Euer AVD wird nun erstellt und befindet sich danach in der ADB Geräteliste. Nach dem Klick auf “Ok” in der Geräteliste fährt euer Simulator hoch und startet die App.

6. Deployment

Um die App zu verteilen müsst ihr nichts mehr machen. Jedes mal wenn ihr auf “Build” oder “Play” klickt wird eine neue APK erstellt. Diese findet ihr unter:

X:\Pfad\Zum\Projekt\FacebookExtreme\app\build\outputs\apk

Die app-debug.apk könnt ihr nun umbenennen, beim Hoster eures Vertrauens hochladen und dann verteilen :)

Wie ihr die App bei Google Play einstellt wurde hier bewusst nicht gezeigt. Dieser Prozess ist sehr gut dokumentiert und sollte keine Hürde darstellen.


If you like when I write words, you can fund future blogging (and other cool things) by throwing some spare money into my dev-fund.
It's very much appreciated.



comments powered by Disqus