KLWP-Tutorial: Pimp my Android mit dem Kustom Live Wallpaper Maker

Android ist so vielseitig, dass der Nutzer jeden noch so winzig kleinen Aspekt an der Software und der Optik ändern kann. Zum Beispiel über ein besonderes Hintergrundbild mit Bewegung und speziellen Widgets. Den perfekten Baukasten dafür bietet der Kustom Live Wallpaper Maker. Wie man die App benutzt, beschreibt unser Tutorial.

Es muss nicht immer gleich ein kompletter Launcher sein. Denn ein echter Launcher bringt oft fast zu viele neue Funktionen mit, wie zum Beispiel das Justieren des Bildschirmrasters oder der Möglichkeit, die Icon-Sets von Drittanbietern zu installieren und zu nutzen.  Eine auf den ersten Blick ganz einfache Lösung, sein Handy zu pimpen, besteht im Setup eines (bewegten) Hintergrundbilds. Auch das ist mit KLWP möglich, aber noch viel mehr!

Neben dem Standard-Hintergrundbild mit leichter Bewegung beim Scrollen unterstützt Android seit Urzeiten auch bewegte Hintergründe, so genannte Live-Wallpaper. Es ist ein interaktives Bild, das entweder automatisch animiert ist oder zusätzlich auf Benutzereingaben reagiert. Und genau hier setzt meine persönliche Lieblings-App für das Herstellen eigener Live-Wallpaper an: KLWP — Kustom Live Wallpaper Maker.

Was ist KLWP?

Modifizierungs-Apps gibt es massig im Google Play Store und alle verfolgen ihre eigenen Ansätze. Hervorzuheben sind hier vor allem UCCW — Ultimate Custom Clock Widget und Zooper, beides Apps, die eigene Widgets entwerfen lassen. Doch beide scheiterten bei mir vor allem auch immer an ein und demselben Punkt: Irgendwann hapert es am Platz auf dem Bildschirm und meine Gesten wie der Doppeltipp auf freie Flächen, um meine Galerie-App zu öffnen, funktionieren so nicht mehr.

KLWP verfolgt hier einen sinnigeren Ansatz. Man schafft sich sein eigenes Live-Wallpaper, auf welchem alle nutzbaren Elemente in den Bildschirmhintergrund integriert sind, sodass man sogar noch andere Widgets darüber legen kann, insofern das denn optisch sinnvoll ist. Selbst Icons können so starr oder animiert ins Bild gebracht werden und per Fingertip wird mit einem Mal der gesamte Screen geräumt und nur noch die Uhrzeit prangt in der Mitte.

Das klingt wie das Gebrabbel eines Irren und ist schlecht nachvollziehbar? Nun, dann folge einfach meinem Tutorial, das dir KLWP näher bringt und dir die einzelnen Elemente der App genauer erklärt.

Mit KLWP zum eigenen Wallpaper

Du wirst mit Hilfe dieses Tutorials ein Wallpaper erzeugen, das zum einen über einen FAB (Floating Action Button) verfügt, der alle deine Favoriten-Apps auf Fingertipp zum Vorschein bringt, sowie einige weitere Spielereien parat hält, die dem Ganzen optisch die Krone aufsetzen. Und mit ein wenig Ausprobieren und Üben wirst du sicher in kurzer Zeit noch wesentlich aufwändigere Projekte generieren können.

Zu allererst solltest du Dir natürlich KLWP aus dem Play Store herunterladen und installieren. Die App ist für die meisten Funktionen bereits in der kostenlosen Grundversion gut nutzbar. Allerdings kann ich nur jedem, der später ein wenig umfangreicher damit designen möchte, empfehlen, den Pro Key für derzeit 2,99€ zu erwerben. Es lohnt sich wirklich.

Des Weiteren solltest du Dir bereits ein gewünschtes Hintergrund-Motiv parat gelegt haben, auf welchem dein Live-Wallpaper später aufbauen soll. Tolle Hintergrundbilder findest du zum Beispiel über die App Wally. Ich habe mich für folgendes Bild entschieden:

Für den so genannten “Floating Action Button” — kurz FAB — benötigst du noch entsprechende Icons, die dann nach einem Tipp auf den Button hinter diesem hervorschnellen sollen und damit nutzbar werden.

Diese gibt es unter anderem im Icon-Archive. Einfach den Suchbegriff eingeben und von den Resultaten am besten die 512×512 px — Variante herunterladen und als *.png-Datei speichern. Somit stellst du sicher, dass das Icon keinen weißen oder schwarzen Hintergrund hat, sondern gänzlich freigestellt ist. Denn das PNG-Format unterstützt im Gegensatz zu JPG Transparenz.

Ich habe mich hier für die Icons von Twitter, WhatsApp, Google+ und Hangouts entschieden. Welche Apps du am meisten nutzt und welche Icons du dafür einsetzen möchtest, musst du selbst entscheiden.

Öffne nun erst einmal die KLWP-App und schon wirst du feststellen, dass die Oberfläche stark an einen Editor erinnert. Die einzelnen Bedienelemente werde ich zum Großteil in den nächsten Schritten noch genauer erklären.

Tippe oben links auf das Burgermenü (die 3 waagerechten übereinander gelagerten Striche) und im folgenden Fenster auf Lade Voreinstellungen”/”Load Presets. Es folgt ein Bildschirm mit einigen vordefinierten Voreinstellungen, die KLWP von Haus aus mit sich bringt, um Dir einige Grundfunktionen zu demonstrieren.

Tippst du unten rechts nun auf den Plus-Button öffnet sich eine Auswahl, über die du mit der Schaltfläche “Neu”/”New” eine neue Voreinstellung (quasi ein neues Projekt) startest, welche am Ende das fertige Wallpaper werden soll.

Die wichtigsten Funktionen findest du unterhalb der Bildvorschau — die Auswahlbereiche für “Elemente”, “Hintergrund”, “Schicht”, “Position” und “Globale”. Du wirst die Bereiche Elemente, Hintergrund und Globale benötigen.

Was also ist eine Globale? Im Grunde lässt sich eine Globale am besten erklären als Auslöser, der immer dann aktiviert wird, wenn bestimmte Elemente später ihre Funktionen starten wollen. Bei dir werden das vorrangig die Bewegungen des FAB und der einzelnen Anzeigelemente sein, die nach Fingertip ausgeführt werden sollen.

Wechsle also zum Reiter “Globale” und tippe oben rechts auf das große graue + Symbol, um eine neue Globale zu erstellen. Als Namen definierst du hier “FAB” und als “Typ” wählst du “Ein/Aus Schalter”.

Nun wechsest du zurück in den Reiter “Hintergrund” und wählst über die Schaltfläche “Typ” statt “Einfarbig” “Bild” aus. Jetzt lässt sich eine Auswahl tiefer das entsprechende Motiv auswählen und sogar noch bearbeiten. “Scrollen” meint hier die Bildbewegung beim durchwischen der einzelnen Homescreen-Desktopseiten. Ich wähle hier “Keins” aus, da mein Motiv starr sein soll. Auch die anderen Optionen lasse ich hier unangetastet.

Was nun kommt, solltest du Dir während des Bearbeitens immer wieder verinnerlichen: Das Speichern-Symbol oben rechts aktiviert lediglich das derzeitige Bild als Live-Wallpaper. Dafür muss man beim Erstspeichern den Dialog mit “Ja” quittieren und das Live-Wallpaper einrichten. Dieser Vorgang speichert dein Projekt aber NICHT als Voreinstellung. Um das zu tun musst du  über das Burgermenü auf “Voreinstellungen exportieren” tippen, dem Projekt einen Namen geben und am besten auch noch dich als Autor festlegen.

Voreinstellungen exportieren: Nicht vergessen, das Projekt über Voreinstellungen exportieren zu speichern!

Beachte diesen Unterschied bitte durchgehend beim Zwischenspeichern der Änderungen. Ansonsten gibt es später lange Gesichter.

Buttons, Buttons, Buttons

Einer der wichtigsten Inhalte wird der Floating Action Button darstellen. Auf Berührung soll dieser sich drehen, seine Farbe soll verblassen und deine favorisierten Apps sollen sich im Anschluss ausklappen und zu bedienbaren Schaltflächen werden, die die entsprechenden Apps starten.

Dazu lädst du erneut ein Bild als Element ins Projekt. Dieses Mal jedoch den Plus-Button, der als Hautptrigger dienen soll. Ist dies getan, positionierst du ihn noch an der gewünschten Stelle. Ich habe hier eine Ecke unten rechts im Bild gewählt, da diese mit dem Daumen gut erreichbar ist.

Es werde Bewegung

Nun kommt der „bewegende Teil“ der Bastelei  ;) Der Button soll animiert werden. Zuvor sollte allerdings noch unter „Berührung“ festgelegt werden, dass bei Fingertipp auf den FAB die Globale „FAB“ geschaltet wird. Damit werden alle damit verknüpften Animationen (aller Elemente) bei Knopfdruck ausgeführt. Nun springst du in den Reiter „Animation“, tippst auf das graue + Symbol und erstellst eine neue Animation vom Typ „Drehen“. Unter „Global“ wählst du deine bereits bekannte Globale „FAB“ aus. Diesen Schritt musst du immer vornehmen, wenn du möchtest, dass die Animation beim Starten derjenigen Globale ausgeführt wird.

Nun müssen noch ein paar wenige Einstellungen vorgenommen werden. Setze die „Dauer“ auf den Wert 5. Das ist die Animationsgeschwindigkeit. Hier hilft es, mit den Werten zu experimentieren. Den Eintrag „Anzahl“ solltest du auf 63 stellen. Hierbei handelt es sich um die prozentuale Drehung des Buttons. 63% lassen das + im Button bei absolvierter Drehung als x erscheinen. So kann man die Änderung wenigstens vernünftig erkennen.

Ist dies erledigt speicherst du zwischen und erstellst eine weitere Animation. Typ „Farbfilter ausblendend“, Dauer auf 5 — ansonsten ändere nichts. Nun wird der Button zusätzlich während der Drehung ausgegraut und bekommt bei erneutem Antippen seine Farbe wieder zurück.

Nun folgen die App-Schaltflächen. Dafür werden wieder die entsprechenden Icon-Dateien ins Projekt geladen. Ich nehme hier erst einmal das Google+ Icon und platziere es direkt mittig über den Floating Action Button. Er bekommt 2 Animationen. Zum Einen die Animation „Scrollen“. Dauer auf 3, Geschwindigkeit auf 15 und Winkel auf 180. Die Geschwindigkeit definiert hier die Distanz, die das Icon beim Auslösen vom Ursprungspunkt in die entsprechende Richtung (hier der „Winkel“) befördert wird. 15 sorgt hier dafür, dass das Icon quasi direkt neben den FAB platziert wird und nur ein wenig Platz zwischen beiden lässt. Auch hier hilft Experimentieren mit den Werten. Außerdem kommt nun die Animation „Einblenden“ dazu mit der Dauer 5. Damit erscheint das Icon beim Herausscrollen aus dem FAB erst wirklich und verschwindet beim Zurückschnellen wieder hinter diesem.

Gehe nun zurück in die Elemente-Übersicht und tippe auf das kleine Kästchen hinter deinem Google+ Bild. Nun kannst du über die Aktionsleiste oben dieses Elemtent kopieren und über das Clipboard-Symbol oben rechts im Anschluss wieder einfügen. Wähle nun das Kästchen des kopierten Bildes aus, benenne es über das Stiftsymbol um (hier in „Twitter“) und ändere im Anschluss im Element selbst das Bild, indem du das Twitter-Icon auswählst. Das Symbol befindet sich durch diese Methode bereits perfekt platziert und hat ebenso bereits alle Animationen integriert, die es benötigt. Lediglich die Geschwindigkeit der „Scrollen“-Animation muss geändert werden, am besten auf den Wert 30, damit das Icon nicht direkt über dem ersten Icon liegt beim Ausklappen.

Diesen Kopiervorgang wiederholst du nun noch mit dem WhatsApp- und dem Hangouts-Icon, stellst die Animationsgeschwindigkeit auf 45 beziehungsweise 60 und speicherst wieder. Zu guter Letzt erstellst du Dir noch ein neues Element vom Typ „Text“. Die Standard-Option dafür ist die Uhrzeit, unterteilt in Stunden, Minuten und Sekunden. Tippst du auf die Uhrzeit im Eingabefeld „a-z Text“ kannst du oben im Eingabeformat die beiden kleinen „ss“ aus dem Format „$df(hh:mm:ss)$ entfernen. Das löscht die Anzeige der Sekunden. Alle weiteren Möglichkeiten für das Textelement kannst du Dir später einmal zu Gemüte führen. Die Anzeigeoptionen sind gefühlt endlos! Akkustand, Zeitabschnitte, nächster anstehender Alarm und und und. Alles ist möglich.

Die Uhrzeit verschiebst du am besten an den linken oberen Bildschirmrand und dann nach links hinaus aus dem Bild, sodass sie ganz „unsichtbar“ wird. Nun fügst du wieder eine Animation mit Globale „FAB“ und Typ „Scrollen“ ein. Ich habe hier die Geschwindigkeit 70 gewählt und den Winkel 0.

Somit bewegt sich meine Uhrzeit entgegen den Icons nach rechts genau in die Bildschirmmitte.

Was nun noch fehlt, ist, dass Ihr jedem Button unter seiner Option „Berührung“ den Befehl „App starten“ und dann die entsprechende auszuführende App (hier also Google+, Twitter, WhatsApp und Hangouts) hinzufügt. Auch der Uhrzeit kann dieser Befehl gegeben werden. Hier kann zum Beispiel die Uhren-App gestartet werden, von der aus dann Weckzeiten eingestellt werden können.

Es wird ein letztes Mal gespeichert und als Voreinstellung exportiert. Das Resultat sollte dann wie folgt aussehen:

Was du Dir hiermit erstellt hast, ist ein Live-Wallpaper, das auf den ersten Blick sehr minimalistisch aussieht, nach einem Tipp auf den Floating Action Button allerdings sehr hübsch animiert all‘ deine wichtigen Apps auffächert und ebenfalls die aktuelle Uhrzeit ins Bild holt. Zusammen mit den richtigen Einstellungen eines alternativen Launchers (zum Beispiel mit dem Nova-Launcher) holt man zusätzlich noch ein wenig mehr aus seinem Wallpaper heraus. So entstehen jeden Tag neue Screens, die deine Mitmenschen begeistern werden.

Noch lange nicht alles!

Mit dem Kustom Live Wallpaper Maker kannst du noch viele weitere Dinge anstellen und deinen Homescreen so richtig voll ausnutzen. Trau dich und sei kreativ — es kann so einfach sein, wenn man nur ein wenig Zeit investiert!