Tag Archives: case study

Kakao Games increased FPS stability to 96% through Android Adaptability

Posted by Dohyun Kim, Developer Relations Engineer, Android Games

Finding the balance between graphics quality and performance

Ares: Rise of Guardians is a mobile-to-PC sci-fi MMORPG developed by Second Dive, a game studio based in Korea known for its expertise in developing action RPG series and published by Kakao Games. Set in a vast universe with a detailed, futuristic background, Ares is full of exciting gameplay and beautifully rendered characters involving combatants wearing battle suits. However, because of these richly detailed graphics, some users’ devices struggled to handle the gameplay without affecting the performance.

For some users, their device would overheat after just a few minutes of gameplay and enter a thermally throttled state. In this state, the CPU and GPU frequency are reduced, affecting the game’s performance and causing the FPS to drop. However, as soon as the decreased FPS improved the thermal situation, the FPS would increase again and the cycle would repeat. This FPS fluctuation would cause the game to feel janky.

Adjust the performance in real time with Android Adaptability

To solve this problem, Kakao Games used Android Adaptability and Unity Adaptive Performance to improve the performance and thermal management of their game.

Android Adaptability is a set of tools and libraries to understand and respond to changing performance, thermal, and user situations in real time. These include the Android Dynamic Performance Framework’s thermal APIs, which provide information about the thermal state of a device, and the PerformanceHint API, which help Android choose the optimal CPU operating point and core placement. Both APIs work with the Unity Adaptive Performance package to help developers optimize their games.

Android Adaptability and Unity Adaptive Performance work together to adjust the graphics settings of your app or game to match the capabilities of the user’s device. As a result, it can improve performance, reduce thermal throttling and power consumption, and preserve battery life.

Moving image of gameplay from Ares: Rise of Guardians

Results

After integrating adaptive performance, Ares was better able to manage its thermal situation, which resulted in less throttling. As a result, users were able to enjoy a higher frame rate, and FPS stability increased from 75% to 96%.

In the charts below, the blue line indicates the thermal warning level. The bottom line (0.7) indicates no warning, the midline (0.8) is throttling imminent, and the upper line (0.9) is throttling. As you can see in the first chart, before implementing Android Adaptability, throttling happened after about 16 minutes of gameplay. In the second chart, you can see that after integration, throttling didn’t occur until around 22 minutes.

Graph showing high graphic quality setting measuring thermal headroom against thermal warning level in frames-per-second

Graph showing enabled android adaptability measuring thermal headroom against thermal warning level in frames-per-second

Kakao Games also wanted to reduce device heating, which they knew wasn’t possible with a continuously high graphic quality setting. The best practice is to gradually lower the graphical fidelity as device temperature increases to maintain a constant framerate and thermal equilibrium. So Kakao Games created a six-step change sequence with Android Adaptability, offering stable FPS and lower device temperatures. Automatic changes in fidelity are reflected in the in-game graphic quality settings (resolution, texture, shadow, effect, etc.) in the settings menu. Because some users want the highest graphic quality even if their device can’t sustain performance at that level, Kakao Games gave them the option to manually disable Unity Adaptive Performance.

Get started with Android Adaptability

Android Adaptability and Unity Adaptive Performance is now available to all Android game developers using the Android provider on most Android devices after API level 30 (thermal) and 31 (performance Hint API). Developers are able to use the Android provider from the Adaptive Performance 5.0.0 version. The thermal APIs are integrated with Adaptive Performance to help developers easily retrieve device thermal information and the performance Hint API is called every Update() automatically without any additional work.

Learn how Android Adaptability and Unity Adaptive Performance can help you stabilize your game’s FPS and reduce thermal throttling.

Health Connect brings together Peloton, ŌURA, and Lifesum for deeper health and fitness insights

Posted by the Android team

Health Connect is an Android API that gives users a simpler way to consolidate and share their health and fitness data across applications. With Health Connect, users can opt to share their health and fitness metrics between their favorite apps. And for developers, Health Connect helps streamline workflows and reduce API complexities.

By using Health Connect, Peloton, ŌURA, and Lifesum were able to provide their users more information about their health by bridging the gap between the specific types of health metrics available on each application. Together, these metrics can provide a clearer, more holistic view of users’ health. And thanks to Health Connect’s intuitive APIs, implementing these changes has become easier than ever. Rather than having to build multiple API integrations to support access to multiple datasets, Health Connect saved engineers time by only requiring one.

Peloton provides more metrics with a single API integration

The Peloton team received numerous requests from its Members asking for integrations with other platforms. Because of this, Peloton engineers saw an opportunity to give them a more holistic view of their wellness information by supporting easier access to the data they track across each of their health and fitness apps. But the Peloton team was concerned by the time and cost that developing individual API connections for each app would require.

“We would have to coordinate road maps, marketing, and support, and it isn’t feasible to do these things for every service we’d like to work with,” said Eder Bastos, a senior Android engineer at Peloton. “By integrating Health Connect, we don’t need to do any additional implementation work to support other services.”

Maintaining a single Health Connect API integration to share data with other health and fitness apps saves Peloton developers time and effort. When updates are made to the Health Connect API, the Peloton team can adopt those changes and receive all the benefits at once, rather than maintaining multiple APIs for each potential partner’s platform.

Roughly 20% of Peloton’s new Members now use Health Connect. Health Connect also increased Member engagement in the Peloton App, driving a 10% increase in Members using Peloton to log their workouts over time when the Health Connect API was enabled.

“Having a standardized API we can target allows us to share our data to an ecosystem, rather than targeting individual apps and services.” — Eder Bastos, senior Android engineer at Peloton

Health Connect helps ŌURA securely synergize data for its users

Health Connect provided the ŌURA team a seamless way to synergize user information across health and fitness applications. By giving their members access to the data they track where they need it, they’re able to monitor their health in the ways that work best for them—including syncing data from other health apps like Peloton.

For instance, when an ŌURA member takes a Peloton strength class, they can choose whether to share their data with the Health Connect API in their permission settings. If they opt to share the data, ŌURA can then read it from Peloton and show the member a full view of their fitness journey in the ŌURA application—and make personalized suggestions for their future workouts.

ŌURA not only reads exercise data but can also write sleep data from the ŌURA Ring. When connected to its signature wearable, the ŌURA app can track sleep stages, duration, heart rate, and heart rate variability. With a member’s permission, ŌURA can then share this data with other apps integrated into their member’s Health Connect ecosystem.

“Integrating Health Connect was a smooth experience, thanks to its good documentation," said Alex Earll, a senior backend engineer at ŌURA. “Some developers might not have the resources to directly integrate with ŌURA’s API, so we offered Health Connect as a turnkey solution to fit their product.”

Thanks to Health Connect, the ŌURA team nearly doubled the number of Android users importing workouts. The number of weekly workouts imported from Android has also increased by 95% since ŌURA integrated Health Connect last November.

ŌURA engineers are actively planning to use the Health Connect API to read and write additional data so people get an even more comprehensive image of their health. That includes movement data like active calories burned, step counts, and workout duration.

Lifesum integrates Sleep X Nutrition feature with Health Connect

Holistic wellness is dependent on more than a person's diet, which is why the nutrition app Lifesum enabled its users to import their sleep data via Health Connect. With this integration, users can sync external sleep data with the Lifesum app. This helps them better understand the correlation between how they eat and sleep and provides a more holistic view of their health.

With Health Connect, Lifesum users can easily import their sleep data from ŌURA and other data, like exercise and steps, from other apps within the Health Connect ecosystem. Then, Lifesum’s new feature, Sleep X Nutrition, can provide insights into how dietary choices impact sleep and vice versa.

Combining the power of two fields—ŌURA, an expert in sleep, and Lifesum, an expert in nutrition—allowed both platforms to create a richer, more insightful user experience around health.

“Mediating a relationship with ŌURA through Health Connect lets Lifesum users track more information about their sleep, such as duration and quality," said Kajsa Ernestam, a product manager at Lifesum. “It also helps Lifesum provide personalized sleep insights and actionable feedback to improve users’ eating habits and reach their goals.”

By integrating Health Connect with its new Sleep X Nutrition feature, Lifesum cut its development time by an estimated 75%. Additionally, Lifesum increased organic installations by 3X during the promotional period of the new Sleep X Nutrition feature in the Play Store.

“Lifesum cut its development time by an estimated 75% by integrating Health Connect with its new Sleep X Nutrition feature.” — Oskar Florén, lead Android developer at Lifesum.

More opportunities with Health Connect

Today, there are over 50 apps integrated with Health Connect, and that number continues to grow. As new apps join the Health Connect ecosystem, each app directly benefits from a greater variation of health data that they can read and write to.

Health Connect is coming to Android 14 this fall. This will make it even easier for users who opt in to control how their health and fitness data are shared across apps.

“We’re really excited to see more seamless integration of Health Connect into Android 14,” said Eder from Peloton. “Downloading a separate app can be too much overhead for some people, so we’re excited to see even more Health Connect usage as it becomes easier to access.”

Join the other apps using Health Connect today

Streamline integrations with other health and fitness apps while providing your users with deeper health insights using Health Connect.

Get started by viewing Android’s Introduction to Health Connect. Then head over to the Health Connect Codelab to learn how you can integrate the Health Connect API with your app today.

Deezer increased its monthly active users 4X after improving multi-device support

Posted by the Android team

Deezer is a global music streaming platform that provides users access to over 110 million tracks. Deezer aims to make its application easily accessible, letting users listen to their audio when, where, and how they want. With the growing popularity of Wear OS devices and large screens and foldables, the Deezer team saw an opportunity to give its users more ways to stream by enhancing its multi-device support.

We’re focused on delivering a consistently great UX on as many devices as possible.” — Hugo Vignaux, senior product manager at Deezer

Increasing smart watch support

Over the past few years, users increasingly requested Deezer to make its app available on Wear OS. During this time, the Deezer team had also seen rapid growth in the wearable market.

“The Wear OS market was growing thanks to the Fitbit acquisition by Google, the Pixel watch announcement, and the switch to Wear OS on Galaxy watches,” said Hugo Vignaux, a senior product manager at Deezer. “It was perfect timing because Google raised the opportunity with us to invest in Wear OS by joining the Media Experience Program in 2022.”

Deezer’s developers initially focused on providing instant, easy access to users’ personalized playlists from the application. To do this, engineers streamlined the app’s Wear OS UI, making it easier for users to control the app from their wrist. They also implemented a feature that allowed users to download their favorite Deezer playlists straight to their smartwatches, making offline playback possible without requiring a phone or an internet connection.

The Deezer team relied on Google’s Horologist and its Media Toolkit during development. Horologist and its libraries guided the team and ensured updates to the UI adhered to Wear best practices. It also made rolling out features like audio and bluetooth management much easier.

“The player view offered by the Media Toolkit was a source of inspiration and guaranteed that the app’s code quality was up to par,” said Hugo. “It also allowed us to focus on unit testing and resiliency rather than developing new features from scratch.”

More support for large screens and foldables

Before updating the app, Deezer’s UX wasn’t fully optimized for large screens and foldables. With this latest update, Deezer developers created special layouts for multitasking on large screens, like tablets and laptops, and used resizable emulators to optimize the app’s resizing capabilities for each screen on foldables.

“Supporting large screens means we can better fit multiple windows on a screen,” said Geoffrey Métais, engineering manager at Deezer. “This allows users to easily switch between apps, which is good because Deezer doesn’t require a user's full attention for them to make use of its UI.”

On tablets, Deezer developers split pages that were displayed vertically to be displayed horizontally. Developers also implemented a navigation rail and turned some lists into grids. These simple quality-of-life updates improved UX by giving users an easier way to click through the app.

Making these changes was easy for developers thanks to the Jetpack WindowManager library. “The WindowManager library made it simple to adapt our UI to different screen sizes,” said Geoffrey. “It leverages Jetpack Compose’s modularity to adapt to any screen size. And Compose code stays simple and consistent despite addressing a variety of different configurations.”

Updates to large screens and foldables and Wear OS were all created using Jetpack Compose and Compose for Wear OS, respectively. With Jetpack Compose, Deezer developers were able to efficiently create and implement a design system that focused on technical issues within the new app. The Deezer team attributes their increased productivity with Compose to Composable functions, which lets developers reuse code segments, and Android Studio, which helps developers iterate on features faster.

“The combination of a proper Design System with Jetpack Compose’s modularity and reactive paradigms is a very smart and efficient solution to improve usability without losing development productivity,” said Geoffrey.

'With the new capabilities of Wear OS 3, we’ve optimized the Deezer experience for the next generation of smartwatches, letting our users listen to their music anywhere, anytime.' — Hugo Vignaux, senior product manager at Deezer

The impact of increased multi-device support

Increasing multi-device support was easy for Deezer developers thanks to the tools and resources offered by Google. The updates the Deezer team made across screens improved the app’s UI, making it easier for users to navigate the app and listen to audio on their own terms.

Since updating for Wear OS and other Android devices, the Deezer team saw a 4X increase in user engagement and received positive feedback from its community.

“Developing for WearOS and across devices was great thanks to the help of the Google team and the availability of libraries and APIs that helped us deliver some great features, such as Horologist and its Media Toolkit. All those technical assets were very well documented and the Google team’s dedication was tremendous,” said Hugo.

Get started

Learn how you can start developing for Wear OS and other Android devices today.

Dropbox rebuilt its search experience 40% faster with Jetpack Compose

Posted by the Android team

Available in 180 countries and with over 1 billion downloads on Google Play, Dropbox is one of the world’s most popular file sharing and cloud storage services. Dropbox is on a mission to design a more enlightened way of working, keeping life organized and work moving. Recently that meant Jetpack Compose , Android’s modern declarative toolkit for creating native UI.

Quote card with headshot of Ryan Harter, smiling. Quote text reads, 'With first class-support for design systems in Compose, we felt it would be easier to create a cohesive experience across our app that fit the Dropbox branding.'- Ryan Harter, Staff Android Engineer at Dropbox

A smarter, faster way to build UI

Since adopting Compose, Dropbox developers have rewritten many features for the app, including its home screen, file preview, and search experiences. Dropbox’s search experience was completely rebuilt in just a few weeks, which was 40% less time than expected and less than half the time it took them to build the same feature for iOS.

The team being able to work faster was a direct result of how simple it was for them to use Compose. Since rebuilding the search experience, Dropbox developers have seen a 13% increase in successful search sessions —a key metric for the team.

Compose helped Dropbox developers move quickly, letting them easily build complex, custom UIs with the toolkit’s basic building blocks and utilities. “Support for multiple previews, with different configurations or data, allows us to consider different variations of components as we build them instead of as an afterthought,” said Ryan Harter, staff Android engineer at Dropbox.

The Dropbox team also built a new design system on top of Android’s MaterialTheme, which the engineers accomplished by following Compose best practices. Creating the new design system on top of Android’s MaterialTheme minimized the time it took for Dropbox developers to lay the app’s foundation, allowing them to build new features with Compose while maintaining a look and feel that’s consistent with Dropbox’s branding.

Compatibility with Views made trying Compose easy

Dropbox developers were also swayed to use Compose thanks to its interoperability with Views and were impressed by how easy it was to develop in tandem with both toolkits. The Dropbox team was able to support classic Views libraries and plugins within the app while creating new UI components using Compose. Because of this, Dropbox developers could gradually migrate the app to Compose instead of completely overhauling the app.

“Interoperability with Compose allowed us to move forward with the toolkit, even when we needed to interact with Views in certain workflows such as ExoPlayer and PDF document views,” continued Ryan. “You can start with a smaller component and experience the benefits and improved speed without committing to rewriting your entire app. It’s clear that Compose was designed with the intention that users don’t need to perform an all-or-nothing migration.”

Improved testing and experimentation

During their rewrites, Dropbox engineers found that Compose made developing easier and enabled more efficient testing. “Compose, together with Android Studio’s preview support, has allowed us to iterate on features faster by reducing the length of the feedback cycle while developing screens,” continued Ryan.

The fast feedback cycle and interactive previews from Compose allowed the Dropbox team to experiment with UX quickly and test any assumptions they had about the updates, which made it easier to release features.

“If questions came up about performance or use of an approach, we went into Android Studio and used the interactive previews to test and measure results so we’d have more answers and fewer assumptions,” said Alison Wyllie, a senior software engineer at Dropbox. “And the fast feedback cycle and interactive previews that come with Compose have allowed us to experiment quickly with UX and test our assumptions, allowing us to get features into users’ hands faster.”

Jetpack Compose’s push toward a unidirectional data flow (UDF) also helped Dropbox engineers while testing and debugging. Combining UDF with Compose testing libraries and the toolkit’s declarative approach to creating UI made the Dropbox team confident that the app’s features were stable and bug free because they could fully test them before release.

Quote card with headshot of Alison Wyllie, smiling. Quote text reads, 'What used to take hundreds of lines of code can now be done in ten, saving time and making code much easier to understand and maintain'- Alison Wyllie, Senior Software Engineer at Dropbox

Continuing improvements with Jetpack Compose

Dropbox’s engineers were impressed by the ease and speed with which they could iterate and get feedback using Compose. With interactive and on-device previews, Compose allows for experimentation and development in ways that weren’t previously possible for the team at Dropbox. The Dropbox team plans to continue building the app’s design system using Compose and expects most new features to be written with the toolkit.

“Compose gave us a fresh start with a lot of key areas that have historically been difficult for Android engineers. I’m very excited to see what new functionality Google and the open source community will create next,” said Allison.

Get started

Optimize your UI development with Jetpack Compose.

Peloton increased its multi-device support and saw an uptick in user engagement

Posted by the Android team

The Peloton App makes it easy for people to work out wherever they want, whenever they want. From living room yoga classes to guided audio runs outdoors, Peloton strives to create an engaging exercise experience that works for anyone, anywhere.

For Peloton, creating convenient workouts means making the Peloton App more accessible across surfaces. So after receiving numerous requests to upgrade its Android app experience from its community, along with the Pixel Watch announcement at Google I/O in 2022, the Peloton team saw an opportunity to boost the app’s support across the entire Android ecosystem, ensuring its Members receive a seamless Peloton experience on all their devices.
Quote card with text reads, 'We want to meet Members where they are and on all the devices they own'- Stefan Haaker, senior Android engineer at Peloton. Peloton logo.

Building the Wear OS experience

Peloton developers began updating the app’s multi-device support by creating a modern watch application for Wear OS devices using Compose for Wear OS. With the Compose toolkit, Peloton developers were able to quickly build a watch experience that met Wear OS guidelines. “The Wear OS app was our first usage of Compose in production,” said Stefan Haacker, a senior Android engineer at Peloton. “We really enjoyed how much more productive it made us.”

The Peloton team released the first wearable app version just after the Pixel Watch launched. They worked tirelessly to get the app ready between the announcement of the Pixel Watch and its launch. Thanks to the Jetpack Compose toolkit, Peloton developers were able to rapidly and efficiently prepare the app in record time.

The new wearable app gave Peloton Members more options for monitoring their heart rate in real time. Using the Data Layer API to synchronize information between wearables and the Peloton App, Members can now view their heart rate across devices—from their phones to their watches to their bikes—as they take a Peloton class.

“Before the Wear OS app was released, only a small percentage of Android Members worked out with a heart rate monitor (HRM). After releasing Peloton on Wear OS, the app had a 6X increase in HRM usage in just a few months,” said Stefan. “For Peloton, HRM usage correlates with a better user experience, increased user engagement, and more workouts a month.”

With more Members tracking their health and fitness data through the new Peloton app, it was important for the Peloton team to give them better access to that data. That’s why Peloton was excited to partner with Google to offer Health Connect integration from day one, giving its users a simpler way to consolidate and share their fitness data across applications.

Increased support across devices

Peloton developers wanted to embrace the uniqueness of each device across the Android ecosystem and focus on the individual benefits that their form factors could offer. With this mindset, it was easier for the Peloton team to create a flexible UI that could adapt to various screens.

“We had to stop developing and designing with rigid device categories in mind,” said Ward Bonnefond, a senior staff software engineer at Peloton. “Phones these days no longer have just a single rectangular screen.”

The Peloton team began optimizing for large screens and foldables by improving how the app handles window resizing across orientations and devices. Using resizable emulators, Peloton developers were able to ensure the app behaved as expected with different configurations and screen sizes.

“We used RecyclerViews to determine the number of columns the app displays at runtime based on the available screen size,” said Ward. “We removed restrictions on activity resizing and orientation locking so that our app would function properly in full screen, split screen, resizable floating windows, and foldables.”

Peloton developers used Jetpack WindowManager to support foldable-specific use cases, like tabletop mode for the app’s video player. The window manager library made it easy for developers to place a video above a device’s fold and workout metrics below it.

Peloton developers also streamlined the login process on Android TV. Instead of forcing Members to fumble over typing their credentials with a remote, they can now login through the Peloton App on their phone to quickly connect with their TV.

Quote card with text reads, 'With the Android SDK and Jetpack Libraries, it’s really easy to create a flexible UI that adapts to the different screen size.' — Ward Bonnefond, senior staff software engineer at Peloton

More devices, more opportunities

Since launching the all-new Wear OS application and enhancing support across Android devices, Peloton has seen an uptick in total workouts taken on the Android platform. Although other factors were at play, the Peloton team attributes much of that increase to the new wearable application.

“There are so many different devices with varying capabilities in the Android ecosystem, like phones, watches, tablets, TVs and more,” said Ward. “At the end of the day, we want the Peloton App to be awesome wherever Members use it.”

Get started

Learn how you can start developing for Wear OS and other Android devices today.

U-NEXT sees 1.5X increase in tablet installations after boosting support for large screens

Posted by the Android team

As the largest domestic streaming and digital content service in Japan, U-NEXT is always looking for new ways to connect its users to their favorite content. With just a single application, the platform hosts an extensive library of over 840,000 titles, ranging from movies, anime, and live streams to manga, magazines, and e-books.

Always looking for ways to improve its UX for its expanding user base, U-NEXT recently turned to the growing market of large screens and foldables, which includes devices like tablets and Chromebooks. Here, U-NEXT engineers saw an opportunity to create a better way to view content by focusing on what makes these devices special. For example, better multi-window support on larger screens could offer a more visually rich UX, while an improved foldable UX might better mimic the experience readers get with a traditional paperback.

But some users bumped into bugs while using the U-NEXT app with these larger and foldable viewing formats. For instance, the app would often hide important buttons when users opened U-NEXT on larger screens, forcing them to search the page for those navigation tools.

To optimize a UX overhaul to support these formats, the U-NEXT team tackled the project in two phases: remove any existing bugs, then add the features that its large-screen users would benefit from the most.

Headshot of Tomoya Miwa, Principal engineer at U-NEXT, smiling, with text quote 'We wanted to provide a better user experience using the advantages of large screens and foldables'

Clearing out the bugs

To fix the visibility issue for important in-app navigation buttons, U-NEXT engineers used a ConstraintLayout to set constraint barriers. These barriers prevented UI elements from being pushed off-screen while ensuring they’re always oriented correctly, no matter the screen size.

What’s more, U-NEXT’s application didn’t always display properly on larger screens. For example, pages displaying browsable video lists typically consist of a header and a curated list of content. These lists are supposed to occupy most of the space on the page. But on larger screens, the headers occupied the most on-screen real estate, making video content harder to navigate. The U-NEXT team resolved this issue by restricting the width of the header image on larger screens, giving the list more space and making browsing easier for large-screen users.

When users view books on the U-NEXT application, they can tap the screen to reveal a horizontal, scrollable wheel that lets them quickly and easily navigate their place in the text. But when users tried to access this navigation tool on Chromebooks, it wouldn’t appear on the page.

“Originally, we used SystemUiVisibility to determine whether a Chromebook was full-screen when a user tapped it,” said Tomoya Miwa, principal engineer at U-NEXT. “If SystemUiVisibility detected it wasn’t full screen, it’s supposed to display the controller. However, this listener isn’t called on when SystemUiVisibility is changed on Chromebooks, so the controller couldn’t be displayed.”

This meant U-NEXT had to change how they manage the visibility of the controller when SystemUiVisibility changes on Chromebooks. After this bug fix, the application would hide and display the controller at the same time when the screen is tapped on a Chromebook, resolving the issue for these users.

The last bug U-NEXT devs tackled was one that temporarily disrupted video when users folded their device during viewing. Switching device orientation while viewing content is supposed to be seamless, but the automatic deletion and recreation of the Activity during orientation changes caused videos to momentarily cut out.

Instead of letting Android handle these configuration changes automatically, U-NEXT developers changed the app to handle them manually. Using onConfigurationChanged(), the team overrode the change and prevented the UI elements from automatically being deleted and recreated, letting the app preserve them and prevent any viewing interruptions.

Making the most with more form factors

As part of its feature overhaul, U-NEXT replaced the traditional navigation bar with a navigation rail, which U-NEXT engineers anticipated would significantly improve the user experience. U-NEXT made this change in line with Android’s Do’s and Don't for Large Screens presentation from its recent Android Developer Summit, which provided best practices for developers optimizing for large screens.

“Reachability is an important factor when it comes to curating comfortable user experiences,” said Tomoya. “With a traditional, horizontal navigation bar, it makes it difficult to reach the buttons in the middle. With a navigation rail, it becomes much easier to reach these buttons.”

Image showing side by side rendering of UI before the implementation of the navigation rail on the left and after on the right

Next, the team enhanced support for two-page spreads when users viewed any e-books content on large screens. Apps typically display a single page when devices are oriented vertically on large screens and foldables. But because most large screens and foldables offer plenty of room for a double-page view, U-NEXT developers wanted to ensure users would always see a double-page spread whether in portrait or landscape orientation—even when the device was slightly folded.

The U-NEXT team also included some smaller, quality-of-life updates to make the user experience for large screens and foldables even better. These included enhancing the app’s compatibility with Compose by ensuring the Navigation component was consistent on every screen size, adding better support for Google Play in-app billing on large screens, and optimizing picture-in-picture viewing.

'The number of installations on tablets increased by more than 1.5x following the update for large screen devices.' — Tomoya Miwa, principal engineer at U-NEXT

Android support makes optimization easy

The U-NEXT team was surprised by how easy it was to optimize its app for large screens and foldable devices. Thanks to Android’s developer resources, U-NEXT was able to improve content viewing on its app, across devices, while also minimizing time and effort.

“It’s not that difficult,” said Tomoya. “Introducing the navigation was relatively easy, and foldable support in general is not hard as long as your app is compatible with basic screen rotation.”

Since updating the U-NEXT app to better support large screens, tablet installations have increased by 1.5X. Additionally, the watch time from users on large screen devices jumped by more than 10%.

Looking forward, the U-NEXT team plans to keep expanding its app’s large screen capabilities by enhancing mouse and keyboard compatibility, introducing list detail view to improve search functionality, adding greater support for tabletop mode, and implementing drag-and-drop features to make content sharing easier.

U-NEXT is excited to see Android add more resources to its large and expanding list of documentation, including the recently updated Material 3 library, which will further help support the growing number of users with large screen and foldable devices.

Start optimizing for large screens today

More people are using large screens, foldables, and other up-and-coming form factors. Learn how you can better support your users on these devices with examples from Android’s Large Screen Gallery.

Clue’s development speed improves 3X after rebuilding the app with Jetpack Compose

Posted by the Android team

Clue is a freemium menstrual health application founded in 2012 and was among the earliest developers in femtech. The app helps women and people who menstruate track their cycles and serves 11 million monthly active users in over 190 countries. Additional features, including tools for tracking prenatal and postpartum health, are available through the app’s subscription tier, Clue Plus.

Having access to streamlined and easily digestible menstrual health data can be an invaluable resource for people who menstruate, and Clue has supported these insights for Android users for over a decade. As with any codebase, however, the Clue app inherited technical debt. This limited the team’s ability to push changes and features quickly, scale developer efforts, and provide a modern UI to its users.

Clue previously relied heavily on custom views that made extending the existing codebase difficult and required time-consuming testing methods that slowed the development process. Clue’s codebase had additionally amassed UI inconsistencies from hard-coded theme values such as colors and sizes, and in 2022 Clue’s engineers recognized that they needed a more efficient and flexible solution. They ultimately landed on migrating to Jetpack Compose, Android’s modern toolkit for building native UI.

“We decided that a complete rewrite of the application, with a specific emphasis on the UI layer, would be the best course of action,” said Moctezuma Rojas, an Android developer at Clue. “This decision was based on the fact that it would enable us to have a more efficient and faster development cycle, quickly implement features that would have taken much longer to develop using views, and make our code more testable.”

Building a faster and more efficient codebase with Compose

The Clue team saw immediate benefits by rewriting its app with Compose. For one, a faster, more efficient testing and development cycle significantly reduced the time and effort necessary to improve the codebase while reducing bugs and errors. Compose also enabled Clue’s engineers to implement features faster than they could with Views.

Migrating the app to Compose resulted in improved testability for screens, faster development from ideation to release, and better standardization processes that aligned with the best practices recommended by Android developer resources. Compose also helped the Clue team double—and in some cases, triple—their development speed when compared to the old codebase.

“With the traditional view system, adding new features, visual representations, or user interactions was difficult due to the need for custom view creation and maintenance. However, by utilizing Jetpack Compose, we've been able to effortlessly develop and expand the Cycle View feature without any limitations in adding elements,” said Moctezuma.

Photo of Moctezuma Rojas, Android developer at Clue,smiling while snuggling a cat, with quote text which reads, '...By utilizing Jetpack Compose, we've been able to effortlessly develop and expand the Cycle View feature without any limitations in adding elements.'

Compose also helped Clue’s developers quickly overhaul several other important features within the application, including Calendar View, Analysis View, and the account management and settings screens.

More creativity made possible with Compose

Compose enabled developers to make Clue screens more intuitive, improve scrolling, and deploy a custom color system and component library that aligned with the brand—a huge win for the team. Previously, adding new features, visual representations, or user interactions was complicated because they required creating a custom view and ongoing maintenance.

Compose APIs made it much easier to test UI so Clue developers felt more confident about what they were shipping to users. As an added benefit, Clue developers now have more space for exploring UX innovation.

“The custom dynamic theming allows designers to freely explore their creativity without being limited by technological constraints,” said Moctezuma. “It provides a flexible and scalable approach to styling that can be easily adapted as our app evolves and grows, resulting in a visually appealing and cohesive user experience.”

All of these changes vastly improved the user experience for Clue subscribers, resulting in fewer error messages and bug reports. The Clue team also says that using Compose has enabled them to identify areas of improvement in the app’s code that could have potentially impacted its users.

“Compose increases developer velocity by eliminating boilerplate code, works seamlessly with the existing code base thanks to its Interoperability APIs, and improves UI testing—which has always been painful in Android development,” said Tilbe Saltan, a senior Android developer at Clue.

Continued success with Jetpack Compose

Compose has improved each subsequent app release and made preview and live editing features more reliable for Clue engineers, allowing for a more flexible development experience from start to finish. Since implementing Compose, the Clue team has also seen excitement from prospective candidates interested in working on the app so they can work with more modern development technologies.

“The future of Compose holds many potential development areas that could benefit developers and companies. As Compose continues to evolve, we can expect to see more improvements in performance, stability, tooling, and cross-platform support, which will make it an even more compelling choice for building high-quality UIs,” said Tilbe.


Get started

Optimize your UI development with Jetpack Compose.

Mercari reduces 355K lines of code, a 69% difference, by rebuilding with Jetpack Compose

Posted by the Android team

In 2020, the Mercari team took on a big initiative to update its app’s technical infrastructure. At the time, its codebase was seven years old and hadn’t undergone any major architectural updates. This affected the team’s ability to develop new features and release timely app updates. To resolve this technical debt, Mercari launched what it called the GroundUP initiative—a complete rewrite of its application across platforms, including Android.

The goal was to create a completely modernized application with a scalable design. While retooling the app, Mercari developers turned to Jetpack Compose, Android’s modern declarative toolkit for creating native UI. During the evaluation, the team learned rewriting in Jetpack Compose would help clean up their codebase and have more control over how the app looks.

A rewrite with less code

The Mercari team completely rewrote the architecture and tech stack for its Android app using Jetpack Compose. Mercari developers created a new design system and completely integrated it using Compose, enabling them to easily test and implement new features. Using this new design system, the Mercari team rewrote more than 130 UI screens for its marketplace and modernized the look and feel of many of their components.

With the help of the Jetpack Libraries, Mercari’s team eliminated all legacy code during the rewrite, drastically reducing its codebase and making it more manageable for developers. “Virtually, it’s the same app with way less code,” said Allan Conda, Android technology lead at Mercari. “The rewritten app has about 355,000 fewer lines of code, which is about 69% less than what it had before.”

Moving image showing lines of code that appear and disappear on the leftmost panel of the screen. The spacing between the boxes in the center panel changes, and the overall app view reflects these changes in the rightmost panel.

Interoperability with Views as an early adopter

When the Mercari team first began its GroundUP initiative, Jetpack Compose was only available in developer preview. They wanted the app written completely in Jetpack Compose due to its new declarative approach to creating UI. However, because it was still so new, they found themselves having to solve for unique edge cases using both toolkits.

For example, on Mercari’s listing form screens, users are prompted to input details about the merchandise they want to list. Users were then supposed to be able to select photos from their device gallery and rearrange them on this screen using a drag gesture. Gesture APIs weren’t available in Jetpack Compose at the time, so the team took advantage of Compose's AndroidView to seamlessly integrate Views that handled gestures on the listing form screen. This provided a stable yet temporary solution to implementing drag gestures until the feature became available with Jetpack Compose.

The Mercari team was impressed by how easy it was to switch between the two toolkits, and having the option to use Views alongside Compose gave them better control of edge cases like this. Compose now supports gesture APIs, and Mercari developers have since completely written and integrated the drag gesture component solely using Compose.

Jetpack Compose has matured a lot since Mercari’s initial adoption, and most Android developers no longer need to worry about having to interoperate with both toolkits as Android apps can now be written completely in Compose.

Improving and monitoring performance with Compose

Using Compose, the Mercari team automated baseline profile generation for every stable release of the app and found it to be really helpful. The home screen renders frames up to 2x faster with the default Compose baseline profile compared to without a baseline profile. By providing a custom profile, there’s an additional improvement of up to 20% faster when Mercari users are scrolling compared to just having the default baseline profile.

The team also wrote automated performance tests based on the app’s core scenarios with Android Macrobenchmark. “Using Android Macrobenchmark, we can automatically test start-up, scroll, and screen load times performance,” said Allan. “Currently, we have six core scenarios covered by these tests, like search results and browsing items.”

Additionally, Mercari developers integrated Firebase Performance Monitoring, a real-time app performance monitoring tool, with custom code to calculate scrolling performance on Compose screens. With Firebase Performance Monitoring, the Mercari team detected a performance issue on its search result screen. Using the Android Profiler to pinpoint the problem, Mercari developers discovered there were poor frame rates when scrolling search results. This resulted in the slow rendering instances being reduced by around 23.6%.

The Mercari team solved this frame rate issue with guidance from Google’s Compose performance best practices and Compose stability. Mercari developers had the app skip its Composables and hoist the unused states on the search results screen, significantly improving the frame rates.

Headshot of Allan Conda, Android Tech Lead at Mercari, similing, with quote text reads 'Jetpack Compose helped us implement our Design System and rewrite 130+ screens and many of our components'

More opportunities with Jetpack Compose

With less code to maintain, it’s much easier for Mercari developers to test and implement features. “We have a ton of experiments we can finally conduct using our refreshed platforms. Our users can expect new features coming to the Mercari app at a faster rate,” said Allan.

Mercari’s developers are excited to further develop the app using Animation APIs. With Compose, it’s much easier to animate components, which can result in huge improvements for Android UXs.

Get started

Optimize your UI development with Jetpack Compose.

Concepts users spend 70% more time using the app on tablets than on phones

Posted by the Android team

Concepts is a digital illustration app created by TopHatch that helps creative thinkers bring their visions to life. The app uses an infinitely-large canvas format, so its users can sketch, plan, and edit all of their big ideas without limitation, while its vector-based ink provides the precision needed to refine and reorganize their ideas as they go.

For Concepts, having more on-screen real estate means more comfort, more creative space, and a better user experience overall. That’s why the app was specifically designed with large screens in mind. Concepts’ designers and engineers are always exploring new ways to expand the app’s large screen capabilities on Android. Thanks to Android’s suite of developer tools and resources, that’s easier than ever.

Evaluating an expanding market of devices

Large screens are the fastest growing segment of Android users, with more than 270 million users on tablets, foldables, and ChromeOS devices. It’s no surprise then that Concepts, an app that benefits users by providing them with more screen space, was attracted to the format. The Concepts team was also excited about innovation with foldables because having the large screen experience with greater portability gives users more opportunities to use the app in the ways that are best for them.

The team at Concepts spends a lot of time evaluating new large screen technologies and experiences, trying to find what hardware or software features might benefit the app the most. The team imagines and storyboards several scenarios, shares the best ones with a close-knit beta group, and quickly builds prototypes to determine whether these updates improve the UX for its larger user base.

For instance, Concepts’ designers recently tested the Samsung Galaxy Fold and found that users benefited from having more screen space when the device was folded. With help from the Jetpack WindowManager library, Concepts’ developers implemented a feature to automatically collapse the UI when the Galaxy’s large screen was folded, allowing for more on-screen space than if the UI were expanded.

Foldable UI

Concepts’ first release for Android was optimized for ChromeOS and, because of this, supporting resizable windows was important to their user experience from the very beginning. Initially, they needed to use a physical device to test for various screen sizes. Now, the Concepts team can use Android’s resizeable emulator, which makes testing for different screen sizes much easier.

Android’s APIs and toolkit carry the workload

The developers’ goal with Concepts is to make the illustration experience feel as natural as putting pen to paper. For the Concepts team, this meant achieving as close to zero lag as possible between the stylus tip and the lines drawn on the Concepts canvas.

When Concepts’ engineers first created the app, they put a lot of effort into creating low-latency drawing themselves. Now, Android’s graphical APIs eliminate the complexity of creating efficient inking.

“The hardware to support low-latency inking with higher refresh rate screens and more accurate stylus data keeps getting better,” said David Brittain, co-founder and CEO of TopHatch, parent company of Concepts. “Android’s mature set of APIs make it easy.”

Concepts engineers also found that the core Android View APIs take care of most of the workload for supporting tablets and foldables and make heavy use of custom Views and ViewGroups in Concepts. The app’s color wheel, for example, is a custom View drawing to a Canvas, which uses Animators for the reveal animation. View, Canvas, and Animator are all classes from the Android SDK.

“Android’s tools and platform are making it easier to address the variety of screen sizes and input methods, with well-structured APIs for developing and increasing the number of choices for testing. Plus, Kotlin allows us to create concise, readable code,” said David.


Concepts’ users prefer large screens

Tablets and foldables represent the bulk of Concepts’ investments and user base, and the company doesn’t see that changing any time soon. Currently, tablets deliver 50% higher revenue per user than smartphone users. Tablets also account for eight of the top 10 most frequently used devices among Concepts’ users, with the other two being ChromeOS devices.

Additionally, Concepts’ monthly users spend 70% more time engaging with the app on tablets than on traditional smartphones. The application’s rating is also 0.3 stars higher on tablets.

“We’re looking forward to future improvements in platform usability and customization while increasing experimentation with portable form factors. Continued efforts in this area will ensure high user adoption well into the future,” said David.

Start developing for large screens today

Learn how you can reach a growing audience of users by increasing development for large screens and foldables today.