Fantastische Architekturkomponenten mit adaptiven Kotlin - App - Symbolen

Konfigurationsfenster für adaptive Symbole in Android Studio

Sie alle müssen bereits von Kotlin, Dagger 2, Android Architecture Components, Retrofit 2, adaptiven Symbolen und vielen anderen fantastischen Funktionen und Verbesserungen in Android gehört haben. Vor kurzem hat Google auch die Vorschau für Android P-Entwickler veröffentlicht. Ich habe eine Weile lang viel über diese heißen Themen gelesen und versucht, sie auch in meinen Anwendungen zu verwenden. Hier ist mein erster Versuch, etwas Neues zu lernen und mein Wissen an die Community selbst weiterzugeben.
Ich werde eine Serie schreiben, in der ich mich hauptsächlich auf die Vorteile dieser oben genannten technischen Stacks konzentriere und sie demonstriere, indem ich eine einfache Kotlin-basierte Android-Anwendung entwickle, in der wir GitHub-Benutzer mithilfe der GitHub-Such-API suchen können.

Aufgeregt sein? Steig einfach auf. Es wird eine lustige Fahrt.

Inhalt

  1. App-Symbole, die anpassungsfähig sind
  2. Abhängigkeiten mit Dagger 2 injizieren
  3. Platz machen
  4. Wir werden in zukünftigen Blogs dieser Reihe weitere Punkte hinzufügen

App-Symbole, die anpassungsfähig sind

Im letzten Jahr hat Google I / O17 adaptive Launcher-Symbole für das Betriebssystem Android Oreo (API-Stufe 26) eingeführt. Eine neue, stilvolle und elegante Art, das Logo einer Anwendung zu gestalten. Mit diesem neuen Format kann das Startsymbol unserer Anwendung in einer Vielzahl von Formen auf verschiedenen OEMs angezeigt werden. Dies bedeutet, dass ein adaptives Symbol ein kreisförmiges Symbol auf einem Gerät und ein rechteckiges Symbol auf einem anderen Gerät anzeigen kann.

Die Form des Startsymbols unserer Anwendung kann daher variieren von:

Kreisförmige adaptive SymbolQuadratische adaptive IkoneAbgerundete quadratische adaptive SymbolQuadrat geformte anpassungsfähige Ikone

Dies hängt von der vom OEM bereitgestellten Standardmaske ab, die vom Smartphone unterstützt wird und die vom System verwendet wird, um alle adaptiven Symbole in der gleichen Form auf Ihrem Gerät wiederzugeben.

Grundlagen

Die wichtigsten Komponenten im adaptiven Symbol sind die Vordergrund- und Hintergrundebenen. Um ein adaptives Symbol zu erstellen, müssen Sie das Startsymbol in zwei Teile (Vordergrundebene und Hintergrundebene) unterteilen.

Die Größe der Startsymbole betrug in Android 7.1 und früheren Versionen 48 x 48 dp. Gemäß der offiziellen Dokumentation zum adaptiven Symbol von Google sollten Apps jedoch bestimmten Richtlinien folgen, um beide Ebenen des adaptiven Symbols zu erstellen, d. H .:

  • Sowohl die Vordergrund- als auch die Hintergrundebene sollten eine Größe von 108 x 108 dpi haben (wobei die Hintergrundebene undurchsichtig sein muss und die Vordergrundebene transparent sein kann).
Größe des Launcher-Symbols (Quelle)
  • Das Startsymbol sollte sich innerhalb der Maskierung befinden, d. H. 72 x 72 dp.
OEM-Maskierungsanimation (Quelle)
  • Auf jeder Seite ist ein zusätzlicher Abstand von 18 dp vorhanden, in dem OEMs verschiedene visuelle Effekte wie Parallaxe, Pulsieren oder viele andere Effekte ausführen können.
Visuelle Effekte (Quelle)

Oh! Ich muss noch etwas sagen, Vorder- und Hintergrundebenen können das Format .svg oder .png haben. Ich werde einen Link im Referenzbereich dieses Blogs freigeben. Dort habe ich gelernt, wie Sie eine Vordergrundebene für das Launcher-Symbol erstellen.

Ansatz

Es gibt zwei Ansätze, um das adaptive Symbol zu erstellen, d. H.

  1. Verwenden der Image Asset-Funktion in Android Studio selbst (einfach und unkompliziert).
  2. Erstellen Sie selbst eine XML-Datei vom Typ .

Wir werden uns in diesem Blog den ersten Ansatz ansehen. Bevor Sie beginnen, müssen Sie jedoch eine Grundvoraussetzung erfüllen, um das adaptive Symbol zu erstellen.

Ihre App sollte die Zielversion 26 und höher haben.

Erste Ansatz

Es ist einfacher, wenn Sie die folgenden Schritte ausführen:

  1. Klicken Sie mit der rechten Maustaste auf den Ordner res und wählen Sie die Option Neu> Image Asset. Es wird so aussehen:

2. Nach Schritt 1 sehen wir nun ein Image Asset-Konfigurationsfenster wie das folgende:

Wie wir alle in diesem Konfigurationsfenster sehen können, stehen verschiedene Optionen zur Verfügung. Wir werden uns in weiteren Schritten die Optionen ansehen, die zum Erstellen eines adaptiven Symbols erforderlich sind.

3. In diesem Schritt stehen folgende Optionen zur Verfügung:

  • Die Option "Symboltyp" wird beibehalten, da sie standardmäßig als Launcher-Symbole (Adaptiv und Legacy) ausgewählt ist.
  • Der Name des Launcher-Symbols wird als ic_launcher geschrieben. Sie können den Namen gemäß Ihren Anforderungen ändern.
  • In diesem Konfigurationsfenster stehen zwei Schaltflächen zur Verfügung: "Sichere Zone anzeigen" (um die Sichtbarkeit der sicheren Zone im Startsymbol-Vorschaufenster umzuschalten) und "Raster anzeigen" (um die Sichtbarkeit der Keylinien-Formen umzuschalten, um die Proportionen des Symbols einheitlich einzustellen). .
  • Im Konfigurationsfenster stehen drei Registerkarten mit den Namen Vordergrundebene, Hintergrundebene und Legacy zur Verfügung. Wir werden in den folgenden Schritten nachschlagen.

4. Nach dem Befolgen von Schritt 3 werden wir fortfahren, um unsere background.svg- oder background.png-Datei hinzuzufügen. Ich habe meine background.png-Datei mit der Größe 432 x 432 px mit GIMP v2.8 erstellt. Sie sieht folgendermaßen aus:

background.png (432 x 432 px)

Nur eine kurze Beschreibung der Hintergrundebene: Sie enthält Felder wie:

  • Name: Legen Sie den Namen Ihrer Hintergrundebene entsprechend Ihren Anforderungen fest.
  • Asset-Typ: Wählen Sie den Bildtyp aus, da wir die .svg- oder .png-Datei für die Hintergrundebene verwenden.
  • Pfad: Wählen Sie den entsprechenden Pfad Ihrer Hintergrunddatei.

Nachdem Sie der Hintergrundebene im Bildkonfigurationsfenster eine Hintergrunddatei hinzugefügt haben, werden die folgenden Änderungen angezeigt:

Launcher-Symbol nach Auswahl des Hintergrundbilds

5. Nach Schritt 4 wählen wir die Registerkarte "Vordergrundebene" und fügen unsere Datei "foreground.svg" oder "foreground.png" hinzu, die wieder die gleichen Abmessungen wie unsere Hintergrunddatei hat. Ich habe meine Vordergrunddatei mit GIMP v2.8 selbst erstellt, indem ich die oben in diesem Artikel genannten Richtlinien befolgt habe. Außerdem werde ich im Ressourcenabschnitt unten einen Link zum Erstellen eines einfachen Texts mit einem langen Schatten veröffentlichen. Das Logo sieht in der Zwischenzeit folgendermaßen aus:

foreground.png (432 x 432 px)

Genauso wie wir den Namen und den Asset-Typ in der Hintergrundebene ausgewählt haben, werden wir dies auch für die Vordergrundebene tun. Nachdem Sie den Pfad der Vordergrunddatei zur Vordergrundebene im Bildkonfigurationsfenster ausgewählt haben, werden die folgenden Änderungen angezeigt:

Launcher-Symbol nach Auswahl des Vordergrundbilds

6. Dieser Schritt ist unser vorletzter Schritt. Wir wählen die Registerkarte "Legacy" aus und haben dort drei Optionen:

Legacy-Symbol und andere Symboloptionen

Auf dieser Registerkarte werden drei Arten von zusätzlichen Symbolen generiert, z. B. Legacy-Symbol, Rundes Symbol und Google Play Store-Symbol. Wir haben für jede Art von Symbol Ja- oder Nein-Optionen. Daher generieren wir jedes Symbol für unsere App und klicken auf "Weiter".

7. Nachdem Sie alle Schritte ausgeführt haben, generiert Android Studio alle Ausgabedateien im Ordner mipmap und trennt alle Dateien in dpi. Werfen wir einen Blick auf dieses Ausgabefenster:

Übersichtsfenster der Ausgabedatei

Wie wir sehen können, gibt es zwei Launcher-Icon-XML-Dateien, eine für normale Icons und eine für runde Icons, die -Tags haben und die Vordergrund- und Hintergrund-Drawables separat in einer Mipmap angeben. anydpi-v26 ordner. Nachdem wir alle Ordner und Dateien überprüft haben, klicken wir endlich auf Fertig stellen und Voila! Unser adaptives Icon ist fertig.

Sehen wir uns nur die Magie unseres adaptiven Symbols an:

GSearch App Adaptive-Symbol

Das ist alles über das adaptive Symbol. Den Quellcode finden Sie hier:

Im zweiten Teil dieser Serie erkläre ich, wie die Abhängigkeitsinjektion mithilfe von Dagger funktioniert und wie sie in diese App integriert wird. Bleib dran…

Ressourcen

Dies sind die Ressourcen, denen ich gefolgt bin, um das adaptive Symbol zu implementieren. Sie alle können sich auch diese Ressourcen ansehen.

  1. Design Adaptive Icon von Nick Butcher
  2. Adaptive Icons und mehr - von StylingAndroid
  3. Zum Testen von Adaptive Icon
  4. Erstellen eines flachen langen Schattens in GIMP

Hoffentlich hilft Ihnen dieser Blog dabei, tolle und coole adaptive Symbole für Ihre App zu erstellen. Wenn Sie Vorschläge zur Implementierung von adaptiven Symbolen haben, lassen Sie es mich bitte im Kommentarbereich wissen.

Danke fürs Lesen. Außerdem kannst du Wenn du diesen Artikel magst und gerne liest, dann einfach .

Folge mir auf Twitter: