Posted by the Android workforce
As the biggest home streaming and digital content material service in Japan, U-NEXT is all the time searching for new methods to attach its customers to their favourite content material. With only a single utility, the platform hosts an intensive library of over 840,000 titles, starting from films, anime, and stay streams to manga, magazines, and e-books.
At all times searching for methods to enhance its UX for its increasing person base, U-NEXT lately turned to the rising market of massive screens and foldables, which incorporates gadgets like tablets and Chromebooks. Right here, U-NEXT engineers noticed a possibility to create a greater strategy to view content material by specializing in what makes these gadgets particular. For instance, higher multi-window help on bigger screens may provide a extra visually wealthy UX, whereas an improved foldable UX would possibly higher mimic the expertise readers get with a standard paperback.
However some customers ran into bugs whereas utilizing the U-NEXT app with these bigger and foldable viewing codecs. As an example, the app would usually cover essential buttons when customers opened U-NEXT on bigger screens, forcing them to look the web page for these navigation instruments.
To optimize a UX overhaul to help these codecs, the U-NEXT workforce tackled the undertaking in two phases: take away any current bugs, then add the options that its large-screen customers would profit from essentially the most.
 |
Clearing out the bugs
To repair the visibility subject for essential in-app navigation buttons, U-NEXT engineers used a ConstraintLayout to set constraint boundaries. These boundaries prevented UI components from being pushed off-screen whereas guaranteeing they’re all the time oriented accurately, regardless of the display screen measurement.
What’s extra, U-NEXT’s utility didn’t all the time show correctly on bigger screens. For instance, pages displaying browsable video lists sometimes encompass a header and a curated listing of content material. These lists are alleged to occupy many of the area on the web page. However on bigger screens, the headers occupied essentially the most on-screen actual property, making video content material more durable to navigate. The U-NEXT workforce resolved this subject by proscribing the width of the header picture on bigger screens, giving the listing extra space and making looking simpler for large-screen customers.
When customers view books on the U-NEXT utility, they will faucet the display screen to disclose a horizontal, scrollable wheel that lets them rapidly and simply navigate their place within the textual content. However when customers tried to entry this navigation software on Chromebooks, it wouldn’t seem on the web page.
“Initially, we used SystemUiVisibility to find out whether or not a Chromebook was full-screen when a person tapped it,” mentioned Tomoya Miwa, principal engineer at U-NEXT. “If SystemUiVisibility detected it wasn’t full display screen, it’s alleged to show the controller. Nonetheless, this listener isn’t known as on when SystemUiVisibility is modified on Chromebooks, so the controller couldn’t be displayed.”
This meant U-NEXT needed to change how they handle the visibility of the controller when SystemUiVisibility modifications on Chromebooks. After this bug repair, the applying would cover and show the controller on the similar time when the display screen is tapped on a Chromebook, resolving the problem for these customers.
The final bug U-NEXT devs tackled was one which briefly disrupted video when customers folded their gadget throughout viewing. Switching gadget orientation whereas viewing content material is meant to be seamless, however the computerized deletion and recreation of the Exercise throughout orientation modifications brought on movies to momentarily reduce out.
As a substitute of letting Android deal with these configuration modifications routinely, U-NEXT builders modified the app to deal with them manually. Utilizing onConfigurationChanged(), the workforce overrode the change and prevented the UI components from routinely being deleted and recreated, letting the app protect them and forestall any viewing interruptions.
Making essentially the most with extra kind components
As a part of its characteristic overhaul, U-NEXT changed the standard navigation bar with a navigation rail, which U-NEXT engineers anticipated would considerably enhance the person expertise. U-NEXT made this transformation according to Android’s Do’s and Do not for Giant Screens presentation from its latest Android Developer Summit, which supplied finest practices for builders optimizing for big screens.
“Reachability is a crucial issue in relation to curating comfy person experiences,” mentioned Tomoya. “With a standard, horizontal navigation bar, it makes it tough to succeed in the buttons within the center. With a navigation rail, it turns into a lot simpler to succeed in these buttons.”
 |
Subsequent, the workforce enhanced help for two-page spreads when customers considered any e-books content material on massive screens. Apps sometimes show a single web page when gadgets are oriented vertically on massive screens and foldables. However as a result of most massive screens and foldables provide loads of room for a double-page view, U-NEXT builders wished to make sure customers would all the time see a double-page unfold whether or not in portrait or panorama orientation—even when the gadget was barely folded.
The U-NEXT workforce additionally included some smaller, quality-of-life updates to make the person expertise for big screens and foldables even higher. These included enhancing the app’s compatibility with Compose by guaranteeing the Navigation element was constant on each display screen measurement, including higher help for Google Play in-app billing on massive screens, and optimizing picture-in-picture viewing.
 |
Android help makes optimization straightforward
The U-NEXT workforce was stunned by how straightforward it was to optimize its app for big screens and foldable gadgets. Due to Android’s developer assets, U-NEXT was in a position to enhance content material viewing on its app, throughout gadgets, whereas additionally minimizing effort and time.
“It’s not that tough,” mentioned Tomoya. “Introducing the navigation was comparatively straightforward, and foldable help basically just isn’t laborious so long as your app is suitable with fundamental display screen rotation.”
Since updating the U-NEXT app to raised help massive screens, pill installations have elevated by 1.5X. Moreover, the watch time from customers on massive display screen gadgets jumped by greater than 10%.
Trying ahead, the U-NEXT workforce plans to maintain increasing its app’s massive display screen capabilities by enhancing mouse and keyboard compatibility, introducing listing element view to enhance search performance, including higher help for tabletop mode, and implementing drag-and-drop options to make content material sharing simpler.
U-NEXT is happy to see Android add extra assets to its massive and increasing listing of documentation, together with the lately up to date Materials 3 library, which is able to additional assist help the rising variety of customers with massive display screen and foldable gadgets.
Begin optimizing for big screens as we speak
Extra individuals are utilizing massive screens, foldables, and different up-and-coming kind components. Be taught how one can higher help your customers on these gadgets with examples from Android’s Giant Display Gallery.
