Exploring UI components for Wear devices

In this subchapter, let's explore the commonly used Wear-specific UI components. In Wear application programming, we can use all the components that we use in mobile app programming, but how we accommodate the visual appearance of components in the Wear device needs to be well thought of before using it.

WatchViewStub: WatchViewStub helps in rendering the views for different form factors of Wearable devices. If your application is being installed on a round watch device, WatchViewStub will load the specific layout configuration for round watches. If it is square, it will load the square layout configuration:

<?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_main"
    app:roundLayout="@layout/round_activity_main"
    tools:context="com.ashokslsk.wearapp.MainActivity"
    tools:deviceIds="wear"></android.support.wearable.view.WatchViewStub>

WearableRecyclerView: WearableRecyclerView is the implementation of recyclerview specific to wearable devices. It provides a flexible view for datasets in the Wearable device viewport. We will explore WearbaleRecyclerView in detail in the coming chapters:

 <android.support.wearable.view.WearableRecyclerView
   android:id="@+id/recycler_launcher_view"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:scrollbars="vertical" /> 

Note: WearableListView is deprecated; the Android community recommends using WearableRecyclerView.

CircledImageVIew: An Imageview surrounded by a circle. A very handy component for presenting the image in round form factor Wearable devices:

<?xml version="1.0" encoding="utf-8"?>
<android.support.wearable.view.CircledImageView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/circledimageview"
    app:circle_color="#2878ff"
    app:circle_radius="50dp"
    app:circle_radius_pressed="50dp"
    app:circle_border_width="5dip"
    app:circle_border_color="#26ce61"
    android:layout_marginTop="15dp"
    android:src="@drawable/skholinguaicon"
    android:layout_gravity="center_horizontal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

BoxInsetLayout: This Layout extends directly to Framelayout and it has the ability to recognize the form factor of the Wearable device. Shape-aware FrameLayout can box its children in the center square of the screen:

<android.support.wearable.view.BoxInsetLayout    xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.ranjan.androidwearuicomponents.BoxInsetLayoutDemo">

<TextView
    android:text="@string/hello_world"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_box="all" />

</android.support.wearable.view.BoxInsetLayout>

After the Wear 2.0 release, a few components were deprecated for an immersive activity experience and Google strictly prohibits using them; we can still use all the components that we know in Android programming.

Showing confirmations

Compared to confirmations in handheld Android devices, in Wear applications, confirmations should occupy the whole screen or more than what handheld devices show as a dialogue box. This ensures users can see these confirmations at one glance. The Wearable UI library helps in displaying confirmation timers and animated timers in Android Wear.

DelayedConfirmationView

A DelayedConfirmationView is an automatic confirmation view based on the timer:

<android.support.wearable.view.DelayedConfirmationView
    android:id="@+id/delayed_confirm"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:src="@drawable/cancel_circle"
    app:circle_border_color="@color/lightblue"
    app:circle_border_width="4dp"
    app:circle_radius="16dp">
</android.support.wearable.view.DelayedConfirmationView>

Wear navigation and actions

In the new release of Android Wear, the Material design library adds the following two interactive drawers:

• Navigation drawer
• Action drawer

Navigation drawer

Lets user switch between views in the application. Developers can allow the drawer to be opened anywhere within the scrolling parent's content by setting the setShouldOnlyOpenWhenAtTop() method to false:

<android.support.wearable.view.drawer.WearableNavigationDrawer
    android:id="@+id/top_drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_red_light"
    app:navigation_style="single_page"/>

Action drawer

The action drawer gives access to easy and common actions in your application. By default, action drawer appears at the bottom of the screen and provides specific actions to users:

<android.support.wearable.view.drawer.WearableActionDrawer
    android:id="@+id/bottom_drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_blue_dark"
    app:show_overflow_in_peek="true"/>

Multifunction buttons

In addition to the power button, Android Wear supports another button called the multifunction button on the device. The Wearable support library provides API for determining the multifunction buttons included by the manufacturer:

@Override
// Activity
public boolean onKeyDown(int keyCode, KeyEvent event){
  if (event.getRepeatCount() == 0) {
    if (keyCode == KeyEvent.KEYCODE_STEM_1) {
      // Do stuff
      return true;
    } else if (keyCode == KeyEvent.KEYCODE_STEM_2) {
      // Do stuff
      return true;
    } else if (keyCode == KeyEvent.KEYCODE_STEM_3) {
      // Do stuff
      return true;
    }
  }
  return super.onKeyDown(keyCode, event);
}

Visit https://developer.android.com/training/wearables/ui/index.html for any sort of query that you might have on design guidelines for Wear device programming.