{"id":231106,"date":"2024-06-11T21:09:26","date_gmt":"2024-06-11T21:09:26","guid":{"rendered":"https:\/\/michigandigitalnews.com\/index.php\/2024\/06\/11\/soundcloud-supported-more-screens-using-45-less-code-with-jetpack-compose\/"},"modified":"2025-06-25T17:17:20","modified_gmt":"2025-06-25T17:17:20","slug":"soundcloud-supported-more-screens-using-45-less-code-with-jetpack-compose","status":"publish","type":"post","link":"https:\/\/michigandigitalnews.com\/index.php\/2024\/06\/11\/soundcloud-supported-more-screens-using-45-less-code-with-jetpack-compose\/","title":{"rendered":"SoundCloud supported more screens using 45% less code with Jetpack Compose"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n<\/p>\n

Posted by Chris Arriola, Developer Relations Engineer and Nick Butcher, Product Manager for Jetpack Compose <\/em><\/p>\n

<\/a><\/p>\n

\nAs one of the largest audio streaming platforms in the world, SoundCloud<\/a> supports a network of creators who use its service to upload and promote their music. SoundCloud\u2019s 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.\n<\/p>\n

\nThat\u2019s why the SoundCloud team adopted Jetpack Compose<\/a>, Android\u2019s 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\u2014in some cases reducing nearly half the code.\n<\/p>\n

<\/p>\n

\"Compose<\/div>\n

<\/image><\/p>\n

\nSimplified UI development with Compose<\/strong>
\n<\/h3>\n

\nBefore 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\u2019s engineers wanted to find a simpler way to write code, and they knew Compose would help them get there.\n<\/p>\n

\n\u201cWe started adopting Compose to quickly build dynamic layouts using Kotlin, the language we love,\u201d said Vitus Ortner, an Android engineer at SoundCloud. \u201cWe wanted to empower our engineers to effectively create rich UIs through Compose.\u201d\n<\/p>\n

\nSoundCloud engineers overhauled the app\u2019s design system with Compose and can now build new features using 45% less code on average<\/strong>. Compose\u2019s 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\u2019s declarative approach, as well as its live edit and UI preview features.\n<\/p>\n

\n\u201cWe 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,\u201d said Vitus. \u201cThat wouldn\u2019t have been possible with Views.\u201d\n<\/p>\n

\nCompose\u2019s interoperability with Views made it easier for developers to migrate SoundCloud\u2019s design system to the new toolkit because they could do it gradually. Because SoundCloud uses a model\u2013view\u2013viewModel architecture, developers could reuse the app\u2019s old view models in the new Compose framework. This meant they only needed to migrate the app\u2019s View-based layouts to Compose, rather than rewrite the entire UI layer.\n<\/p>\n

<\/p>\n

\"\u201cCompose<\/div>\n

<\/image><\/p>\n

\nOptimizing for more form factors with Compose<\/strong>
\n<\/h3>\n

\nSwitching to Compose enabled developers to do more than streamline the app\u2019s 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.\n<\/p>\n

\n\u201cWe\u2019re using Compose across all form factors in the Android ecosystem,\u201d said Vitus. \u201cWe 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.\u201d\n<\/p>\n

\nTo 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.\n<\/p>\n

\nWith these improvements, SoundCloud engineers built their Wear OS app and TV app from the ground up in just four months using Compose<\/strong>. According to Vitus, this \u201cwould\u2019ve been unthinkable\u201d using their previous system.\n<\/p>\n

\n\u201cOur mobile Compose skills transferred directly to Compose for other form factors,\u201d said Vitus. \u201cThe concepts and most APIs are the same across form factors. We still needed to learn some form factor-specific APIs, like ScalingLazyColumn<\/span>\u00a0<\/span>for Wear OS and TvLazyColumn<\/span> for TVs.\u201d\n<\/p>\n

<\/p>\n

\"UI<\/div>\n

<\/image><\/p>\n

\nFuture investment in Compose<\/strong>
\n<\/h3>\n

\nBy migrating its Android app to Compose, SoundCloud developers improved productivity, simplified the app\u2019s 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.\n<\/p>\n

\n\u201cCompose helped us reach new users and markets, ultimately increasing our global reach,\u201d said Vitus. \u201cWe’re fully committed to Compose and plan to use it for all projects in the future.\u201d\n<\/p>\n