How Youku Achieved Seamless Multi‑Device UI with a Responsive Android SDK

Responsive SDK

To address the high cost of making every app page responsive, Youku introduced a responsive SDK that centralizes screen information, layout rules (column count, size), and business data processing, enabling uniform handling of new screen sizes.

Loading Process Design

The standard page loading flow starts with data retrieval, followed by data parsing, page layout rendering, and container layout rendering. The responsive flow adds state‑change notifications, data clipping, responsive page layout, and responsive container layout. Two trigger scenarios are considered:

User requests data

Screen size changes

Architecture Design

Youku's unified business architecture integrates the responsive SDK, allowing all business teams to share adaptation rules and basic responsive controls, which reduces integration effort and ensures consistent adaptation across home, channel, playback, membership, search, and personal‑center pages.

Structurally, the responsive system consists of four cooperating parts: the unified architecture, the responsive SDK, responsive page layout, and responsive container layout.

Data Reprocessing

Responsive adaptation is not merely UI scaling; it requires second‑level data processing such as filtering, mapping, merging, and supplementing to ensure content fits larger screens like tablets and foldable devices. The SDK defines the protocol for this processing, while business teams implement the actual logic using the unified architecture’s data‑slice capability.

Data Filtering

Unimportant or incompatible components (e.g., certain Weex widgets) can be filtered out on large screens.

Data Mapping

Complex or poorly fitting components can be mapped to already adapted equivalents, such as replacing a video‑preview reservation component with a standard reservation component.

Data Merging

When a component cannot adapt, its data can be merged into a neighboring component, adjusting column counts to achieve a balanced layout.

Data Supplementation

To avoid blank spaces caused by insufficient items on larger screens, the server can provide extra data, and the client dynamically adjusts the displayed item count based on screen dimensions.

Page Responsiveness

Responsive state management handles orientation changes, split‑screen mode, and foldable‑screen unfolding. The SDK provides ResponsiveActivity and ResponsiveFragment base classes that invoke onResponsiveLayout when the screen size changes, allowing developers to recompute container columns, sizes, and re‑render the page.

/**
 * Responsive state callback
 * @param newConfig               Configuration information
 * @param responsiveLayoutState   Current responsive state
 * @param responsiveLayoutStateChanged  Whether the responsive state has changed
 */
protected void onResponsiveLayout(Configuration newConfig, int responsiveLayoutState, boolean responsiveLayoutStateChanged) {
    // implementation
}

The responsive state is defined by two thresholds: a width ratio of 1.67 × the standard 400 dp phone width and a height‑to‑width ratio of 1.25. When the width exceeds 1.67 × and the height‑to‑width ratio is ≤ 1.25, the device is considered in a large‑screen state; otherwise, it is a small‑screen state.

Different Responsive States

Two layouts are supported:

Small‑screen layout: folded foldable, split‑screen foldable, and tablet portrait.

Large‑screen layout: unfolded foldable and tablet landscape.

Container Responsiveness

The unified framework offers common responsive container layouts—carousel, grid, horizontal scroll, and waterfall—allowing rapid implementation of responsive effects. Column count adapts to the physical screen width, calculated as:

Responsive columns = Current screen width ÷ (Standard screen width ÷ Standard columns)

When the default column count leads to overly dense layouts (e.g., 8 columns on a tablet landscape), a secondary adjustment reduces the count (e.g., to 6 columns) for better visual balance.

Control Size Adaptation

Responsive base controls (e.g., ResponsiveConstraintLayout, ResponsiveFrameLayout, ResponsiveLinearLayout, ResponsiveRelativeLayout, ResponsiveRecyclerView) use a ratioType to compute width and height based on the container’s column count, margins, and spacing:

Control width = (Page width – left/right margins – total inter‑control spacing) ÷ Responsive columns

Conclusion

As foldable devices become mainstream, more apps will need to support them. Youku's responsive approach demonstrates how a single codebase can adapt to various screen sizes, reducing development cost and delivering a consistent user experience across phones, tablets, and foldable screens.