Big App

Was muss bei Bildern in Android-Studio beachtet werden?

Wenn du Android-Apps entwickelst, musst du stets darauf achten, dass es in der großen, weiten Android-Welt sehr viele unterschiedliche Geräte (Tablets, Smartphones, Smartwatches, Fernseher) mit verschiedenen Bildschirmgrößen, -auflösungen und Pixeldichten gibt.

Dieser Umstand ist bei der Verwendung von Bildern in deiner Android-App enorm wichtig, da ansonsten deine Bilder auf bestimmten Geräten verzerrt oder verpixelt dargestellt werden.

Info: Bei der Pixeldichte handelt es sich um die Anzahl der Bildpunkte (Pixel) auf einem physikalischen Bildschirm-Bereich, die mit der Einheit "Dots-per-Inch (dpi)", also Punkte pro Zoll, angegeben werden.  Die Bildschirmauflösung gibt die Anzahl der physikalischen Pixel auf einem Bildschirm in vertikaler und horizontaler Richtung an, wobei die Auflösung von der Größe eines Bildschirms abhängig ist.  

Es wird in Android-Studio zwischen gewöhnlichen Bildern (z.B. Hintergrundbildern) und Icons (z.B. App-Verknüpfungen) unterschieden, die in unterschiedlichen Ordnern abgelegt werden. So landen normale Bilder in den „drawable„-Ordnern und Icons in den „mipmap„-Ordnern eines Projekts und es muss bei beiden Ordner-Arten jeweils die entsprechende Pixeldichte als Suffix angehängt werden, also z.B. „drawable-mdpi“ (beachte dabei den Bindestrich zwischen Präfix (drawable) und Suffix (mdpi). Folgender Screenshot zeigt die verschiedenen Ordner für Bilder und Icons:

Info: Der "drawable"-Ordner ohne Suffix entspricht dem "drawable-mdpi"-Ordner, der hier nur aus Gründen der Rückwärts-Kompatibilität zu älteren Apps extra in der Ordner-Struktur auftaucht. Außerdem zeigt Android-Studio bis auf den "drawable"-Ordner ohne Suffix und den "drawable-v24"-Ordner keine anderen "drawable"-Ordner an. Alle weiteren Drawable-Ordner müssen vom Android-Entwickler selbst hinzugefügt werden, was wir dir später zeigen werden.

Bei der Erzeugung eines neuen virtuellen Android-Geräts im AVD-Manager von Android-Studio kannst du bei den vorgegebenen Hardware-Profilen für TV-Geräte, Wearables, Smartphones und Tablets die „Bildschirmgröße in Zoll (Size)„, die „Auflösung (Resolution)“ und die „Pixedichte (Density)“ sehen. Wenn du eines der Profile in der Fenstermitte auswählst, dann wird dir rechts daneben zudem z.B. die Bildschirmgröße als Wort (z.B. large) und nicht in Zoll (z.B. 5,5″) angezeigt, um diese noch besser einordnen zu können. Diese vom AVD-Manager gelieferten Informationen sind für die Erstellung und dem Import von Bildern sehr nützlich und du kannst dich an diesen Angaben orientieren.

Eine Übersicht verschiedener Bildschirmgrößen, deren minimale Auflösungen und Pixeldichten zeigt dir die nachfolgende Tabelle, die du bei der Bearbeitung deiner Bilder ebenfalls zur Orientierung einsetzen kannst:

Exkurs: Bild erstellen

Für unsere spätere Anleitung möchten wir mit dem Grafikprogramm "Gimp" zunächst beispielhaft ein Bild mit der Auflösung (960dp x 720dp) und Pixeldichte (~640dpi) erstellen und dieses anschließend in den entsprechenden "drawable-xxxhdpi"-Ordner importieren. 

Info: Dieser Exkurs ist nicht unbedingt nötig und du kannst ihn problemlos überspringen, wenn du bereits ein fertiges Bild für deine App haben solltest. Gehe in diesem Fall einfach direkt zur eigentlichen Anleitung.


Info: Allgemein ist es empfehlenswert, ein Bild immer in der höchsten Auflösung und Pixeldichte zu importieren, da Android dieses Bild für alle niedrigeren Auflösungen sauber runterskaliert und es in der Regel keine Darstellungsprobleme beim Rendern gibt. Umgekehrt wäre es aber auf jeden Fall ein Problem, wenn du nur ein Bild in niedriger oder mittlerer Auflösung einfügst und Android dieses Bild später hochskalieren müsste. Überlege dir also beim Import von Bildern zunächst, welche Geräte zu deiner Zielgruppe gehören.

0) Gimp herunterladen & installieren: 
Lade dir für die weiteren Schritte des Exkurses zunächst Gimp von der Website herunter und installiere das Programm auf deinem Computer. Hier findest du ein gutes Video für die Gimp-Installation.

1) Gimp & Bilderzeugung starten: 
Klicke nach der Installation doppelt auf das Gimp-Icon, um das Programm zu starten. Gehe nun innerhalb von Gimp zunächst oben links auf "Datei" und anschließend auf "Neu".


2) Bildgröße & Auflösung für neues Bild einstellen:  
Gebe im Bilderstellungs-Fenster im Abschnitt "Bildgröße" die Anzahl der Pixel für "Breite" und "Höhe" ein und danach die "Pixel pro Inch (ppi)" für die Auflösung in X- und Y-Richtung im Abschnitt "Erweiterte Einstellungen". Zum Schluss bestätige diese Angaben mit einem Klick auf den "OK"-Button ganz unten.


3) Neues Bild mit Farbe füllen:  
Gehe im Werkzeugkasten links oben auf das Farb-Eimer-Symbol und klicke danach auf das Symbol für "Vordergrundfarbe". Suche dir danach im "Vordergrundfarbe ändern"-Fenster eine "Farbe" deiner Wahl aus und bestätige diese mit dem "OK"-Button. Klicke anschließend auf eine beliebige Stelle im Bild.


4) Text in das Bild einfügen:  
Wähle nun im Werkzeugkasten das Text-Tool aus, indem du auf das große "A" klickst. Stelle danach unten links Schriftart, -größe und -farbe ein und klicke dann in das Bild auf der rechten Seite. Schreibe dort einen beliebigen Text mit deiner Tastatur.


5) Bild speichern:  
Gehe im letzten Schritt mit deiner Maus oben links zuerst auf "Datei" und klicke anschließend auf "Exportieren als".


Gebe im Exportfenster ganz oben den "Dateinamen" und das "-format" (z.B. png) ein und wähle auf der linken Seite einen "Speicherort". Bestätige beides mit einem Klick auf "Exportieren" unten rechts.


Danach erscheint das Einstellungs-Fenster für den Export des PNG-Bildes, in welchem du einfach erneut auf "Exportieren" klickst. Das erzeugte PNG-Bild werden wir später in Android-Studio importieren.

Bild in Android-Studio importieren

Starte jetzt Android-Studio und öffne ein Projekt deiner Wahl. Nachfolgend zeigen wir dir zuerst, wie du einen neuen Drawable-Ordner für die Pixeldichte „xxxhdpi“ erstellst und anschließend den Import eines Bildes in diesen Ordner.

Schritt 1: In die Projekt-Ansicht wechseln

Im ersten Schritt wechselst du erstmal von der Android- in die Projekt-Ansicht, indem du oben links auf "Android" klickst und in der aufgeklappten Drop-Down-Liste den Menüpunkt "Project" auswählst.

Schritt 2: Neuen Drawable-Ordner anlegen

Öffne nun nacheinander die Ordner "app", "src", "main" und "res" in der Ordner-Struktur, indem du bei jedem Ordner jeweils links auf das kleine Pfeilsymbol klickst. Klicke danach mit der rechten Maustaste auf den "res"-Ordner, fahre mit der Maus über "New" und wähle im erweiterten Kontextmenü den Listeneintrag "Android resource directory" aus.


Es öffnet sich jetzt das "New Resource Directory"-Fenster zur Erstellung einer neuen Android-Ressource. Klicke bei "Resource typ" auf das Drop-Down-Menü, scrolle innerhalb der Liste etwas nach oben und wähle dann den Eintrag "drawable" aus.  


Wähle anschließend im Abschnitt "Available qualifiers" den Punkt "Density" aus und drücke auf den mittig liegenden "Mini-Button" mit den zwei nach rechts zeigenden Pfeilen.


Jetzt klickst du auf die "Drop-Down-Liste" unterhalb von "Density", wählst aus der Liste eine beliebige Pixeldichte für den neuen Drawable-Ordner und bestätigst deine Wahl am Ende mit einem Klick auf den "OK"-Button ganz unten rechts.

Schritt 3: Bild in den neuen Ordner importieren

Klicke in der Ordner-Struktur auf der linken Seite mit Rechts auf den neuen Ordner (in unserem Fall den "drawable-xxxhdpi"-Ordner) und gehe im geöffneten Kontextmenü unten auf "Show in Explorer". 


Im Windows-Explorer klickst du doppelt auf den entsprechenden Drawable-Ordner, um diesen zu öffnen.


Füge nun ein beliebiges Bild in diesen Ordner ein (wir nehmen unser mit Gimp erstelltes PNG-Bild).


Wechsle anschließend zurück zu Android-Studio und öffne dort denjenigen Drawable-Ordner, in welchen du soeben das neue Bild eingefügt hast. Das neue Bild sollte in diesem Ordner sofort sichtbar sein.


Info: Wenn du Bilder über den Windows-Explorer in einen der Drawable-Ordner einfügst, synchronisiert Android-Studio in der Regel diesen Ordner sofort und das neue Bild ist auch direkt danach in Android-Studio zu sehen. Falls dies jedoch nicht der Fall sein sollte, gehe in Android-Studio ganz oben auf "Build" und anschließend auf "Clean Project" (siehe Screenshot unten).

[WpProQuiz 17]