SoundCloud erstellt mit Jetpack Glance in nur zwei Wochen ein Widget für „Mit ‚Mag ich‘ markierte Songs“

Um Nutzern das Hören von Musik auf Android-Geräten noch einfacher zu machen, haben sich die Entwickler von SoundCloud, einer Musikplattform, die Künstler in den Mittelpunkt stellt, an Jetpack Glance gewandt.Damit haben sie ein Widget für „Mit ‚Mag ich‘ markierte Songs“ für ihre hoch bewertete App erstellt, die 4,6 Sterne hat und über 100 Millionen Mal heruntergeladen wurde. SoundCloud bietet einen Katalog mit über 400 Millionen Songs von mehr als 40 Millionen Künstlern. Die Plattform möchte Künstler und Fans über Musik zusammenbringen. Mit dem neuesten Update der Android-App können Hörer ihre Lieblingssongs noch einfacher genießen. Dank Glance konnte das Team das Projekt in nur zwei Wochen abschließen. So wurde wertvolle Entwicklungszeit gespart und die Interaktion gesteigert.

Nutzerfreundliche Touchpoints für maximale Sichtbarkeit

Das neue Widget für „Mit ‚Mag ich‘ markierte Songs“ zeigt das Cover der zuletzt mit „Mag ich“ markierten Songs. Nutzer können direkt zu einem bestimmten Song springen oder über den Startbildschirm auf ihre vollständige Songliste zugreifen. So ist SoundCloud für Hörer immer präsent und dient als Verknüpfung zu ihren persönlichen Mediatheken. Das soll sie dazu anregen, wieder einzuschalten.

„Mit ‚Mag ich‘ markierte Songs“ ist nicht das erste Widget von SoundCloud. Vor über zehn Jahren haben die Entwickler von SoundCloud mit RemoteViews ein Player-Widget erstellt, mit dem Nutzer die Wiedergabe einfach steuern und Songs mit „Mag ich“ markieren können. Nachdem sie das Player-Widget kürzlich auf Grundlage von Design-Feedback aktualisiert hatten, haben die Entwickler eine personalisierte Benutzeroberfläche für „Mit ‚Mag ich‘ markierte Songs“ priorisiert. Das neue Widget bietet sowohl einen hellen als auch einen dunklen Modus, lässt sich frei in der Größe an die Nutzerpräferenzen anpassen und passt sein Design dynamisch an das Hintergrundbild des Nutzers an. Dank Glance sind diese Designentscheidungen nicht nur nahtlos zu verwenden, sondern dienen auch als ansprechender und maßgeschneiderter Einstieg in die SoundCloud App.

Schnellere Entwicklungszyklen mit Glance

Glance hat auch eine entscheidende Rolle bei der Optimierung der Entwicklung von „Mit ‚Mag ich‘ markierte Songs“ gespielt. Für Entwickler, die bereits mit Compose vertraut sind, fühlte sich das intuitive Design von Glance vertraut an. So wurde die Lernkurve minimiert und das Onboarding des Teams beschleunigt. Die Codebeispiele der Plattform waren ebenfalls ein nützlicher Ausgangspunkt, mit dem Entwickler die Funktionen und Best Practices schnell verstehen konnten. „Die Verwendung von Beispiel-App-Repositories ist eine gute Möglichkeit, zu lernen. Ich kann mir ein ganzes Repository ansehen und prüfen, wie der Code funktioniert“, sagt Sigute Kateivaite, leitende SoundCloud-Entwicklerin im Android-Team. „Das hat die Entwicklung unseres Widgets erheblich beschleunigt.“

Die deklarative Natur der Benutzeroberfläche von Glance war für die Entwickler besonders vorteilhaft. Da sie beim Erstellen keine zusätzlichen XML-Dateien verwenden mussten, konnten sie saubereren, besser lesbaren Code mit weniger Boilerplate-Code erstellen. Mit Glance konnten sie auch separat mit Modulen arbeiten. Das bedeutet, dass Komponenten einzeln geschrieben und integriert und für spätere Iterationen wiederverwendet werden konnten. Durch die Isolierung von Komponenten konnten Entwickler Module schnell testen, Probleme identifizieren und beheben und für verschiedene Zustände erstellen, ohne dass es zu Duplikaten kam. Das führte zu effizienteren Arbeitsabläufen.

Das Design von Glance hat auch die allgemeine Codequalität verbessert. Da Änderungen mit der Unterstützung von Android Studio für die Echtzeitvorschau von Glance vorgenommen werden konnten, konnten Entwickler Komponenten isoliert erstellen, ohne die Benutzeroberflächenkomponente in das Widget zu integrieren oder das vollständige Widget auf dem Smartphone bereitzustellen. Sie konnten verschiedene Zustände darstellen, alle relevanten Fälle ansehen und Änderungen an Komponenten überprüfen, ohne die vollständige App kompilieren zu müssen. Kurz gesagt: Glance hat die Produktivität der Entwickler gesteigert, da sie schneller iterieren und das Widget für ein ausgereifteres Endprodukt optimieren konnten.

App-Widgets mit Glance verbessern

Dank effektiver neuer Arbeitsabläufe und ohne größere Entwicklungsprobleme lobt das SoundCloud-Team Glance für die Optimierung einer erfolgreichen Produktion. „Mit dem neuen Widget für ‚Mit ‚Mag ich‘ markierte Songs‘ war das Rollout sehr stabil“, sagt Sigute. „Die Entwicklung und der Testprozess verliefen sehr reibungslos.“ Die ersten Daten zeigen auch vielversprechende Ergebnisse: Aktive Nutzer interagieren jetzt durchschnittlich mehrmals täglich mit dem Widget, um auf die App zuzugreifen.

Das SoundCloud-Team möchte in Zukunft noch mehr von Glance nutzen, um bestehende Widgets zu verbessern, z. B. durch die Einführung kanonischer Layouts, und sogar neue zu entwickeln. Das aktuelle Widget für „Mit ‚Mag ich‘ markierte Songs“ konzentriert sich hauptsächlich auf die Bildanzeige. Das Team möchte jedoch auch andere Arten von Inhalten einbeziehen, um die Nutzerfreundlichkeit weiter zu verbessern. Die Entwickler möchten auch das Player-Widget zu Glance migrieren, um die robusten Designoptionen des Frameworks zu nutzen, die Größenänderungsprozesse zu vereinfachen und einige seit Langem bestehende Fehler zu beheben.

Neben den Funktionen für „Mit ‚Mag ich‘ markierte Songs“ und den Player freut sich das Team auf das Potenzial, mit Glance eine größere Auswahl an Widgets zu erstellen. Die modulare, komponentenbasierte Architektur des Widgets für „Mit ‚Mag ich‘ markierte Songs“ mit wiederverwendbaren Elementen wie „UserAvatar“ und „Logo“ bietet eine solide Grundlage für die zukünftige Entwicklung und verspricht, Prozesse von Anfang an zu vereinfachen.

Erste Schritte beim Erstellen benutzerdefinierter App-Widgets mit Jetpack Glance

Mit Glance können Sie schnell Widgets entwickeln und bereitstellen, mit denen Ihre App sichtbar und ansprechend bleibt.

Dieser Blogpost ist Teil unserer Reihe: Spotlight Week on Widgets, in der wir Ressourcen wie Blogposts, Videos und Beispielcode bereitstellen, die Ihnen beim Entwerfen und Erstellen von Widgets helfen sollen. Weitere Informationen finden Sie in der Übersicht zur Spotlight Week: Widgets, die im Laufe der Woche aktualisiert wird.