How to create Circular view on android wear?

Question

How can I create circular list for round watch as in android wear 2.0 ?.

Like this:

Circular list is seen in android wear app launcher.

Answer 1

First of all you need to replace your ListView with a WearableRecyclerView. It can be used like a normal ListView. But make sure, you import the right one from android.support.wear.widget. DON'T use the one from android.support.wearable.view. This one should be crossed out, so it won't take you long to check if you're using the right one. If there's just one WearableRecyclerViewto choose from, make sure to add compile 'com.android.support:wear:27.0.0' to the dependencies in your build.gradle (wear) file. Also make sure that you're using <android.support.wear.widget.WearableRecyclerView/> in your activity.xml. If you just want a circular ListView without any custom item-scaling, just call this in your onLayoutInflated() method:

your_recyclerview.setEdgeItemsCenteringEnabled(true);
your_recyclerview.setLayoutManager(new WearableLinearLayoutManager(your_activity_context));

If you want to make items scaling up when they get closer to the center of your screen, things get a little more complicated.

First: paste this in your Activity.java:

private class CustomScrollingLayoutCallback extends WearableLinearLayoutManager.LayoutCallback {

        private static final float MAX_ICON_PROGRESS = 2F;

        @Override
        public void onLayoutFinished(View child, RecyclerView parent) {

            float centerOffset = ((float) child.getHeight() / 2.0f) / (float) parent.getHeight();
            float yRelativeToCenterOffset = (child.getY() / parent.getHeight()) + centerOffset;

            float progresstoCenter = (float) Math.sin(yRelativeToCenterOffset * Math.PI);

            float mProgressToCenter = Math.abs(0.5f - yRelativeToCenterOffset);

            mProgressToCenter = Math.min(mProgressToCenter, MAX_ICON_PROGRESS);

            child.setScaleX(1 - mProgressToCenter);
            child.setScaleY(1 - mProgressToCenter);
            child.setX(+(1 - progresstoCenter) * 100);
        }

    }

Then go back to your onLayoutInflated() method, and type the following:

    CustomScrollingLayoutCallback customScrollingLayoutCallback = new CustomScrollingLayoutCallback();
    your_recycler_view.setLayoutManager(new WearableLinearLayoutManager(your_context, customScrollingLayoutCallback));
    your_recycler_view.setCircularScrollingGestureEnabled(true);

done.

Answer 2

This is now possible with Android Wear 2.0's WearableRecyclerView.

According to Android Developer Docs:

Wear 2.0 introduces the WearableRecyclerView class for displaying and manipulating a vertical list of items optimized for round displays. WearableRecyclerView extends the existing RecyclerView class to provide a curved layout and a circular scrolling gesture in wearable apps.

You may like to read more about Android Wear 2.0 Preview 3.