SoundCloud supported extra screens utilizing 45% much less code with Jetpack Compose

Posted by Chris Arriola, Developer Relations Engineer and Nick Butcher, Product Supervisor for Jetpack Compose

As one of many largest audio streaming platforms on this planet, SoundCloud helps a community of creators who use its service to add and promote their music. SoundCloud’s builders are all the time exploring methods to enhance its consumer expertise, which implies going past merely constructing the perfect cell app. The staff additionally desires to make SoundCloud out there on as many kind elements as doable so customers can simply entry and take heed to SoundCloud in any state of affairs and on the units that work finest for them.

That’s why the SoundCloud staff adopted Jetpack Compose, Android’s fashionable declarative toolkit for constructing native UI. Compose enabled SoundCloud engineers to not solely develop the app to extra kind elements, but in addition streamline new function improvement—in some instances lowering practically half the code.

Simplified UI improvement with Compose

Earlier than migrating to Compose, constructing UI was a lot slower for SoundCloud builders as a result of they needed to continuously swap context between Kotlin and XML. This additionally made managing and sustaining its design system rather more tough. The staff’s engineers wished to discover a less complicated option to write code, and so they knew Compose would assist them get there.

“We began adopting Compose to shortly construct dynamic layouts utilizing Kotlin, the language we love,” stated Vitus Ortner, an Android engineer at SoundCloud. “We wished to empower our engineers to successfully create wealthy UIs by way of Compose.”

SoundCloud engineers overhauled the app’s design system with Compose and may now construct new options utilizing 45% much less code on common. Compose’s concise Kotlin syntax and its potential to create reusable UI made design and upkeep a lot simpler for the staff. Prototyping new options was additionally less complicated because of Compose’s declarative strategy, in addition to its dwell edit and UI preview options.

“We applied a brand new content material discovery function with an interactive vertical feed structure. We used Compose to prototype, and it enabled us to iterate quick even after we modified our design concepts day by day,” stated Vitus. “That wouldn’t have been doable with Views.”

Compose’s interoperability with Views made it simpler for builders emigrate SoundCloud’s design system to the brand new toolkit as a result of they may do it steadily. As a result of SoundCloud makes use of a mannequin–view–viewModel structure, builders might reuse the app’s previous view fashions within the new Compose framework. This meant they solely wanted emigrate the app’s View-based layouts to Compose, quite than rewrite the whole UI layer.

Optimizing for extra kind elements with Compose

Switching to Compose enabled builders to do greater than streamline the app’s codebase. It additionally made supporting a number of kind elements simpler. With Compose, SoundCloud engineers have been capable of extra simply convey the app to tablets, TVs, automobiles, and wearables.

“We’re utilizing Compose throughout all kind elements within the Android ecosystem,” stated Vitus. “We applied our Put on OS and TV apps from the bottom up with Compose, which allowed us to quickly iterate and ship new merchandise in a fraction of the time it might have taken earlier than.”

To adapt the cell expertise to a wide range of display screen sizes whereas sustaining interoperability with present code, SoundCloud builders present totally different XML layouts to mix present View code with newer Compose elements. Simple-to-implement options like this helped the staff shortly construct experiences throughout totally different units, together with optimizing SoundCloud for automobiles and tablets.

With these enhancements, SoundCloud engineers constructed their Put on OS app and TV app from the bottom up in simply 4 months utilizing Compose. In response to Vitus, this “would’ve been unthinkable” utilizing their earlier system.

“Our cell Compose expertise transferred on to Compose for different kind elements,” stated Vitus. “The ideas and most APIs are the identical throughout kind elements. We nonetheless wanted to be taught some kind factor-specific APIs, like ScalingLazyColumn for Put on OS and TvLazyColumn for TVs.”

Future funding in Compose

By migrating its Android app to Compose, SoundCloud builders improved productiveness, simplified the app’s code, and established smoother improvement processes for brand spanking new options and experiences. Switching to Compose additionally helped SoundCloud develop to extra kind elements, creating new methods for customers to entry the platform.

“Compose helped us attain new customers and markets, in the end growing our international attain,” stated Vitus. “We’re totally dedicated to Compose and plan to make use of it for all initiatives sooner or later.”

Get began

Optimize your UI improvement with Jetpack Compose.