Lists let users select an item from a set of choices easily on Wear OS devices.
The Wearable UI Library includes the
WearableRecyclerView
class, which is a
RecyclerView
implementation for creating lists optimized for wearable devices. You can use this
interface in your wearable app by creating a new WearableRecyclerView
container.
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 of contacts. Each item might
have a short string and an associated icon. Alternatively, each item might have only a string
or an icon.
Note: Avoid complex layouts. Users should only need to glance at an item to understand what it is, especially with wearables' limited screen size.
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 Wear OS.
This lesson shows you how to use the WearableRecyclerView
class to create
lists in your Wear OS 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.
Add WearableRecyclerView to an activity using XML
The following layout (as inserted into, for example,
res/layout/activity_main.xml
)
adds a WearableRecyclerView
to an activity, so the list is
displayed properly on both round and square devices:
<androidx.wear.widget.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" />
The following shows the WearableRecyclerView
as it could
be applied to an activity:
Kotlin
class MainActivity : Activity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) } ... }
Java
public class MainActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } ... }
Create a curved layout

To create a curved layout for scrollable items in your wearable app:
-
Use
WearableRecyclerView
as your main container in the relevant XML layout. -
Set the
setEdgeItemsCenteringEnabled(boolean)
method totrue
. This will align the first and last items on the list vertically centered on the screen. -
Use the
WearableRecyclerView.setLayoutManager()
method to set layout of the items on the screen.
Kotlin
wearableRecyclerView.apply { // To align the edge children (first and last) with the center of the screen isEdgeItemsCenteringEnabled = true ... layoutManager = WearableLinearLayoutManager(this@MainActivity) }
Java
// To align the edge children (first and last) with the center of the screen wearableRecyclerView.setEdgeItemsCenteringEnabled(true); ... wearableRecyclerView.setLayoutManager( new WearableLinearLayoutManager(this));
If your app has specific requirements 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
WearableLinearLayoutManager.LayoutCallback
class and override the
onLayoutFinished
method.
The following code snippet shows an example of customizing the scrolling of items to scale
farther away from the center by extending the
WearableLinearLayoutManager.LayoutCallback
class:
Kotlin
/** How much should we scale the icon at most. */ private const val MAX_ICON_PROGRESS = 0.65f class CustomScrollingLayoutCallback : WearableLinearLayoutManager.LayoutCallback() { private var progressToCenter: Float = 0f override fun onLayoutFinished(child: View, parent: RecyclerView) { child.apply { // Figure out % progress from top to bottom val centerOffset = height.toFloat() / 2.0f / parent.height.toFloat() val yRelativeToCenterOffset = y / parent.height + centerOffset // Normalize for center progressToCenter = Math.abs(0.5f - yRelativeToCenterOffset) // Adjust to the maximum scale progressToCenter = Math.min(progressToCenter, MAX_ICON_PROGRESS) scaleX = 1 - progressToCenter scaleY = 1 - progressToCenter } } }
Java
public class CustomScrollingLayoutCallback extends WearableLinearLayoutManager.LayoutCallback { /** How much should we scale the icon at most. */ private static final float MAX_ICON_PROGRESS = 0.65f; private float progressToCenter; @Override public void onLayoutFinished(View child, RecyclerView parent) { // Figure out % progress from top to bottom float centerOffset = ((float) child.getHeight() / 2.0f) / (float) parent.getHeight(); float yRelativeToCenterOffset = (child.getY() / parent.getHeight()) + centerOffset; // Normalize for center progressToCenter = Math.abs(0.5f - yRelativeToCenterOffset); // Adjust to the maximum scale progressToCenter = Math.min(progressToCenter, MAX_ICON_PROGRESS); child.setScaleX(1 - progressToCenter); child.setScaleY(1 - progressToCenter); } }
Kotlin
wearableRecyclerView.layoutManager = WearableLinearLayoutManager(this, CustomScrollingLayoutCallback())
Java
CustomScrollingLayoutCallback customScrollingLayoutCallback = new CustomScrollingLayoutCallback(); wearableRecyclerView.setLayoutManager( new WearableLinearLayoutManager(this, customScrollingLayoutCallback));