HOWTO Iconpack für Apex-Launcher und Co. erstellen

  • 19 Antworten
  • Neuester Beitrag
Diskutiere HOWTO Iconpack für Apex-Launcher und Co. erstellen im Tipps und Anleitungen zum OS-Customizing im Bereich Android OS Entwicklung / Customize.
R

RATTAR

Gast
HOWTO Iconpack für Apex-Launcher und Co. Erstellen

Diese Anleitung erhebt nicht den Anspruch auf Vollständigkeit wird aber bei neuen Erkenntnissen berichtigt oder ergänzt.

In dieser Anleitung möchte ich meine Erfahrungen und Wissen beim Erstellen von Iconpacks bzw. Themes für den Apex-Launcher weitergeben.
Die Einrichtung einer funktionierenden Programm-Umgebung ist nicht Bestandteil des Tutorials.
Wie diese zu etablieren ist, ist auf dieser Website ganz gut beschrieben:
Android Eclipse Entwicklungsumgebung einrichten | killoverhead

Ist diese eingerichtet, lädst du dir das Apex Icon Pack Sample von der Seite auf xda herunter.
Am besten ist du wählst als Ordner-Namen einen einprägsamen Hauptordner wie Launchertemplates.
Jetzt öffnest du die ZIP mit z.B. 7zip und kopierst die gesamte Ordner-Struktur als Unterordner in den Hauptordner Launchertemplates.







Öffne Eclipse und lege bei dem Start einen separaten Workbench an.
Dazu geht du auf Browse > ein Fenster öffnet sich wo du einen neuen Ordner namens Themes anlegst.

In diesen Ordner erstellst du eine Unterordner mit dem Namen des zukünftigen Themes.
Anschließend öffnest du Eclipse vollständig.




Erstmal wird dich ein leeres Projekt begrüßen.

Du klickst jetzt mit der echten Maustaste im Projekt-Fenster und wählst Import > Import > Android > Existing Android Code Into Workspace.






Ein Fenster öffnet sich, dort wählst du das Verzeichnis aus in das du vorher dein Template entpackst hast.



Der Ordner der das Template beinhaltet heißt wahrscheinlich ApexThemeTemplate.
Ok drücken und jetzt ganz wichtig setze den Haken in diesem Fenster bei Copy projects into workspace.



Machst du das nicht, wird dir spätestens beim erneuten Öffnen deines Projektes deine ganze Arbeit unbrauchbar gemacht da der fehlende Haken dazu führt, das das Verzeichnis mit dem Template zur Workbench wird und dir das Template überschrieben wird.
Jetzt drückst du auf Finish.
Im Package Explorer siehst du jetzt einen Ordner mainActivity genannt, diesen öffnest du.
Der Unterordner src muss jetzt geöffnet werden.
Ein Symbol das aussieht wie ein Päckchen ist zu sehen. Dieses klickst du mit Rechtsklick an und wählst dort den Punkt Refactor > Rename.



Hier gibt du den Namen deines Packages ein. z.B. com.bleistiel.bleistiel.





Markiere und kopiere dir den gewählten Package-Namen. Er wird gleich noch mal benötigt. Erst dann bestätige mit OK.

Jetzt öffnest du die Datei AndroidManifest.xml, oben bei Package fügst den vorher kopierten Package-Namen ein. Also com.bleistiel.bleistiel.



Im Prinzip müsste damit das Theme fertig bearbeitbar sein.
Dein Projekt wird kompiliert wenn du in den Package-Explorer gehst, rechte Maustaste > Export > Android > Export Android Application.





Dabei legst du noch einen Keystore an (eigentlich nur wichtig für den Playstore) und arbeitest dich durch die Menüs.







Der Name der App ist eigentlich egal, sie wird über den Package-Namen identifiziert. Hauptsache sie heißt meinetwegen bleistiel.apk.
Sie könnte aber auch rumburak.apk oder noname.apk heißen das ist für die Installation egal.
Android identifiziert die App über den Package-Namen und den Keystore.





Bearbeitungstricks und zusätzliche Werkzeuge

Werkzeuge:
  • Notepad++
  • Xnview
  • Excel oder MS Access

Icon-Erstellung
Für die Icon-Erstellung ist es hilfreich sich einen separaten Ordner zu erstellen der erstmal vom Projekt getrennt ist. In diesem werden alle zu erstellenden Icons gespeichert.
Die Icons sollten ein Mindestformat von 72 x 72 Pixeln haben. Größere Formate sind jederzeit möglich, verschlingen aber irgendwann viel Speicher auf dem Handy.
Nicht erlaubt in Icon-Bezeichnungen sind Sonderzeichen wie Punkte und Großschreibung.
Icons müssen grundsätzlich im png-Format vorliegen.
Ich persönlich bevorzuge bei der Benennung der Icons ihren geschriebenen Namen, da dadurch eine saubere Sortierung der Icons im Austausch-Schirm möglich ist.
Wird der Activity-Name verwendet, werden die Icon alphanumerisch sortiert.
Das heißt alle com.xxx.xxx-Activities sind vor de.xxx.xxx-Activities einsortiert. Das erschwert den Austausch der Icons ungemein.

Generierung einer iconpack.xml​
Sind alle Icons im separaten Arbeitsordner erstellt, öffnet wir diesen mit xnview, markieren alle Icons, gehen auf Erstellen > Dateiliste.
Nur der Dateiname und in Zwischenablage kopieren darf aktiviert sein und erstellen eine Dateiliste.
Diese kopieren wir nach Excel oder Calc in die zweite Spalte B. In der Tabellenkalkulation ersetzen den Teilstring .png durch den Teilstring </item>. In die Spalte A geben wir <item> ein und ziehen diesen Eintrag soweit runter das überall vor der Spalte B mit Texteinträgen, der Texteintrag <item> erscheint. Jetzt kopieren wir das fertige Tabellenblatt in die Zwischenablage und öffnen Notepad++.
In Notepad++ legen wir ein leeres Textdokument an und ersetzen wir durch STRG+H > \t im Suchfeld und „kein Zeichen“ im Ersetzen-Feld alle unnötigen Tabulatoren.
Dasselbe wiederholen wir mit unnötigen Leerzeichen.
Wenn wir schon mal dabei sind stellen wir über Bearbeiten > Zeilenende den Text auf Linux-Format um.
Der fertige Text wird in die Zwischenablage kopiert.
Jetzt öffnen wir in unserem Projekt-Ordner von Eclipse die Datei iconpack.xml und fügen das soeben erstellte zwischen den Einträgen <string-array name="icon_pack" translatable="true"> und </string-array> wieder ein.
Wird so vorgegangen kann eigentlich kein Icon der später über die Long-Press-Funktion des Launchers ausgetauscht werden soll verloren gehen.

Tipps zum Umgang mit der appfilter.xml im Unterordner xml des Projektes​
Einige Vorbemerkungen zur appfilter.xml
Die appfilter_xml enthält die Activities der direkt darstellbaren Icons im App-Drawer und dem Desktop.
Sie ist also die wichtigste Datei im ganzen Iconpack.
Ist eine Activity unbekannt oder verkehrt geschrieben, wird der in der Anwendung hinterlegte Standard-Icon verwendet.
Befinden sich im XML-Syntax Fehler wird das Iconpack zwar in der Regel erstellt.
Aber ab dem Punkt mit dem Syntax-Error können die Launcher die Daten der appfilter.xml nicht mehr lesen und verwenden ab da den Standard-Icon der darzustellenden Anwendungen anstatt des hinterlegten Custom-Icons.

Um Syntax-Fehler zu vermeiden hat sich bei mir bewährt die Einträge in dem Format:

<item component="ComponentInfo{com.android.chrome/com.android.chrome.Main}"[TAB]drawable="chrome"/>​
anzulegen.


So muß bei der Bearbeitung der XML nur der Icon-Name chrome richtig abgegeben werden.
Und zwischen den geschweiften Klammern die Activity sauber eingegeben werden.
Ein weiterer Vorteil dieser Methode ist, wenn alle Activity-Einträge markiert und in die Zwischenablage kopiert werden.
Diese wieder in Calc oder Excel eingefügt werden können und über die Sortier-Funktion der Tabellenkalkulation geordnet werden können.
So können Dubletten bei der Erfassung von Activities vermieden werden.
Wer sich mit Access oder einer anderen relationalen Datenbank auskennt kann über eine entsprechende Abfrage (Gruppierung-Funktion) Dubletten automatisch aussortieren lassen.
 
Zuletzt bearbeitet von einem Moderator:
R

RATTAR

Gast
Ordner und deren Bedeutung​
Ordner res/drawable-hdpi
Im Ordner res/drawable-hdpi sind nach Einrichtung des Templates nur 8 Grafik-Dateien vorhanden:
  • com_android_browser_browseractivity.png
  • feature.png
  • icon.png
  • iconback.png
  • iconmask.png
  • iconupon.png
  • preview1.jpg
  • preview2.jpg

com_android_browser_browseractivity.png
Diese Grafik ist eine Beispielsdatei die auch ihren Eintrag in der appfilter.xml hat.

<item component="ComponentInfo{com.android.browser/com.android.browser.BrowserActivity}" drawable="com_android_browser_browseractivity" />
<item component="ComponentInfo{com.google.android.browser/com.android.browser.BrowserActivity}" drawable="com_android_browser_browseractivity" />


Das diese Art der Notation nicht sinnvoll ist habe ich weiter oben schon erwähnt.

feature.png
Die feature.png ist eine Art Werbebanner des Themes. Wählt der User das Theme aus erscheint dieses Banner.

icon.png
icon.png ist der Icon der in der Theme-Übersicht der installierten Themes angezeigt wird. Er sollte dem User einen ungefähren optischen Eindruck vermitteln welches Aussehen die gethemten Icons haben.

Bei den nächsten Icons wird es interessant, mit iconback.png, iconmask.png und iconupon.png lassen sich ohne großen Aufwand Spezial-Effekte erzeugen.
Diese drei Icons zusammengenommen mit dem in der User-App hinterlegten App-Icon lassen sich tolle Effekte erzielen.
Dazu werden die Icons wie Folien eines Overhead-Projektor übereinanderlegen.

iconback.png
ist die unterste Folie, darüber wird der Icon aus der User-App gelegt und bildet zusammen dann optisch einen neuen Icon.

iconmask.png
ist eine Stanzfunktion, wird iconmask.png eingesetzt stanzt der Apex-Launcher mit seiner internen Funktion den User-Icon nach nach dem vorgegebenen Muster aus und legt das ausgestanzte auf die Folie iconback.back.

iconupon.png
ist die letzte der drei Folien sie überdeckt iconback.png, den Icon aus der eigentlichen User-App und iconmask.png.

-------------------------------------------------------------​

Wirkungsweise als Grafiken am Beispiel von google drive

Basis-Grafiken:


Basisgrafiken im Einsatz:



Es können auch mehrere Vorlagen von iconback.png, iconmask.png und iconupon.png verwendet werden.
Diese sind dann nach dem Muster iconback.png, iconback1.png usw. benannt sein.
Die Verwendung ist dann allerdings in der appfilter.xml zu vermerken.

<iconback img1="iconback" />
<iconmask img1="iconmask" />
<iconupon img1="iconupon" />


Wird z. B. ein weitere iconback gewünscht würde der Eintrag in der appfilter.xml dann

<iconback img2="iconback1" />

lauten.

Im Falle der Beispielgrafiken könnte man so ein Länderflaggen-Theme kreieren.
 
Zuletzt bearbeitet von einem Moderator:
R

RATTAR

Gast
Reserviert für Ergänzungen 2
 
Zuletzt bearbeitet von einem Moderator:
Haeretik

Haeretik

Erfahrenes Mitglied
hey,
super tutorial :) genau so was habe ich gesucht. was du vll. noch ergänzen könntest wäre eine Erklärung zu den ganzen Ordnern wie drawable-ldpi und drawable-xhdpi.
Wozu diese da sind und wo die Icons rein gehören usw. Und eventuell noch wo man die Namen herbekommt wie com.android.chrome/com.android.chrome.Main usw.. :)
 
R

RATTAR

Gast
Der Ausbau ist fest eingeplant.
Deswegen sind ja auch zwei Platzhalter vorhanden.

EDIT:
Die Wallpaper kommen in den Ordner drawable-nodpi.
 
Zuletzt bearbeitet von einem Moderator:
P

PhillippOh

Fortgeschrittenes Mitglied
Zuletzt bearbeitet:
P

PhillippOh

Fortgeschrittenes Mitglied
Erklärst du später auch, wie man es für andere Launcher anpasst? Zur Zeit funktioniert es ja nur bei Apex und Nova.
 
R

RATTAR

Gast
Hm,
weitere Tutorials speziell für GO Launcher EX-Themes und ADW-Themes sind wenn dieses Tutorial fertig ist, nicht mehr zwingend notwendig.
Die Templates von diesen Launchern sind ähnlich aufgebaut und mit diesem Tut als Basis sollte es kein Problem sein sich in die Struktur von ADW und GO Launcher Ex einzuarbeiten.

Richtig gut funktioniernde Multitheme-Templates habe ich noch nicht frei verfügbar gefunden.
Meistens funktionieren bei den Multitheme-Templates die drawables bei ADW und Holo-Launcher nicht.
 
P

PhillippOh

Fortgeschrittenes Mitglied
Für mein Icon Pack wäre halt wichtig, dass die Custom Icons bei vielen Launchern gehen, da ich keine Icons habe, die man global Anwenden kann.
 
Haeretik

Haeretik

Erfahrenes Mitglied
Hi,
ich hab auch mal nen Icon Pack erstellt, auf folgenden Launchern funktioniert es ohne anpassungen:
ADWLauncher EX
Apex Launcher
Nova Launcher
Smart Launcher

Nicht funktionieren tuts auf:
Atom Launcher
Go Launcher EX
Holo Launcher

Gibts nen einfachen Weg das anzupassen?^^

Grüße
 
R

RATTAR

Gast
Einen einfachen Weg gibt es leider nicht.
Aber es gibt für Eclipse noch Templates für ADW- und GO LauncherEX-Themes.
Das Basismaterial wie die xmls und Icons können in diesen Templates dann teilweise 1 : 1 weiterverwendet werden.
Teilweise sind Anpassungen notwendig.
Der Syntax der appfilter.xml ist in allen Templates gleich.
Die iconpack.xml ist bei Apex-Templates und bei ADW-Templates vom Grundsyntax her gleich. Bei ADW heißt die iconpack.xml halt icon_pack.xml.
Bei GO Launcher EX heißt iconpack.xml dann drawable.xml.

Dort ist der Syntax auch ein anderer:
Code:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<version>1</version>
<item drawable="a"/>
</resources>
zu
Code:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string-array name="icon_pack" translatable="true">
<item>a</item>
</string-array> 
</resources>
Aber hat man sich in ein Template erst eingearbeitet sind die anderen Templates auch nachzuvollziehen.

Bei GO Launcher EX-Themes empfiehlt es sich online mit der GoThemeFactory ein Dummy-Theme zu erzeugen, das herunterzuladen, die ZIP zu öffnen und sich alles was man benötigt sich aus dieser ZIP zu holen.
 
Andy

Andy

Ehrenmitglied
@ RATTAR
Erstmal danke für das super Tutorial. Nur eine Frage zur Bezeichnung der richtigen Activity: Im Beispiel hast du den Chrome Browser com.android.chrome/com.android.chrome.Main
Wie finde ich aber den richtigen Activitynamen raus. Der erste Teil vor dem Slash ist ja der Name lt. Google Play - also der Link.
Mal als Beispiel: httxs://play.google.com/store/apps/details?id=com.apksoftware.compass
Das com.apksoftware.compass kommt ja vor dem Slash, danach ja die MainActivity. In dem Fall wäre das com.apksoftware.compass.Compass

Wie finde ich das denn für beliebige Apps raus, ohne dass ich ein anderes Icon Pack decompilieren muss und dort "abluchse"?

Wenn ich jetzt wie Haeretik das Problem habe, dass das Theme/Icon Pack von manchen Launchern nicht erkannt wird, kann ich dann problemlos z.b. iconpack.xml und drawable.xml in der .apk einfügen um das Iconpack für beide Varianten kompatibel zu machen?

Gibt es was zu beachten, wenn ich "nur" ein Iconpack erstelle, anstatt eines Themes? Beim Theme usw. bräuchte man ja ne Preview für den ThemeChooser usw. richtig? Bzw. den obigen Post zu der feature.png usw. habe ich schon gesehen, aber ist es generell egal ob man ein Theme oder ein IconPack erstellt? Ich denke mal schon. Beim Theme kann ich ja dann noch zusätzliche Wallpaper, andere Schriften usw. mitliefern, falls der Launcher das unterstützt?
 
Zuletzt bearbeitet:
R

RATTAR

Gast
Der Syntax für die com.apksoftware.compass lautet:

<item component="ComponentInfo{com.apksoftware.compass/com.apksoftware.compass.Compass}"drawable="compass"/>​

Am einfachsten findest du Activities heraus in dem du ddms.bat aus der android-sdk heraus ausführst, und im App-Drawer die App startest.
Der Dalvik-Debug-Monitor zeigt dir dann die App als gestartet an, das ist in der Regel die Activity von unbekannten Apps.
Für ein Theme ist ein Preview nicht zwingend erforderlich, es wird halt dann in der Vorschau kein Screen angezeigt.

Generell ist es egal ob die APK als Theme oder Iconpack konfiguriert wird.
Beim Iconpack an sich fehlen halt die Einträge der Activities in der appfilter.xml komplett, solange du die Icons in der drwable.xml oder der iconpack.xml hinterlegt hast sind die Icons durch lanfgen Druck z.B. beim Apex-Launcher anwählbar.

Du sparst dir dadurch das ganze Prozedere die Icons jedesmal per Hand mit der Galerie auszuwählen.
 
Andy

Andy

Ehrenmitglied
Hm OK danke. Nur ich kann ja nicht dauernd Apps runterladen vor allem kostenpflichtige, nur dass ich die dann mit dem Iconpack anbieten kann. Muss ich mir was überlegen. Also ich will schon das Pack so erstellen, dass er mit der appfilter.xml passend ersetzt. Alles andere wäre ja sinnlos. ^^
 
Andy

Andy

Ehrenmitglied
Wow super. Sehr schön. :thumbup:
 
ChaboBabo

ChaboBabo

Experte
Icon Pack,hmm?

Mach ich mal bei Gelegenheit...die Anleitung hier ist super! :scared:
 
D

dhuss96

Neues Mitglied
was isn keystore?? was geb ich da ein?
Danke

Edit
bei Generierung einer iconpack.xml
den Teil mit Notepad ++ raff ich überhaupt nicht -.-
 
Zuletzt bearbeitet:
T

TheLukas

Neues Mitglied
Hallo,

ich habe dem Tutorial soweit folgen können, jedoch weiß ich nciht genau wo ich den die Icon dann abspeichern soll, habe die iconpack.xml erstellt und die appfilter Einträge gemacht, ahbe jedoch nur die Standart Icons, kann mir jemand weiterhelfen?

Edit:

Habs schon rausgefunden :D

Hab im falschen Projekt ordner rumprobiert :D
 
Zuletzt bearbeitet:
E

ente3000

Neues Mitglied
Hab alles kapiert, auch schon hingekriegt eine Maske zu machen.
Aber wie werden die Icons den verschiedenen Apps zugeordnet? Hat bei mir nicht funktioniert... :sad: