CODEWITHSUNDEEP
androidwear-os
A.Danibo
A.Danibo

Reputation: 624

Curved Layout on Android Wear 2.0

I'm trying to create a curved layout to list some elements and adapt it to the android wear, but the Google Android Developers page about it is very unclear. Did anyone manage to create a curved layout?

This is the Google Developers that I'm talking about:

https://developer.android.com/training/wearables/ui/lists.html#creating

If you have any tips to realize it, I'd be glad to see it.

Upvotes: 3

Views: 2137

Answers (1)

Wasim Abuzaher
Wasim Abuzaher

Reputation: 814

I hope you figured it out by now, but if not, here are the steps with some example code:

in your round\activity_main.xml use android.support.wear.widget.WearableRecyclerView as the root/main element:

<?xml version="1.0" encoding="utf-8"?>
<android.support.wear.widget.WearableRecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rv_test"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

<!-- ... -->

</android.support.wear.widget.WearableRecyclerView>

Then on the MainActivity extend WearableActivity:

import android.os.Bundle;
import android.support.wearable.activity.WearableActivity;
import android.support.wear.widget.WearableRecyclerView

public class MainActivity extends WearableActivity {

    private android.support.wear.widget.WearableRecyclerView wearableRecyclerView;


    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        wearableRecyclerView = findViewById(R.id.rv_test);
        wearableRecyclerView.setLayoutManager(new WearableLinearLayoutManager(MainActivity.this));
        wearableRecyclerView.setEdgeItemsCenteringEnabled(true);
    }

    ...
}

You need to make sure you are using the right import for WearableRecyclerView (android.support.wear.widget.WearableRecyclerView) on both the xml and java

Next (which isn't explained in the Developers webpage is creating a ViewHolder:

1 - First create an xml layout (here called circle_view.xml):

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/close_button"
        android:id="@+id/circledImageView"/>

</LinearLayout>

2 - Then create a java class (here called TestHolder.java) and extended it to RecyclerView.ViewHolder:

public class TestHolder extends RecyclerView.ViewHolder {
                protected ImageView imageView;
                public TestHolder(View itemView) {
                    super(itemView);
                    imageView = (ImageView) itemView.findViewById(R.id.circledImageView);
                }
            }

Then back in the MainActivity.java add the following below the wearableRecyclerView.setEdgeItemsCenteringEnabled(true); inside onCreate:

RecyclerView.Adapter<TestHolder> testHolderAdapter = new RecyclerView.Adapter<TestHolder>() {
            @Override
            public TestHolder onCreateViewHolder(ViewGroup parent, int viewType) {
                View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.circle_view, parent, false);
                return new TestHolder(view);
            }

            @Override
            public void onBindViewHolder(TestHolder holder, int position) {

            }

            @Override
            public int getItemCount() {
                //change return number to desired number of items or an array size or list length
                return 5;
            }
        };
        wearableRecyclerView.setAdapter(testHolderAdapter);

Thats all, run your app in a rounded wear emulator or on a round/round-with-chin watch and enjoy the curvy list

Upvotes: 3

Related Questions