Wearable ListView In Android Wear

March 5, 2015 /
Android /
By Chetana

This example will explain about the new widget WearableListView which is an optimized listview and is easy to use on smaller devices like android wearables. This tutorial will also explain the key classes and interfaces of WearableListView class.

The key classes and interfaces of WearableListView class are listed below:

1.) WearableListView
2.) WearableListView.ViewHolder
3.) WearableListView.Adapter
4.) WearableListView.Item
5.) WearableListView.ClickListener
6.) WearableListView

WearableListView is an another ListView component which displays vertically scrollable items. As I said earlier WearableListView is optimised ListView; the first optimization is it’s a child class of RecyclerView and strictly following ViewHolder pattern. I will explain recyclerview in detail in my upcoming posts. Another optimization is it’s focused item snaps to the center of the screen automatically when the user stops scrolling. Usually wearablelistview displays 3 items at a time with a focused item in the center of the screen.

Follow the steps below to create an example of wearablelistview:

Step1: Create a new android project in your android environment.

Step2: Write following into your main activity:

package com.example.myandroidwear;

import android.app.Activity;
import android.content.BroadcastReceiver;
import android.content.Context;
import android.content.Intent;
import android.content.IntentFilter;
import android.graphics.Color;
import android.os.BatteryManager;
import android.os.Bundle;
import android.support.wearable.view.WatchViewStub;
import android.support.wearable.view.WearableListView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Calendar;

public class MainActivity extends Activity {

private TextView mTextView;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final WatchViewStub stub = (WatchViewStub) findViewById(R.id.watch_view_stub);
stub.setOnLayoutInflatedListener(new WatchViewStub.OnLayoutInflatedListener() {
@Override
public void onLayoutInflated(WatchViewStub stub) {
mTextView = (TextView) stub.findViewById(R.id.text);
}
});
}

public void btnSimpleClick(View view){
Intent intent = new Intent(this, SimpleListActivity.class);
startActivity(intent);
}
}

Step3: Create and write following into SimpleList activity:

package com.example.myandroidwear;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.support.wearable.view.WatchViewStub;
import android.support.wearable.view.WearableListView;
import android.view.LayoutInflater;
import android.view.ViewGroup;
import android.widget.TextView;

import java.util.ArrayList;

public class SimpleListActivity extends Activity implements WearableListView.ClickListener{

private WearableListView mListView;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final WatchViewStub stub = (WatchViewStub) findViewById(R.id.watch_view_stub);
stub.setOnLayoutInflatedListener(new WatchViewStub.OnLayoutInflatedListener() {
@Override
public void onLayoutInflated(WatchViewStub stub) {
mListView = (WearableListView) stub.findViewById(R.id.listView1);
mListView.setAdapter(new MyAdapter(SimpleListActivity.this));
mListView.setClickListener(SimpleListActivity.this);
}
});
}

private static ArrayList<String> listItems;
static {
listItems = new ArrayList<String>();
listItems.add("Monday");
listItems.add("Tuesday");
listItems.add("Wednesday");
listItems.add("Thursday");
listItems.add("Friday");
listItems.add("Saturday");
}

@Override
public void onClick(WearableListView.ViewHolder viewHolder) {

}

@Override
public void onTopEmptyRegionClick() {

}

private class MyAdapter extends WearableListView.Adapter {
private final LayoutInflater mInflater;

private MyAdapter(Context context) {
mInflater = LayoutInflater.from(context);
}

@Override
public WearableListView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
return new WearableListView.ViewHolder(
mInflater.inflate(R.layout.row_simple_item_layout, null));
}

@Override
public void onBindViewHolder(WearableListView.ViewHolder holder, int position) {
TextView view = (TextView) holder.itemView.findViewById(R.id.textView);
view.setText(listItems.get(position).toString());
holder.itemView.setTag(position);
}

@Override
public int getItemCount() {
return listItems.size();
}
}
}

Step4: Write below into main layout xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.wearable.view.WatchViewStub
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/watch_view_stub"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:rectLayout="@layout/rect_activity_listview"
app:roundLayout="@layout/round_activity_listview"
tools:context=".MyActivity"
tools:deviceIds="wear">
</android.support.wearable.view.WatchViewStub>

Step5: Write below into round_activity_listview and rect_activity_listview:

round_activity_listview.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MyActivity"
tools:deviceIds="wear_round">

<android.support.wearable.view.WearableListView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/listView1"/>

</RelativeLayout>

rect_activity_listview.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MyActivity"
tools:deviceIds="wear_square">

<android.support.wearable.view.WearableListView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/listView1"/>

</LinearLayout>

Step6: Create and write below into row_simple_item_layout.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Medium Text"
android:id="@+id/textView" />
</LinearLayout>

Step7: Don’t forget to add your activity into manifest. Run to see output like below: