Material Design ist das Stichwort, das in vielen Köpfen nach der Vorstellung von Android L am meisten geblieben ist. Es steht für eine neue Android-Oberfläche mit zahlreichen optischen Änderungen, aber auch für die Vision von Google, die Nutzung aller Software-Anwendungen schöner und einfacher zu machen. Dieser Artikel klärt, was das Material Design bedeutet, wo man entsprechende Apps (nicht) findet und wie man selbst Apps damit entwickelt.
Dass das Material Design nicht einfach der neue Holo-Style ist, merkt man spätestens, wenn man die Einführung auf der Übersichtsseite zum neuen Material Design von Google gelesen hat. Das Ziel der Macher war es, ein grafisches System mit einer eigenen Designsprache zu entwickeln, das auf jedem Gerät und jeder Displaygröße funktioniert. Die Bedienung auf mobilen Geräten gehört dabei zwar zu den wichtigsten Dingen, aber die Bedienung über einen Touchscreen, via Sprache, Maus oder Keyboard soll in jedem Fall gleichbereichtigt sein:
„Develop a single underlying system that allows for a unified experience across platforms and device sizes. Mobile precepts are fundamental, but touch, voice, mouse, and keyboard are all ?rst-class input methods.“
Das Material ist dabei als Metapher zu verstehen, denn zwar besitzen alle Touch-Geräte eine glatte Oberfläche aus Glas oder Kunststoff, das Design soll aber im Kopf des Entwicklers und des Grafikers entstehen und sich an natürlichen Materialien orientieren, die über eine grobe Oberfläche verfügen und auf Licht mit Schatten reagieren. Daraus ergibt sich eine plastische Denkweise, die grafische Oberflächen nicht als flaches UI-Element betrachtet, sondern zum Beispiel als übereinander gelegte Holzscheiben oder Kartonplatten, oder in Entwicklersprache: Die Z-Achse.
Ein weiterer Grundsatz des Material Designs besagt, dass das Layout den Grundsätzen von Zeitschriften folgt und Farben und spezielle Akzente so eingesetzt werden sollen, dass diese die Bedienung möglichst intuitiv gestalten. Der dritte Grundsatz gilt den Bewegungen und Animationen. Diese sind nicht „just for fun“ da, sondern haben auch immer eine Bedeutung, und sei es nur, um dem Nutzer Feedback zu geben, das ein Fingertip erfolgreich war.
Was sich auf dem Papier als recht abstrakt anhört, lässt sich am einfachsten an ein paar Beispielen verdeutlichen. Google liefert davon gleich eine ganze Menge auf seiner Design-Webseite und zeigt wie man es richtig und falsch macht. So soll sich zum Beispiel ein Kreis, der wie ein Ball in einem Dialog erscheint und daraus wieder verschwindet auch wie ein Ball verhalten und nicht einfach ein Kreis sein, der ein und ausgeblendet wird.
Das bedeutet, dass der Ball durch seine Masse über einen bestimmten Bremsweg verfügt und eine gewisse Lässigkeit an den Tag legt. Ein größerer Ball bewegt sich langsamer, ein kleinerer schneller. Dies alles will das Material Design berücksichtigen, damit Benutzeroberflächen unter Android L und in allen zukünftigen Google-Anwendungen (auch für den Browser) so natürlich wie möglich wirken. Das Konzept hinter dem Material Design und sämtliche Möglichkeiten mit vielen Beispielen hat Google auch in einem PDF-Dokument zusammengefasst. Dabei sollte man nicht vergessen, dass das Ganze „Work in Progress“ ist.
Ja wo isses denn?
Apps in echtem Material Design gibt es aktuell nur auf der Entwicklerversion von Android L, da diese die nötigen Programmierschnittstellen für die neuen Funktionen mitbringt. Und selbst dort sind die meisten Apps noch pure KitKat-Anwendungen. Screenshots zeigen zwar, wie diese in der finalen Version einmal aussehen sollen, Handfestes alias Code gibt es aber noch nicht.
Apps im Material Design sind also noch ziemlich rar. Daran ändert auch der Umstand nichts, dass einige Entwickler ihre Anwendungen im Play Store updaten und stolz davon berichten, dass diese im Material Design gestaltet sind. Apps wie LocalCast, Flip, Wally, der neue Play Store, Chrome Beta oder Sliding Explorer greifen zwar Elemente des Material Designs auf und sehen in der Tat recht hübsch aus, ein echtes Android-L-Feeling stellt sich dabei aber nicht ein, und die Apps sind definitiv keine Android-L-Apps im neuen Design.
Google selbst weist in den Release Notes zur Android-L-Entwicklerversion darauf hin, dass man keine Apps im Play Store akzeptiert, die bereits von den neuen Möglichkeiten des Material Designs Gebrauch machen. Die entsprechenden Features funktionieren selbst dann nicht auf KitKat oder älteren Android-Versionen, wenn man die minimale Build-Version künstlich nach unten schraubt. Denn um echte Apps im Material Design zu Programmieren, braucht man das entsprechende Android L SDK und Apps die mit diesem SDK bzw. dem „API Level L“ gebaut wurden, lassen sich nicht auf älteren Android-Versionen installieren.
Nur eine App bei Google Play
Echte Apps im Material Design sind also noch rar und nicht im Play Store zu finden. Die einzige App, die eine Ausnahme davon macht (und auch für altere Geräte im Play Store verfügbar ist), ist die Google I/O 2014 App. Hier hat sich Google bewusst für das neue Design entschlossen, da dieses ja selbst Thema der Google-Hausmesse war. Inzwischen steht auch der komplette Quellcode der Google-I/O-App zum Download bereit, sodass sich Entwickler ein gutes Bild machen können, mit welchen Mitteln man die einzelnen Effekte programmiert hat.
In einem Blog-Eintrag beschreibt der Google-Entwickler Roman Nurik detailliert, welche Ziele des Material Designs man bei der Google-I/O-App umgesetzt hat und welche Schritte zu welcher Veränderung führten. So setzt man zum Beispiel auf kreisförmige und farblich auffällige Touch-Buttons für die zentralen Funktionen und hält gewisse Minimalabstände zum Displayrand ein, um die Bedienung zu vereinfachen. Auch hat man sich am Papier-Design orientiert, und sich überlegt, welche Elemente wohl auf einer Ebene liegen würden. So ergaben sich zahlreiche Änderungen im Vergleich zur Vorjahres-App.
Die Google-I/O-App hat auch zum ersten Mal die kreisrunden Buttons gebracht. Sie ist also quasi der Proof-of-Concept für eine App im Material Design. Sehr schön zu sehen ist auch das Konzept einer Hauptfarbe und eines farblichen Akzents, wobei man hier bei der Google-I/O-App noch die Farben der einzelnen Konferenz-Tracks mit ins Spiel gebracht hat.
Welche Schritte die App noch durchmachte, bis sie dann veröffentlicht wurde, erklärt der I/O-App-Entwickler Roman Nurik im Google-Blog ausführlich.
Real-Life-Beispiel: Twitter-Client Talon
Einer der ersten Entwickler, der eine App auf Android L und das neue Design optimiert hat, ist Luke Klinker mit seinem Twitter-Client „Talon, den er bereits zwei Tage nach der Google I/O im Material Design präsentierte. Auch hier führt der Gang zum Play Store ins Leere, dort gibt es auch für Android-L-Geräte nur die Version 3.0.2 zum Download. Die Variante im Material Design muss man sich auf der Webseite des Entwicklers als APK-Datei holen und manuell installieren. Die neueste Talon-Version mit Material Design stammt vom 28. Juli und bringt deutliche Verbesserungen gegenüber der ersten Android-L-Version mit. Den Downloadlink für Talon im Material Design findet ihr auf der Google+-Seite von Luke Klinker.
Talon benutzt eine Menge von Animationen. Praktisch jeder Fingertip ist von einer Animation begleitet. Das hängt damit zusammen, dass es zu sehr vielen Wechseln zwischen den einzelnen Activities kommt. Diese wiederum sind als Transition in Android L quasi von Haus aus animiert. Schön zu erkennen am Talon-Beispiel sind wiederum die kreisrunden Buttons für besondere Aktionen, zum Beispiel das Schreiben eines Tweets, oder um jemandem zu folgen. Die App macht vom Zurück-Pfeil Gebrauch, beherrscht die Sprachsuche und reagiert super smooth.
Talon zeigt aber auch schön, dass das Material Design alleine noch keine perfekte App macht. So hängt zum Beispiel der Hinweis für das Scrollen nach oben etwas in der Luft und auch die Sidebar links mit den kleinen Icons ist nicht besonders hübsch. Optisch ansprechender wäre es, dieses Element gleich unter der Timeline und auch in Orange zu präsentieren, sodass die Timeline die komplette Breite bekommt. Über eine Wischgeste gelangt man eh zu den gewünschten Seiten für Erwähnungen, Freunde, Retweets, Favoriten etc sodass die kleinen Icons überhaupt nicht permanent eingeblendet werden müssten. Wie der Entwickler im Blog erwähnt und uns auch aufgefallen ist, gibt es zudem viel zu viele Animationen, die überhaupt keine Bedeutung haben.
Die eigene App ans Material Design anpassen
Wann Android L genau erscheint und wie die Version schließlich heißen wird, weiß nur Google. Wir rechnen mit Oktober, es kann aber auch schon Ende September oder erst im November soweit sein. Wer seine App bereits jetzt optimal auf die kommende Android-Version anpassen möchte, braucht zunächst die passende SDK-Version für Android L und optimalerweise Android Studio als Entwicklungsumgebung. Anschließend angelt man sich am besten durch den Abschnitt zum Material Design in der Entwicklerdokumentation. Hier sind nicht nur die zwei neuen Widgets für Android L „RecyclerView“ und „CardView“ mit Beispielen beschrieben, sondern die Dokumentation erklärt auch die neuen Animationen anhand animierter GIFs aufschlussreich und zeigt, was es mit der Z-Achse auf sich hat.
Via Samples-Seite finden sich dann konkrete Code-Beispiele, die Google auf Github hostet. Zum Beispiel zu den grundlegenden Übergängen zwischen den einzelnen Aktivitäten (ActivitySceenTransitionBasic) oder wie man die Möglichkeiten der Z-Achse am besten ausnutzt (ElevationBasic und ElevationDrag). Ein Blick in den Quellcode zeigt, dass die meisten Samples vom Juni 2014 stammen, also schon ein paar Wochen alt sind. mit der finalen Version von Android L und dem finalen SDK dürften noch weitere Möglichkeiten dazukommen.
Einen sehr guten Einstieg bietet auch der ausführlich dokumentierte Quellcode der Google I/O 2014 App im Material Design für Android L.
Zusammenfassung
Material Design bezeichnet nicht nur das Aussehen von Android L sondern steht für ein komplett neues Konzept, das über Geräteklassen hinweg gültig sein soll (Chrome OS, Browser-Apps, Android Wear, Android Auto). Echte Apps im Material Desing gibt es nur für die Entwicklerversion von Android L (Nexus 5, Nexus 7 WiFi) und aktuell nur als APK-Datei zum Download aber nicht bei Google Play. Um eigene Apps auf Android L vorzubereiten und die Möglichkeiten des Material Designs zu nutzen, benötigt man das entsprechende „Android L Preview“ SDK und macht sich am besten mal mit den drei Grundkonzepten des Material Designs vertraut (Struktur durch Z-Achse, farbliche Akzente, Animationen mit Bedeutung).