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.
Wir werden hier 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
[Only registered and activated users can see links. Click Here To Register...] an.
2. Installation
Geht auf
[Only registered and activated users can see links. Click Here To Register...] und klickt auf "Download Android Studio".
Die Installation selbst ist relativ selbsterklärend.
Wichtig ist nur, dass ihr ALLE Komponenten installiert.
[Only registered and activated users can see links. Click Here To Register...]
Nach dem Start werdet ihr vom "Android Studio Setup Wizard" begrüßt.
Dieser ist, wie die Installation, relativ selbsterklärend und eigentlich reicht es durchgehend auf "Next" zu klicken.
Wichtig ist nur, dass ihr ALLE SDK Components installiert:
[Only registered and activated users can see links. Click Here To Register...]
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 das viele Handys eine ARM/MIPS CPU verwenden die unsere x86/x64 CPU erstmal emulieren muss.
Abhilfe schafft wie erwähnt HAXM (emulation auf Hardwareebene) und 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:
[Only registered and activated users can see links. Click Here To Register...]
3. Projekt erstellen
Wir erstellen ein neues Projekt und geben die Daten ein:
[Only registered and activated users can see links. Click Here To Register...]
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.Vorname.Appname.Paket.Klasse.
Auf dem nächsten Screen werden wir aufgefordert das API Level zu wählen.
[Only registered and activated users can see links. Click Here To Register...]
Ein API Level ist in Android nichts weiter als eine neue Version der APIs 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 an 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 : ^)
[Only registered and activated users can see links. Click Here To Register...]
Als Namen wähle ich hier "FacebookActivity".
Den Layout Namen braucht ihr nicht zu ändern.
Android Studio generiert ihn automatisch aus dem Activity Namen.
[Only registered and activated users can see links. Click Here To Register...]
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:
[Only registered and activated users can see links. Click Here To Register...]
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
Code:
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();" welches die Activity rendert und anzeigt.
Weiter geht's im Design.
Klappt euch den "res" Ordner aus und öffnet das Layout unserer Activity.
[Only registered and activated users can see links. Click Here To Register...]
Wie ihr seht wurde bereits ein kleines "Hello World" generiert.
[Only registered and activated users can see links. Click Here To Register...]
Langweilig!
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.
[Only registered and activated users can see links. Click Here To Register...]
Wechselt unten am Rand von "Design" auf "Text".
Wir schreiben jetzt ins "WebView" XML Element folgende Attribute:
Code:
<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:
[Only registered and activated users can see links. Click Here To Register...]
Um den zu entfernen tauschen wir die @
[Only registered and activated users can see links. Click Here To Register...]'s im "RelativeLayout" Element durch "0dp".
Code:
<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.
Code:
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":
Code:
// Erstelle ein neues WebView Objekt
webView = (WebView) findViewById(R.id.webView);
// Erlaube JavaScript auf Websites
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 @
[Only registered and activated users can see links. Click Here To Register...]" 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:
Code:
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:
Code:
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:
Code:
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.
Code:
[MENTION=295804]Override[/MENTION]
public void onBackPressed() {
if (webview.canGoBack()) {
webview.goBack();
}
}
Damit die App zur Laufzeit auch funktioniert müssen wir Android noch sagen, dass wir Zugriff auf's Internet haben wollen.
Öffnet dazu die "AndroidManifest.xml":
[Only registered and activated users can see links. Click Here To Register...]
Dann fügt ihr eine Permission direkt unter dem "manifest" Element ein:
Code:
<?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.
[Only registered and activated users can see links. Click Here To Register...]
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\out puts\apk"
Die "app-debug.apk" könnt ihr nun umbenennen, beim Hoster eures Vertrauens hochladen und dann verteilen :)
Wie ihr die App signiert und bei Google Play einstellt wurde hier bewusst nicht gezeigt.
Dieser Prozess ist sehr gut dokumentiert und sollte keine Hürde darstellen.
