+ 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;
+ }
+
+
+
diff --git a/docs/html/wear/preview/images/alignment.png b/docs/html/wear/preview/images/alignment.png
new file mode 100644
index 0000000000000..525b3341789a8
Binary files /dev/null and b/docs/html/wear/preview/images/alignment.png differ
diff --git a/docs/html/wear/preview/images/center_align.png b/docs/html/wear/preview/images/center_align.png
new file mode 100644
index 0000000000000..ca88ad77bac4c
Binary files /dev/null and b/docs/html/wear/preview/images/center_align.png differ
diff --git a/docs/html/wear/preview/images/wrv_new.png b/docs/html/wear/preview/images/wrv_new.png
new file mode 100644
index 0000000000000..c413c59a77c35
Binary files /dev/null and b/docs/html/wear/preview/images/wrv_new.png differ