SoundCloud supported more screens using 45% less code with Jetpack Compose

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

As one of the largest audio streaming platforms in the world, SoundCloud supports a network of creators who use its service to upload and promote their music. SoundCloud’s developers are always exploring ways to improve its user experience, which means going beyond simply building the best mobile app. The team also wants to make SoundCloud available on as many form factors as possible so users can easily access and listen to SoundCloud in any situation and on the devices that work best for them.

That’s why the SoundCloud team adopted Jetpack Compose, Android’s modern declarative toolkit for building native UI. Compose enabled SoundCloud engineers to not only expand the app to more form factors, but also streamline new feature development—in some cases reducing nearly half the code.

Simplified UI development with Compose

Before migrating to Compose, building UI was much slower for SoundCloud developers because they had to constantly switch context between Kotlin and XML. This also made managing and maintaining its design system much more difficult. The team’s engineers wanted to find a simpler way to write code, and they knew Compose would help them get there.

“We started adopting Compose to quickly build dynamic layouts using Kotlin, the language we love,” said Vitus Ortner, an Android engineer at SoundCloud. “We wanted to empower our engineers to effectively create rich UIs through Compose.”

SoundCloud engineers overhauled the app’s design system with Compose and can now build new features using 45% less code on average. Compose’s concise Kotlin syntax and its ability to create reusable UI made design and maintenance much easier for the team. Prototyping new features was also simpler thanks to Compose’s declarative approach, as well as its live edit and UI preview features.

“We implemented a new content discovery feature with an interactive vertical feed layout. We used Compose to prototype, and it enabled us to iterate fast even when we changed our design ideas daily,” said Vitus. “That wouldn’t have been possible with Views.”

Compose’s interoperability with Views made it easier for developers to migrate SoundCloud’s design system to the new toolkit because they could do it gradually. Because SoundCloud uses a model–view–viewModel architecture, developers could reuse the app’s old view models in the new Compose framework. This meant they only needed to migrate the app’s View-based layouts to Compose, rather than rewrite the entire UI layer.

Optimizing for more form factors with Compose

Switching to Compose enabled developers to do more than streamline the app’s codebase. It also made supporting multiple form factors easier. With Compose, SoundCloud engineers were able to more easily bring the app to tablets, TVs, cars, and wearables.

“We’re using Compose across all form factors in the Android ecosystem,” said Vitus. “We implemented our Wear OS and TV apps from the ground up with Compose, which allowed us to rapidly iterate and ship new products in a fraction of the time it would have taken before.”

To adapt the mobile experience to a variety of screen sizes while maintaining interoperability with existing code, SoundCloud developers provide different XML layouts to combine existing View code with newer Compose components. Easy-to-implement features like this helped the team quickly build experiences across different devices, including optimizing SoundCloud for cars and tablets.

With these improvements, SoundCloud engineers built their Wear OS app and TV app from the ground up in just four months using Compose. According to Vitus, this “would’ve been unthinkable” using their previous system.

“Our mobile Compose skills transferred directly to Compose for other form factors,” said Vitus. “The concepts and most APIs are the same across form factors. We still needed to learn some form factor-specific APIs, like ScalingLazyColumn for Wear OS and TvLazyColumn for TVs.”

Future investment in Compose

By migrating its Android app to Compose, SoundCloud developers improved productivity, simplified the app’s code, and established smoother development processes for new features and experiences. Switching to Compose also helped SoundCloud expand to more form factors, creating new ways for users to access the platform.

“Compose helped us reach new users and markets, ultimately increasing our global reach,” said Vitus. “We're fully committed to Compose and plan to use it for all projects in the future.”

Get started

Optimize your UI development with Jetpack Compose.