29 Mrz

Wie du Icons erstellst und Farben verwaltest (Android App Tutorial)

In diesem Anfängertutorial zeige ich euch, wie ihr die Farben eurer App verändern könnt und ein simples Launcher-Icon erstellt. Der Einfachheit halber machen wir das hier im Tutorial mit einer bereits fertigen App.

 

Wie du Icons erstellst und Farben verwaltest

 

Allgemeines zu diesem Tutorial

In diesem Tutorial verwende ich die verbesserte Stoppuhr-App aus einem früheren Beitrag. Damit kann ich die Infos hier auf das Wesentliche reduzieren – nämlich die Farben und Icons.

Grundsätzlich ist empfehlenswert, dass ihr euch die Seiten zum Material Design von Google anseht. Für eine einfache App – zum Ausprobieren – können wir das aber auch erst einmal vernachlässigen.

 

Die Farben der App verändern

Wenn ihr bereits ein paar Probe-Apps erstellt habt, werdet ihr vermutlich gesehen haben, dass sie immer die selben Farben haben:

Verbesserte Stoppuhr-App: Hier sieht man die Standardfarben

Verbesserte Stoppuhr-App: Hier sieht man die Standardfarben

Die Farben findet ihr in der Datei res/values/colors.xml (und Verweise darauf in res/values/styles.xml):

Die Farben in res/values/colors.xml

Die Farben in res/values/colors.xml

Wie bereits erwähnt gibt es bei Google Richtlinien zum Material Design. Dazu gehören auch die in diesem Bild sichtbaren Farbbezeichnungen colorPrimary, colorPrimaryDark und colorAccent. Dank Websites wie materialpalette.com können wir mit wenigen Klicks auswählen, welche Farben wir verwenden wollen.

materialpalette.com

materialpalette.com

Der erste Klick entspricht der Primary Color, der zweite Klick der Accent Color. Die Website ermöglicht u.a. den Export als CSS- oder XML-Datei, legt eigenständig eine helle und eine dunkle Primärfarbe fest und beim Klick auf eines der Farbfelder wird der RGB-Code in die Zwischenablage kopiert.

Palette, erstellt mit materialpalette.com

Palette, erstellt mit materialpalette.com

Nach dem Verändern der /res/values/colors.xml (hier colorPrimary, colorPrimaryDark) sieht die App dann anders aus – nicht mehr so standardisiert. 😉 Wenn ihr z.B. die von materialpalette erstellte XML-Datei öffnet, könnt ihr den Inhalt in die colors.xml einfügen. Und in den Eigenschaften eines Objekts/Views durch den Verweis auf @color/Farbname die gewünschte Farbe verwenden. 🙂

Stoppuhr-App in neuen Farben

Stoppuhr-App in neuen Farben

 

Ein simples Launcher-Icon erstellen

Als nächstes basteln wir nun ein simples Launcher-Icon, in dem wir auch die hier ausgewählten Farben von materialpalette verwenden können. Der Vorteil ist, dass alles etwas einheitlicher aussieht.

Ihr könnt entweder diese Icons von Google herunterladen und benutzen, selbst eins als Vektor/Grafik/sonstwas basteln oder – was wir jetzt tun werden – ein Launcher-Icon mit einem verfügbaren ClipArt in Android Studios Asset Studio (File -> New -> Image Asset) erstellen.

Standard Launcher-Icon im Asset Studio

Standard Launcher-Icon im Asset Studio

Okay, das sollte eigentlich fast selbsterklärend sein. 😉 Wir wählen Clipart aus, suchen ein nettes Symbol und bearbeiten dann die Farben.

Launcher-Icon aus Cliparts auswählen

Launcher-Icon aus Cliparts auswählen.

Ihr werdet im nächsten Fenster gefragt, ob ihr die Datei ic_launcher wirklich überschreiben wollt. Jaaa. Wollt ihr. 😉 Und wenn ihr dann das nächste Mal eure App startet, könnt ihr euch über ein Launcher-Icon freuen, das nicht mehr aussieht wie alle anderen Probe-Apps. Und wenn es euch nicht gefällt, bearbeitet ihr es einfach, bis ihr ein Launcher-Icon habt, mit dem ihr zufrieden seid.

One of these things is not like the others: Selbstgemachtes Launcher-Icon zwischen den Standard-Icons

One of these things is not like the others: Selbstgemachtes Launcher-Icon zwischen den Standard-Icons