CODEWITHSUNDEEP
androidlistviewandroid-wear-2.0
adhiti
adhiti

Reputation: 39

How to create Circular view on android wear?

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

Like this:

enter image description here

Circular list is seen in android wear app launcher.

Upvotes: 3

Views: 3963

Answers (2)

Michael
Michael

Reputation: 31

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.

Upvotes: 3

Sufian
Sufian

Reputation: 6555

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.

Upvotes: 1

Related Questions