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 at all times exploring methods to enhance its person expertise, which implies going past merely constructing the most effective cellular app. The workforce additionally needs to make SoundCloud accessible on as many type components as doable so customers can simply entry and hearken to SoundCloud in any state of affairs and on the units that work greatest for them.
That’s why the SoundCloud workforce adopted Jetpack Compose, Android’s trendy declarative toolkit for constructing native UI. Compose enabled SoundCloud engineers to not solely increase the app to extra type components, but in addition streamline new function growth—in some circumstances lowering almost half the code.
Simplified UI growth with Compose
Earlier than migrating to Compose, constructing UI was a lot slower for SoundCloud builders as a result of they needed to continually change context between Kotlin and XML. This additionally made managing and sustaining its design system far more troublesome. The workforce’s engineers wished to discover a less complicated strategy to write code, they usually 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 via Compose.”
SoundCloud engineers overhauled the app’s design system with Compose and might now construct new options utilizing 45% much less code on common. Compose’s concise Kotlin syntax and its capability to create reusable UI made design and upkeep a lot simpler for the workforce. 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 once 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, fairly than rewrite the whole 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 have been in a position to extra simply deliver the app to tablets, TVs, automobiles, and wearables.
“We’re utilizing Compose throughout all type components 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 could have taken earlier than.”
To adapt the cellular expertise to quite a lot of display sizes whereas sustaining interoperability with current code, SoundCloud builders present totally different XML layouts to mix current View code with newer Compose elements. Simple-to-implement options like this helped the workforce 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 line with Vitus, this “would’ve been unthinkable” utilizing their earlier system.
“Our cellular Compose expertise 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 growth processes for brand new options and experiences. Switching to Compose additionally helped SoundCloud increase to extra type components, creating new methods for customers to entry the platform.
“Compose helped us attain new customers and markets, finally rising our international attain,” stated Vitus. “We’re absolutely dedicated to Compose and plan to make use of it for all initiatives sooner or later.”
Get began
Optimize your UI growth with Jetpack Compose.