Wear 2.0 introduces the {@code WearableRecyclerView} class for displaying and manipulating a vertical list of items optimized for round displays. {@code WearableRecyclerView} extends the existing {@code RecyclerView} class to provide a curved layout and a circular scrolling gesture in wearable apps.
You can adapt to this interface in your wearable app by creating a new {@code WearableRecyclerView} container.
You should decide whether to use a {@code WearableRecyclerView}, based on the kind of user experience you want to provide. We recommend using the {@code WearableRecyclerView} for a simple, long list of items, such as an application launcher, or a list contacts. Each item might have a short string and an associated icon. Alternatively, each item might have only a string or an icon. We do not recommend using a {@code WearableRecyclerView} for short or complex lists.
This document describes how to create a curved layout for your scrollable items and properly align them along the curve.
To create a curved layout for scrollable items in your wearable app:
CircularOffsettingHelper circularHelper = new CircularOffsettingHelper();
mRecyclerView.setOffsettingHelper(circularHelper);
public class CircularOffsettingHelper extends OffsettingHelper {
@Override
public void updateChild(View child, WearableRecyclerView parent) {
int progress = child.getTop() / parent.getHeight();
child.setTranslationX(-child.getHeight() * progress);
}
}
Note: {@code DefaultOffsettingHelper} class offsets the child items along a predefined UX curve, but the operation can cut off part of the child view if it is not scaled down accordingly. This is because the default curve attempts to fit 5 items on the screen, regardless of their size. If you do not wish to scale your items, you should consider additional padding.
The following code example demonstrates how to add {@code WearableRecyclerView} to a layout:
<android.support.wearable.view.WearableRecyclerView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/recycler_launcher_view" android:layout_width="match_parent" android:layout_height="match_parent" android:scrollbars="vertical" />
To customize the appearance of the children while scrolling (for example, scale the icons and text while the items scroll away from the center), extend the {@code DefaultOffsettingHelper} and override the {@code updateChild } method. It is important to call the {@code super.updateChild(child, parent)} to offset the children along the curve. However, if for any particular child you do not wish them to follow a curve, you can chose not to call the super method for that particular child.
public class MyOffsettingHelper extends DefaultOffsettingHelper {
/** How much should we scale the icon at most. */
private static final float MAX_ICON_PROGRESS = 0.65f;
private float mProgressToCenter;
public OffsettingHelper() {}
@Override
public void updateChild(View child, WearableRecyclerView parent) {
super.updateChild(child, parent);
// Figure out % progress from top to bottom
float centerOffset = ((float) child.getHeight() / 2.0f) / (float) mParentView.getHeight();
float yRelativeToCenterOffset = (child.getY() / mParentView.getHeight()) + centerOffset;
// Normalize for center
mProgressToCenter = Math.abs(0.5f - yRelativeToCenterOffset);
// Adjust to the maximum scale
mProgressToCenter = Math.min(mProgressToCenter, MAX_ICON_PROGRESS);
child.setScaleX(1 - mProgressToCenter);
child.setScaleY(1 - mProgressToCenter);
}
}
By default, circular scrolling is disabled in the {@code WearableRecyclerView}. If you want to enable circular scrolling gesture in your child view, use the {@code WearavleRecyclerView}’s {@code setCircularScrollingGestureEnabled()} method. You can also customize the circular scrolling gesture by defining one or both of the following:
The following code snippet shows how to set these methods:
setCircularScrollingGestureEnabled(true); setBezelWidth(0.5f); setScrollDegreesPerScreen(90);
To ensure that the layout for WearableRecyclerView is adaptable to different types of child views, the WearableRecyclerView class, by default, chooses the middle left edge (X=0, Y=Half the child height) as the anchor coordinates for the child item. Using the default anchor coordinates can result in offsetting the child items from the left edge of the watch face. To customize the anchor coordinates of your child view along the curve, you can overwrite the {@code adjustAnchorOffsetXY()} method. You can calculate the X (horizontal) and Y (vertical) offset of the child item, and set it using the {@code adjustAnchorOffsetXY()} method to properly align items along the curve. The coordinates should be with relation to the child view.
Figure 1. Imaginary UX curve and anchor points on the curve.
The code snippet below, calculates the X offset for a child item in which the width of the icon is same as the height of the child item. In this case, the anchor coordinates for the child item are at the center of the icon.
@Override
protected void adjustAnchorOffsetXY(View child, float[] anchorOffsetXY) {
anchorOffsetXY[0] = child.getHeight() / 2.0f;
}