Posted by Chris Arriola, Developer Relations Engineer and Nick Butcher, Product Supervisor for Jetpack Compose
As one of many largest audio streaming platforms on the earth, 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 person expertise, which suggests going past merely constructing the very best cellular app. The staff additionally needs to make SoundCloud accessible on as many type components as doable so customers can simply entry and take heed to SoundCloud in any state of affairs and on the gadgets 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 broaden the app to extra type components, but additionally streamline new characteristic 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 always swap context between Kotlin and XML. This additionally made managing and sustaining its design system far more troublesome. The staff’s engineers needed to discover a easier solution to write code, and so they knew Compose would assist them get there.
“We began adopting Compose to rapidly construct dynamic layouts utilizing Kotlin, the language we love,” stated Vitus Ortner, an Android engineer at SoundCloud. “We needed to empower our engineers to successfully create wealthy UIs by means 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 easier because of Compose’s declarative strategy, in addition to its stay edit and UI preview options.
“We carried out a brand new content material discovery characteristic 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 every 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 step by step. As a result of SoundCloud makes use of a mannequin–view–viewModel structure, builders might reuse the app’s outdated view fashions within the new Compose framework. This meant they solely wanted emigrate the app’s View-based layouts to Compose, reasonably than rewrite your entire UI layer.
Optimizing for extra type components with Compose
Switching to Compose enabled builders to do greater than streamline the app’s codebase. It additionally made supporting a number of type components simpler. With Compose, SoundCloud engineers had been capable of extra simply deliver the app to tablets, TVs, vehicles, and wearables.
“We’re utilizing Compose throughout all type components within the Android ecosystem,” stated Vitus. “We carried out 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 cellular expertise to a wide range of display screen sizes whereas sustaining interoperability with present code, SoundCloud builders present completely different XML layouts to mix present View code with newer Compose elements. Straightforward-to-implement options like this helped the staff rapidly construct experiences throughout completely different gadgets, together with optimizing SoundCloud for vehicles 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 cellular Compose abilities transferred on to Compose for different type components,” stated Vitus. “The ideas and most APIs are the identical throughout type components. We nonetheless wanted to be taught some type 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 broaden to extra type components, creating new methods for customers to entry the platform.
“Compose helped us attain new customers and markets, in the end rising our world 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.
