Skip to content

Most visited

Recently visited

navigation

Creating Lists

Lists let users select an item from a set of choices easily on wearable devices. The Wearable UI Library includes the WearableRecyclerView class, which is a RecyclerView implementation for creating lists optimized for wearable devices. You can adapt to this interface in your wearable app by creating a new WearableRecyclerView container.

You should decide whether to use a WearableRecyclerView, based on the kind of user experience you want to provide. We recommend using the WearableRecyclerView for a long list of simple 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 WearableRecyclerView for very short or complex lists. In that case use the RecyclerView or a ListView from the regular Android support library.

By extending the existing RecyclerView class, WearableRecyclerView APIs display a vertically scrollable list of items in a straight list by default. You can use the WearableRecyclerView APIs to opt-in for a curved layout and a circular scrolling gesture in your wearable apps.

Figure 1. Default list view on Android Wear.

This lesson shows you how to use the WearableRecyclerView class to create lists in your Android Wear apps. The document also describes how to opt-in for a curved layout for your scrollable items, enable circular scrolling gesture, and customize the appearance of the children while scrolling.

Adding WearableRecyclerView to an Activity using XML

The following layout adds a WearableRecyclerView to an activity, so the list is displayed properly on both round and square devices:

res/layout/activity_main.xml

<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" />

Then apply the layout to your activity:

import android.os.Bundle;
import android.support.wearable.activity.WearableActivity;
import android.support.wearable.view.WearableRecyclerView

public class MainActivity extends WearableActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    ...
}

Creating a Curved Layout

To create a curved layout for scrollable items in your wearable app:

// To align the edge children (first and last) with the center of the screen
mRecyclerView.setCenterEdgeItems(true);
...
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);
    }
}

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 DefaultOffsettingHelper and override the updateChild method. It is important to call the 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);
    }
}

Adding a Circular Scrolling Gesture

By default, circular scrolling is disabled in the WearableRecyclerView. If you want to enable a circular scrolling gesture in your child view, use the WearableRecyclerView’s 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);
This site uses cookies to store your preferences for site-specific language and display options.

Hooray!

This class requires API level or higher

This doc is hidden because your selected API level for the documentation is . You can change the documentation API level with the selector above the left navigation.

For more information about specifying the API level your app requires, read Supporting Different Platform Versions.

Take a one-minute survey?
Help us improve Android tools and documentation.