In this subchapter, let's explore the 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" /> 

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 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.

DelayedConfirmationView

A DelayedConfirmationView is an 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>

<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"/>

<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"/>

@Override
// Activity
publicboolean onKeyDown(int keyCode,KeyEventevent){
if(event.getRepeatCount()==0){
if(keyCode ==KeyEvent.KEYCODE_STEM_1){
// Do stuff
returntrue;
}elseif(keyCode ==KeyEvent.KEYCODE_STEM_2){
// Do stuff
returntrue;
}elseif(keyCode ==KeyEvent.KEYCODE_STEM_3){
// Do stuff
returntrue;
}
}
returnsuper.onKeyDown(keyCode,event);
}