Tag Archives: case study

Password manager Dashlane sees 70% increase in conversion rate for signing-in with passkeys compared to passwords

Posted by Milica Mihajlija, Technical Writer

This article was originally posted on Google for Developers

Dashlane is a password management tool that provides a secure way to manage user credentials, access control, and authentication across multiple systems and applications. Dashlane has over 18 million users and 20,000 businesses in 180 countries. It’s available on Android, iOS, macOS, Windows, and as a web app with an extension for Chrome, Firefox, Edge, and Safari.


The opportunity

Many users choose password managers because of the pain and frustration of dealing with passwords. While password managers help here, the fact remains that one of the biggest issues with passwords are security breaches. Passkeys on the other hand bring passwordless authentication with major advancements in security.

Passkeys are a simple and secure authentication technology that enables signing in to online accounts without entering a password. They cannot be reused, don't leak in server breaches of relying parties, and protect users from phishing attacks. Passkeys are built on open standards and work on all major platforms and browsers.

As an authentication tool, Dashlane’s primary goal is to ensure customers’ credentials are kept safe. They realized how significant the impact of passkeys could be to the security of their users and adapted their applications to support passkeys across devices, browsers, and platforms. With passkey support they provide users a secure and convenient access with a phishing-resistant authentication method.


Implementation

Passkeys as a replacement for passwords is a relatively new concept and to address the challenge of going from a familiar to an unfamiliar way of logging in, the Dashlane team considered various solutions.

On the desktop web they implemented conditional UI support through a browser extension to help users gracefully navigate the choice between using a password and a passkey to log into websites that support both login methods. As soon as the user taps on the username input field, an autofill suggestion dialog pops up with the stored passkeys and password autofill suggestions. The user can then choose an account and use the device screen lock to sign in.

Moving image showing continual UI experience on the web

Note: To learn how to add passkeys support with conditional UI to your web app check out Create a passkey for passwordless logins and Sign in with a passkey through form autofill.

On Android, they used the Credential Manager API which supports multiple sign-in methods, such as username and password, passkeys, and federated sign-in solutions (such as Sign-in with Google) in a single API. The Credential Manager simplifies the development process and it has enabled Dashlane to implement passkeys support on Android in 8 weeks with a team of one engineer.

Moving image showing authentication UI experience in android

Note: If you are a credential provider, such as a password manager app, check out the guide on how to integrate Credential Manager with your credential provider solution.


Results

Data shows that users are more satisfied with the passkey flows than the existing password flows.

The conversion rate is 92% on passkey authentication opportunities on the web (when Dashlane suggests a saved passkey for the user to sign in), compared to a 54% conversion rate on opportunities to automatically sign in with passwords. That’s a 70% increase in conversion rate compared to passwords–a great sign for passkey adoption.

Graph showing evolution of positive actions on passkeys, measuring the rates of authentication with a passkey and registration of a passkey over a six month period

Image showing password sign-in prompt
Password sign-in prompt.

Image showing passkey sign-in prompt
Passkey sign-in prompt.

The conversion rate here refers to user actions when they visit websites that support passkeys. If a user attempts to register or use a passkey they will see a Dashlane dialog appear on Chrome on desktop. If they proceed and create new or use an existing passkey it is considered a success. If they dismiss the dialog or cancel passkey creation, it’s considered a failure. The same user experience flow applies to passwords.

Dashlane also saw a 63% conversion rate on passkey registration opportunities (when Dashlane offers to save a newly created passkey to the user’s vault) compared to only around 25% conversion rate on suggestions to save new passwords. This indicates that Dashlane’s suggestions to save passkeys are more relevant and precise than the suggestions to save passwords.

Image showing save passkey prompt
Save passkey prompt.

Image showing save password prompt
Save password prompt.

Dashlane observed an acceleration of passkey usage with 6.8% average weekly growth of passkeys saved and used on the web.

graph showing % of Active users that performed a passkey related event, out of users having ever interacted with a passkey with a moving average on 7 days over a six month period
Save password prompt.

Takeaways

While passkeys are a new technology that users are just starting to get familiar with, the adoption rate and positive engagement rates show that Dashlane users are more satisfied with passkey flows than the existing password flows. 


“Staying up to date on developments in the market landscape and industry, anticipating the potential impact to your customers’ experience, and being ready to meet their needs can pay off. Thanks in part to our rapid implementation of the Credential Manager API, customers can rest assured that they can continue to rely on Dashlane to store and help them access services, no matter how authentication methods evolve.“ –Rew Islam, Director of Product Engineering and Innovation at Dashlane
 

Dashlane tracks and investigates all passkey errors and says that there haven’t been many. They also receive few questions from customers around how to use or manage their passkeys. This can be a sign of an intuitive user experience, clear help center documentation, a tendency of passkey users today already being knowledgeable about passkeys, or some combination of these factors.

With 2X higher user engagement on tablets, Zoom optimized for large screens on Android

Posted by Maru Ahues Bouza, Director, Android Developer Relations

Zoom is an all-in-one collaboration platform. Whether supporting work streams through video, chat, or the platform’s smart recordings and whiteboard tools, the team at Zoom aims to simplify personal and professional communications.

For Zoom engineers, creating the best experience for users means meeting them where they are across a variety of devices with unique form factors. Currently, there are more than 270 million large screens and foldables in use across the Android ecosystem. With this in mind, the Zoom team saw an opportunity to boost the app’s support across the Android ecosystem, helping to ensure a seamless user experience on any supported device.

Zoom users spend more time on large screens

In the last few years, the Zoom team has seen increased tablet usage among its user base. The Zoom team has seen increased tablet usage among its user base, and people who use Zoom on both their phone and tablet spend about 62% more time on their tablet. In addition, Zoom tablet users engaged about 2X more via Zoom than phone users.

Zoom engineers wanted to give users on large screens the same experience on their preferred devices as those using the app on a smartphone or computer.

“We wanted to make sure large screen users have the best experience possible when using Zoom,” said Will Chan, a product manager at Zoom. “Ensuring we could scale our mobile UI to address our user needs — regardless of their device size — was important, whether it's phones, foldables, or tablets.”

Zoom tablet users engage about 2X more than phone users, so we decided we would scale the app’s UI to large screens and foldables.” — Will Chan, product manager at Zoom

Improving multi-window support on foldables

Zoom engineers started by using the Jetpack WindowManager library, which provides developers all the resources they need to start optimizing across form factors. Using the library, Zoom engineers made the app’s tabletop UI for foldables more efficient by placing videos on the top screen and moving any controls to the bottom screen. This gave users a more hands-free experience, making it easier for them to use the app with their foldable devices.

For foldables, Zoom engineers also optimized the app’s Team Chat. After overhauling this feature, Zoom’s Team Chat worked seamlessly in split-screen mode. When in portrait mode, the app would now show a chat preview on the left side of the screen and the chat details on the right. Small changes like this make better use of on-screen space so that users can more easily manage the tasks at hand.

Adding more features can lead to greater complexity. To avoid complicating the app’s UI on foldables, Zoom engineers used ConstraintLayouts. These help simplify the app’s interface, reducing a lot of the complexity that comes with creating multiple layouts on a device. As a bonus, ConstraintLayouts also improve the app’s performance while switching between layouts, improving useability overall for users.

Making the most of larger screens

Large screen devices give users considerably more onscreen real estate to work with. And with so much available space on these form factors, Zoom engineers wanted to up the app’s multi-window support by allowing users to go into picture-in-picture mode. Just as with optimizing for split-screen modes on foldables, picture-in-picture allows users to better multitask while they’re in meetings or taking a phone call.

Zoom engineers also tweaked the app’s UI to scale accordingly when large screen users resized their windows. To do this, the Zoom team used the resizeable emulator in Android studios. Together, these tools let the engineering team preview how the new experiences would look across many different devices, allowing developers to test their optimization before putting it into production.

“Resizable emulators and Android Studios made testing and developing a lot easier, ensuring the user experience is great on multiple large screen devices,” said Will.

Larger screens provide the opportunity for an even more enhanced video experience. We want our users to have the option to engage on their phone, tablet, TV and more.” — Will Chan, product manager at Zoom

Easy optimization across Android

The suite of tools and resources provided by Android made it easier than ever for Zoom engineers to improve its app across form factors. Considering there are so many users on large screens and foldable devices today, Zoom developers were glad that they could create a more cohesive UX without having to exhaust all their resources.

The Zoom team is excited by the global reach of the Android platform and looks forward to seeing what Android will add to its already-large pool of developer resources and tools.

“Our engineering team appreciates all the investments being made in the Jetpack libraries. It’s made their lives much easier while developing for Android,” said Will.

Get started

Learn how you can optimize your app for large screens and foldables.

Google’s Contacts app created a new widget 25% faster using Jetpack Glance

Posted by Andre Labonte, the Glance API.

With over a billion downloads on Google Play, Google’s Contacts app is many Android users’ primary tool for viewing and organizing their personal contact information. Contacts developers aim to make the app an easy way for users to connect with the people who matter most to them. To make connecting even simpler, the Contacts engineering team built an entirely new widget from scratch using Jetpack Glance, Android’s latest framework for designing and developing widgets.

Contacts users enjoy connecting through widgets

Widgets make it easy for users to quickly access their favorite app features. Instead of having to navigate to and through an application, widgets can be added directly to a device’s home screen to create a shortcut to the information users need. With this in mind, Contacts engineers developed a new widget for users’ favorite contacts that allows them to reach friends and family faster.

Contacts widget is moved and placed in position on the home screen

“With the increasing popularity of home screen widgets,” said Phil Groman, product manager at Contacts, “we wanted to make our widget as useful as possible so that users can more easily connect with their most important contacts.”

A Google Opinion Rewards survey of Contacts widget users showed that about 80% of users with the Favorites widget on their home screen found it helpful for finding and connecting with their contacts. The survey used a 5-point scale, with 1 signifying “Not at all helpful” and 5 signifying “Extremely helpful.” Roughly 80% of the polled users selected options 4 or 5.

Faster development using Jetpack Glance

Previously, the Contacts team built the app’s widgets using RemoteViews, but the team switched to Jetpack Glance for its familiar APIs, concise Compose syntax, and out-of-the-box support of Material You dynamic theming. Jetpack Glance is also built on top of the Jetpack Compose Runtime, which makes development simple thanks to its modern declarative approach to UI and Kotlin APIs.

Contacts engineers also liked Jetpack Glance because the toolkit is backward compatible with RemoteViews code. Using Jetpack Glance, they could create the new Favorites widget with support as far back as API 23 of RemoteViews. Currently, the Favorites widget supports back to API 31. Jetpack Glance also offers a WorkManager-backed update mechanism, making it easier for developers to load a widget’s display data.

Android has additional documentation available on the Jetpack Glance landing page to help guide the development and implementation of widgets, which Contacts engineers used to build the Favorites widget. These resources helped Contacts engineers learn how to build responsive dynamic layouts for resizing, incorporate material themes, add UIs for empty and error states, and verify accessibility features like content descriptions.

After the Contacts team built the new Favorites widget, engineers estimated end-to-end development using Jetpack Glance to be 25% faster compared to another Contacts widget built using RemoteViews.

Google’s Contacts engineers estimated a 25% increase in end-to-end development speed of building a widget using Jetpack Glance compared to RemoteViews.

Doing more with Jetpack Glance

Thanks to Jetpack Glance, the Contacts team greatly reduced the time it took to produce a widget. Jetpack Glance’s Compose-based framework and intuitive Kotlin APIs made development easier, allowing engineers to quickly get a new widget off the ground and out to users.

“Jetpack Glance helped a lot during development,” said Zhen Fan, a software engineer at Contacts. “It increased development speed and made developers happier overall.”

Right now, the Contacts team is beginning to migrate another one of its widgets from RemoteViews to Jetpack Glance. The team hopes to incorporate more complex UI versions by making the switch, allowing engineers to develop richer features for users to enjoy.

Get started

Learn more about developing engaging widgets with Jetpack Glance.

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.