How JioHotstar optimized its UX for foldables and tablets

To assist guarantee a premium expertise for its huge viewers, JioHotstar elevated the viewing expertise by optimizing their app for foldables and tablets. They achieved this by following Google’s adaptive app steerage and using sources like  samples, codelabs, cookbooks, and documentation to assist create a persistently seamless and fascinating expertise throughout all show sizes.

JioHotstar’s giant display problem

JioHotstar provided a wonderful consumer expertise on customary telephones and the crew needed to make the most of new type components. To begin, the crew evaluated their app towards the giant display app high quality pointers to know the optimizations required to increase their consumer expertise to foldables and tablets. To attain Tier 1 giant display app standing, the crew applied two strategic updates to adapt the app throughout numerous type components and differentiate on foldables. By addressing the distinctive challenges posed by foldable and pill units, JioHotstar goals to ship a high-quality and immersive expertise throughout all show sizes and facet ratios.

What they wanted to do

JioHotstar’s consumer interface, designed primarily for traditional cellphone shows, encountered challenges in adapting hero picture facet ratios, menus, and present screens to the various display sizes and resolutions of different type components. This typically led to picture cropping, letterboxing, low decision, and unutilized house, notably in panorama mode. To assist absolutely leverage the capabilities of tablets and foldables and ship an optimized consumer expertise throughout these machine varieties, JioHotstar targeted on refining the UI to make sure optimum format flexibility, picture rendering, and navigation throughout a wider vary of units.

What they did

For a greater viewing expertise on giant screens, JioHotstar took the initiative to boost its app by incorporating WindowSizeClass and creating optimized layouts for compact, medium and prolonged widths. This allowed the app to adapt its consumer interface to varied display dimensions and facet ratios, guaranteeing a constant and visually interesting UI throughout completely different units.

val sizeClass = currentWindowAdaptiveInfo().windowSizeClass

if(sizeClass.isWidthAtLeastBreakpoint(WIDTH_DP_EXPANDED_LOWER_BOUND)) {
    showExpandedLayout()
} else if(sizeClass.isHeightAtLeastBreakpoint(WIDTH_DP_MEDIUM_LOWER_BOUND)) {
    showMediumLayout()
} else {
    showCompactLayout()
}

The breakpoints are so as, from the most important to the smallest, as internally the API checks for with a better or equal then, so any width that’s no less than better or equal then EXPANDED will at all times be better than MEDIUM.

JioHotstar is ready to present the premium expertise distinctive to foldable units: Tabletop Mode. This characteristic conveniently relocates the video participant to the highest half of the display and the video controls to the underside half when a foldable machine is partially folded for a handsfree expertise.