diff --git a/wearable/wear/WatchFace/Wearable/src/main/java/com/example/android/wearable/watchface/config/ComplicationSimpleConfigActivity.java b/wearable/wear/WatchFace/Wearable/src/main/java/com/example/android/wearable/watchface/config/ComplicationSimpleConfigActivity.java
index c63333f..f60f1f5 100644
--- a/wearable/wear/WatchFace/Wearable/src/main/java/com/example/android/wearable/watchface/config/ComplicationSimpleConfigActivity.java
+++ b/wearable/wear/WatchFace/Wearable/src/main/java/com/example/android/wearable/watchface/config/ComplicationSimpleConfigActivity.java
@@ -16,58 +16,58 @@
 package com.example.android.wearable.watchface.config;
 
 import android.app.Activity;
-import android.content.ComponentName;
-import android.content.Context;
 import android.content.Intent;
-import android.content.res.TypedArray;
-import android.graphics.drawable.Drawable;
 import android.os.Bundle;
-import android.support.wearable.complications.ComplicationHelperActivity;
 import android.support.wearable.complications.ComplicationProviderInfo;
 import android.support.wearable.complications.ProviderChooserIntent;
-import android.support.wearable.view.WearableListView;
+import android.support.wearable.view.WearableRecyclerView;
 import android.util.Log;
-import android.view.LayoutInflater;
-import android.view.View;
-import android.view.ViewGroup;
-import android.widget.ImageView;
-import android.widget.TextView;
 
-import com.example.android.wearable.watchface.watchfaces.ComplicationSimpleWatchFaceService;
 import com.example.android.wearable.watchface.R;
-
-import java.util.ArrayList;
-import java.util.List;
+import com.example.android.wearable.watchface.models.ComplicationsSimpleWatchFaceSettingsConfigData;
+import com.example.android.wearable.watchface.watchfaces.ComplicationSimpleWatchFaceService;
 
 /**
  * The watch-side config activity for {@link ComplicationSimpleWatchFaceService}, which
- * allows for setting complications on the left and right of watch face.
+ * allows for setting the left and right complications of watch face along with the marker (watch
+ * face arms, ticks) color, unread notifications toggle, and background complication.
  */
-public class ComplicationSimpleConfigActivity extends Activity implements
-        WearableListView.ClickListener {
+public class ComplicationSimpleConfigActivity extends Activity {
 
-    private static final String TAG = "CompSimpleConfig";
+    private static final String TAG = ComplicationSimpleConfigActivity.class.getSimpleName();
 
-    private static final int PROVIDER_CHOOSER_REQUEST_CODE = 1;
+    static final int COMPLICATION_CONFIG_REQUEST_CODE = 888;
 
-    private WearableListView mWearableConfigListView;
-    private ConfigurationAdapter mAdapter;
+    private WearableRecyclerView mConfigWearableRecyclerView;
+
+    private ComplicationSimpleRecyclerViewAdapter mWearableRecyclerViewAdapter;
 
     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
+
         setContentView(R.layout.activity_complication_simple_config);
 
-        mAdapter = new ConfigurationAdapter(getApplicationContext(), getComplicationItems());
+        mWearableRecyclerViewAdapter =
+                new ComplicationSimpleRecyclerViewAdapter(
+                        ComplicationsSimpleWatchFaceSettingsConfigData.getSettingsData());
 
-        mWearableConfigListView = (WearableListView) findViewById(R.id.wearable_list);
-        mWearableConfigListView.setAdapter(mAdapter);
-        mWearableConfigListView.setClickListener(this);
+        mConfigWearableRecyclerView =
+                (WearableRecyclerView) findViewById(R.id.wearable_recycler_view);
+
+        // Aligns the first and last items on the list vertically centered on the screen.
+        mConfigWearableRecyclerView.setCenterEdgeItems(true);
+
+        // Improves performance because we know changes in content do not change the layout size of
+        // the RecyclerView.
+        mConfigWearableRecyclerView.setHasFixedSize(true);
+
+        mConfigWearableRecyclerView.setAdapter(mWearableRecyclerViewAdapter);
     }
 
     @Override
     protected void onActivityResult(int requestCode, int resultCode, Intent data) {
-        if (requestCode == PROVIDER_CHOOSER_REQUEST_CODE
+        if (requestCode == COMPLICATION_CONFIG_REQUEST_CODE
                 && resultCode == RESULT_OK) {
 
             // Retrieves information for selected Complication provider.
@@ -75,134 +75,6 @@
                     data.getParcelableExtra(ProviderChooserIntent.EXTRA_PROVIDER_INFO);
 
             Log.d(TAG, "Selected Provider: " + complicationProviderInfo);
-
-            finish();
-        }
-    }
-
-    @Override
-    public void onClick(WearableListView.ViewHolder viewHolder) {
-        if (Log.isLoggable(TAG, Log.DEBUG)) {
-            Log.d(TAG, "onClick()");
-        }
-
-        Integer tag = (Integer) viewHolder.itemView.getTag();
-        ComplicationItem complicationItem = mAdapter.getItem(tag);
-
-        // Note: If you were previously using ProviderChooserIntent.createProviderChooserIntent()
-        // (now deprecated), you will want to switch to
-        // ComplicationHelperActivity.createProviderChooserHelperIntent()
-        startActivityForResult(
-                ComplicationHelperActivity.createProviderChooserHelperIntent(
-                        getApplicationContext(),
-                        complicationItem.watchFace,
-                        complicationItem.complicationId,
-                        complicationItem.supportedTypes),
-                PROVIDER_CHOOSER_REQUEST_CODE);
-    }
-
-    private List<ComplicationItem> getComplicationItems() {
-        ComponentName watchFace = new ComponentName(
-                getApplicationContext(), ComplicationSimpleWatchFaceService.class);
-
-        String[] complicationNames =
-                getResources().getStringArray(R.array.complication_simple_names);
-
-        int[] complicationIds = ComplicationSimpleWatchFaceService.COMPLICATION_IDS;
-
-        TypedArray icons = getResources().obtainTypedArray(R.array.complication_simple_icons);
-
-        List<ComplicationItem> items = new ArrayList<>();
-        for (int i = 0; i < complicationIds.length; i++) {
-            items.add(new ComplicationItem(watchFace,
-                    complicationIds[i],
-                    ComplicationSimpleWatchFaceService.COMPLICATION_SUPPORTED_TYPES[i],
-                    icons.getDrawable(i),
-                    complicationNames[i]));
-        }
-        return items;
-    }
-
-    @Override
-    public void onTopEmptyRegionClick() {
-        if (Log.isLoggable(TAG, Log.DEBUG)) {
-            Log.d(TAG, "onTopEmptyRegionClick()");
-        }
-    }
-
-    /*
-     * Inner class representing items of the ConfigurationAdapter (WearableListView.Adapter) class.
-     */
-    private final class ComplicationItem {
-        ComponentName watchFace;
-        int complicationId;
-        int[] supportedTypes;
-        Drawable icon;
-        String title;
-
-        public ComplicationItem(ComponentName watchFace, int complicationId, int[] supportedTypes,
-                                Drawable icon, String title) {
-            this.watchFace = watchFace;
-            this.complicationId = complicationId;
-            this.supportedTypes = supportedTypes;
-            this.icon = icon;
-            this.title = title;
-        }
-    }
-
-    private static class ConfigurationAdapter extends WearableListView.Adapter {
-
-        private Context mContext;
-        private final LayoutInflater mInflater;
-        private List<ComplicationItem> mItems;
-
-
-        public ConfigurationAdapter (Context context, List<ComplicationItem> items) {
-            mContext = context;
-            mInflater = LayoutInflater.from(mContext);
-            mItems = items;
-        }
-
-        // Provides a reference to the type of views you're using
-        public static class ItemViewHolder extends WearableListView.ViewHolder {
-            private ImageView iconImageView;
-            private TextView textView;
-            public ItemViewHolder(View itemView) {
-                super(itemView);
-                iconImageView = (ImageView) itemView.findViewById(R.id.icon);
-                textView = (TextView) itemView.findViewById(R.id.name);
-            }
-        }
-
-        @Override
-        public WearableListView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
-
-            // Inflate custom layout for list items.
-            return new ItemViewHolder(
-                    mInflater.inflate(R.layout.activity_complication_simple_list_item, null));
-        }
-
-        @Override
-        public void onBindViewHolder(WearableListView.ViewHolder holder, int position) {
-
-            ItemViewHolder itemHolder = (ItemViewHolder) holder;
-
-            ImageView imageView = itemHolder.iconImageView;
-            imageView.setImageDrawable(mItems.get(position).icon);
-
-            TextView textView = itemHolder.textView;
-            textView.setText(mItems.get(position).title);
-
-            holder.itemView.setTag(position);
-        }
-
-        @Override
-        public int getItemCount() {
-            return mItems.size();
-        }
-
-        public ComplicationItem getItem(int position) {
-            return mItems.get(position);
         }
     }
 }
\ No newline at end of file
diff --git a/wearable/wear/WatchFace/Wearable/src/main/java/com/example/android/wearable/watchface/config/ComplicationSimpleRecyclerViewAdapter.java b/wearable/wear/WatchFace/Wearable/src/main/java/com/example/android/wearable/watchface/config/ComplicationSimpleRecyclerViewAdapter.java
new file mode 100644
index 0000000..70abcd0
--- /dev/null
+++ b/wearable/wear/WatchFace/Wearable/src/main/java/com/example/android/wearable/watchface/config/ComplicationSimpleRecyclerViewAdapter.java
@@ -0,0 +1,377 @@
+/*
+ * Copyright (C) 2017 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.example.android.wearable.watchface.config;
+
+import android.app.Activity;
+import android.content.ComponentName;
+import android.content.Context;
+import android.graphics.Rect;
+import android.support.v7.widget.RecyclerView;
+import android.support.wearable.complications.ComplicationHelperActivity;
+import android.util.Log;
+import android.view.LayoutInflater;
+import android.view.MotionEvent;
+import android.view.View;
+import android.view.ViewGroup;
+import android.view.ViewTreeObserver;
+import android.widget.Button;
+import android.widget.ImageView;
+
+import com.example.android.wearable.watchface.R;
+import com.example.android.wearable.watchface.models.ComplicationsSimpleWatchFaceSettingsConfigData.AppearanceConfigItem;
+import com.example.android.wearable.watchface.models.ComplicationsSimpleWatchFaceSettingsConfigData.ComplicationsConfigItem;
+import com.example.android.wearable.watchface.models.ComplicationsSimpleWatchFaceSettingsConfigData.MoreOptionsConfigItem;
+
+import com.example.android.wearable.watchface.watchfaces.ComplicationSimpleWatchFaceService;
+
+import java.util.ArrayList;
+
+/**
+ * Displays different layouts for configuring watch face's complications and appearance settings.
+ * Class extends {@RecyclerView.Adapter} and updates {@ComplicationSimpleWatchFaceService}.
+ * <p>
+ * Layouts provided by this adapter are split into 2 main view types.
+ * <p>
+ * A layout representing the watch face along with complication locations. This allows the user
+ * to tap on the area of the watch face where they want to change the complication data.
+ * <p>
+ * A layout representing other appearance configuration outside of the main complications on the
+ * watch face. These could include marker color, background color, layout, unread notifications,
+ * and many others. This sample is simplified, so it only includes marker color,
+ * unread notifications, and background complication.
+ */
+public class ComplicationSimpleRecyclerViewAdapter extends
+        RecyclerView.Adapter<RecyclerView.ViewHolder> {
+
+    private static final String TAG = "CompConfigAdapter";
+
+    private static final int TYPE_COMPLICATIONS_CONFIG = 0;
+    private static final int TYPE_MORE_OPTIONS_CONFIG = 1;
+    private static final int TYPE_APPEARANCE_CONFIG = 2;
+
+    private ArrayList<Object> mSettingsDataSet;
+
+    public ComplicationSimpleRecyclerViewAdapter(ArrayList<Object> settingsDataSet) {
+        mSettingsDataSet = settingsDataSet;
+    }
+
+    @Override
+    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
+        Log.d(TAG, "onCreateViewHolder(): viewType: " + viewType);
+
+        RecyclerView.ViewHolder viewHolder = null;
+
+        switch (viewType) {
+            case TYPE_COMPLICATIONS_CONFIG:
+                viewHolder = new ComplicationsViewHolder(LayoutInflater.from(parent.getContext())
+                        .inflate(R.layout.config_list_complication_item, parent, false));
+                break;
+
+            case TYPE_MORE_OPTIONS_CONFIG:
+                viewHolder = new MoreOptionsViewHolder(LayoutInflater.from(parent.getContext())
+                        .inflate(R.layout.config_list_more_options_item, parent, false));
+                break;
+
+            case TYPE_APPEARANCE_CONFIG:
+                viewHolder = new AppearanceViewHolder(LayoutInflater.from(parent.getContext())
+                        .inflate(R.layout.config_list_appearance_item, parent, false));
+                break;
+        }
+
+        return viewHolder;
+    }
+
+    @Override
+    public void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int position) {
+        Log.d(TAG, "Element " + position + " set.");
+
+        // Pulls all data for settings options.
+        Object configItem = mSettingsDataSet.get(position);
+
+        switch (viewHolder.getItemViewType()) {
+
+            case TYPE_COMPLICATIONS_CONFIG:
+                ComplicationsViewHolder complicationsViewHolder =
+                        (ComplicationsViewHolder) viewHolder;
+
+                ComplicationsConfigItem complicationsConfigItem =
+                        (ComplicationsConfigItem) configItem;
+
+                int watchFaceInt = complicationsConfigItem.getWatchFaceDrawable();
+
+                complicationsViewHolder.setWatchFacePreviewImageView(watchFaceInt);
+                break;
+
+            case TYPE_MORE_OPTIONS_CONFIG:
+                MoreOptionsViewHolder moreOptionsViewHolder = (MoreOptionsViewHolder) viewHolder;
+
+                MoreOptionsConfigItem moreOptionsConfigItem = (MoreOptionsConfigItem) configItem;
+
+                moreOptionsViewHolder.setIcon(moreOptionsConfigItem.getDrawable());
+                break;
+
+
+            case TYPE_APPEARANCE_CONFIG:
+                AppearanceViewHolder appearanceViewHolder = (AppearanceViewHolder) viewHolder;
+
+                AppearanceConfigItem appearanceConfigItem = (AppearanceConfigItem) configItem;
+
+                int iconInt = appearanceConfigItem.getIcon();
+                String name = appearanceConfigItem.getName();
+
+                appearanceViewHolder.setName(name);
+                appearanceViewHolder.setIcon(iconInt);
+                break;
+        }
+    }
+
+
+
+    @Override
+    public int getItemViewType(int position) {
+
+        if (mSettingsDataSet.get(position)
+                instanceof ComplicationsConfigItem) {
+            return TYPE_COMPLICATIONS_CONFIG;
+
+        } else if (mSettingsDataSet.get(position)
+                instanceof MoreOptionsConfigItem) {
+            return TYPE_MORE_OPTIONS_CONFIG;
+
+        } else if (mSettingsDataSet.get(position)
+                instanceof AppearanceConfigItem) {
+            return TYPE_APPEARANCE_CONFIG;
+        }
+        return -1;
+    }
+
+    @Override
+    public int getItemCount() {
+        return mSettingsDataSet.size();
+    }
+
+    /**
+     * Layout displays watch face preview along with complication locations allowing the user to
+     * tap on the complication they want to change.
+     */
+    public class ComplicationsViewHolder extends RecyclerView.ViewHolder
+            implements View.OnTouchListener {
+
+        private static final int SMALL_OFFSET = 10;
+        private static final int LARGE_OFFSET = 100;
+        private static final int TAPPABLE_SPACE = 100;
+
+        private Rect mLeftComplicationRect;
+        private Rect mRightComplicationRect;
+        private Rect mTopComplicationRect;
+        private Rect mBottomComplicationRect;
+
+        private ImageView mWatchFacePreviewImageView;
+
+        public ComplicationsViewHolder(final View view) {
+            super(view);
+            mWatchFacePreviewImageView = (ImageView) view.findViewById(R.id.watch_face_preview);
+
+            view.setOnTouchListener(this);
+
+            // Used to get dimensions of view once it is inflated to calculate locations of
+            // complications.
+            view.getViewTreeObserver().addOnGlobalLayoutListener(
+                    new ViewTreeObserver.OnGlobalLayoutListener() {
+                        @Override public void onGlobalLayout() {
+                            // Calculates tappable space for each complication location.
+                            // Constructor: Rect(int left, int top, int right, int bottom).
+                            mLeftComplicationRect =
+                                    new Rect(
+                                            SMALL_OFFSET,
+                                            LARGE_OFFSET,
+                                            SMALL_OFFSET + TAPPABLE_SPACE,
+                                            LARGE_OFFSET + TAPPABLE_SPACE);
+
+                            mRightComplicationRect =
+                                    new Rect(
+                                            view.getWidth() - SMALL_OFFSET - TAPPABLE_SPACE,
+                                            LARGE_OFFSET,
+                                            view.getWidth() - SMALL_OFFSET,
+                                            LARGE_OFFSET + TAPPABLE_SPACE);
+
+                            mTopComplicationRect =
+                                    new Rect(
+                                            LARGE_OFFSET,
+                                            SMALL_OFFSET,
+                                            LARGE_OFFSET + TAPPABLE_SPACE,
+                                            SMALL_OFFSET + TAPPABLE_SPACE);
+
+                            mBottomComplicationRect =
+                                    new Rect(
+                                            LARGE_OFFSET,
+                                            view.getHeight() - SMALL_OFFSET - TAPPABLE_SPACE,
+                                            LARGE_OFFSET + TAPPABLE_SPACE,
+                                            view.getHeight() - SMALL_OFFSET);
+                }
+            });
+        }
+
+        @Override
+        public boolean onTouch(View view, MotionEvent event) {
+
+            if (event.getAction() == MotionEvent.ACTION_UP) {
+
+                int x = (int) event.getX();
+                int y = (int) event.getY();
+
+                if (mLeftComplicationRect.contains(x, y)) {
+                    Log.d(TAG, "LEFT Complication: x, y: " + x + ", " + y);
+
+                    Activity currentActivity = (Activity) view.getContext();
+                    launchComplicationHelperActivity(
+                            currentActivity,
+                            ComplicationSimpleWatchFaceService.ComplicationLocation.LEFT);
+
+                } else if (mRightComplicationRect.contains(x, y)) {
+                    Log.d(TAG, "RIGHT Complication: x, y: " + x + ", " + y);
+
+                    Activity currentActivity = (Activity) view.getContext();
+                    launchComplicationHelperActivity(
+                            currentActivity,
+                            ComplicationSimpleWatchFaceService.ComplicationLocation.RIGHT);
+
+                } else if (mTopComplicationRect.contains(x, y)) {
+                    Log.d(TAG, "TOP Complication: x, y: " + x + ", " + y);
+
+                    Activity currentActivity = (Activity) view.getContext();
+                    launchComplicationHelperActivity(
+                            currentActivity,
+                            ComplicationSimpleWatchFaceService.ComplicationLocation.TOP);
+
+                } else if (mBottomComplicationRect.contains(x, y)) {
+                    Log.d(TAG, "BOTTOM Complication: x, y: " + x + ", " + y);
+
+                    Activity currentActivity = (Activity) view.getContext();
+                    launchComplicationHelperActivity(
+                            currentActivity,
+                            ComplicationSimpleWatchFaceService.ComplicationLocation.BOTTOM);
+                }
+            }
+            return true;
+        }
+
+        // Verifies the watch face supports the complication location, then launches the helper
+        // class, so user can choose their complication data provider.
+        private void launchComplicationHelperActivity(
+                Activity currentActivity,
+                ComplicationSimpleWatchFaceService.ComplicationLocation complicationLocation) {
+
+            int complicationId =
+                    ComplicationSimpleWatchFaceService.getComplicationId(complicationLocation);
+
+            if (complicationId >= 0) {
+
+                int[] supportedTypes = ComplicationSimpleWatchFaceService
+                        .getSupportedComplicationTypes(complicationLocation);
+
+                if (supportedTypes.length > 0) {
+
+                    ComponentName watchFace = new ComponentName(
+                            currentActivity,
+                            ComplicationSimpleWatchFaceService.class);
+
+                    currentActivity.startActivityForResult(
+                            ComplicationHelperActivity.createProviderChooserHelperIntent(
+                                    currentActivity,
+                                    watchFace,
+                                    complicationId,
+                                    supportedTypes),
+                            ComplicationSimpleConfigActivity.COMPLICATION_CONFIG_REQUEST_CODE);
+                } else {
+                    Log.d(TAG, "Complication has no supported types.");
+                }
+
+            } else {
+                Log.d(TAG, "Complication not supported by watch face.");
+            }
+        }
+
+        public void setWatchFacePreviewImageView(int resourceId) {
+            Context context = mWatchFacePreviewImageView.getContext();
+            mWatchFacePreviewImageView.setImageDrawable(context.getDrawable(resourceId));
+        }
+    }
+
+    /**
+     * Layout displays all other non-complication appearance configuration options for the
+     * watch face. These could include marker color, background color, layout, unread notifications,
+     * and many others.
+     */
+    public class MoreOptionsViewHolder extends RecyclerView.ViewHolder {
+
+        private ImageView mMoreOptionsImageView;
+
+        public MoreOptionsViewHolder(View view) {
+            super(view);
+            mMoreOptionsImageView = (ImageView) view.findViewById(R.id.more_options_image_view);
+        }
+
+        public void setIcon(int resourceId) {
+            Context context = mMoreOptionsImageView.getContext();
+            mMoreOptionsImageView.setImageDrawable(context.getDrawable(resourceId));
+        }
+    }
+
+    /**
+     * Layout displays all other non-complication appearance configuration options for the
+     * watch face. These could include marker color, background color, layout, unread notifications,
+     * and many others.
+     */
+    public class AppearanceViewHolder extends RecyclerView.ViewHolder
+            implements View.OnClickListener {
+
+        private Button mAppearanceButton;
+
+        public AppearanceViewHolder(View view) {
+            super(view);
+
+            mAppearanceButton = (Button) view.findViewById(R.id.appearance_button);
+            view.setOnClickListener(this);
+        }
+
+        public void setName(String name) {
+            mAppearanceButton.setText(name);
+        }
+
+        public void setIcon(int resourceId) {
+            Context context = mAppearanceButton.getContext();
+            mAppearanceButton.setCompoundDrawablesWithIntrinsicBounds(
+                    context.getDrawable(resourceId),
+                    null,
+                    null,
+                    null);
+        }
+
+
+        @Override
+        public void onClick(View v) {
+            int position = getAdapterPosition();
+            Log.d(TAG, "Complication onClick() position: " + position);
+
+            // TODO (jewalker): Launch Activity to select appearance.
+        }
+    }
+
+    // TODO(jewalker): Add custom RecyclerView.ViewHolder for unread Notification toggle.
+    // TODO(jewalker): Add custom RecyclerView.ViewHolder for background image complication.
+}
\ No newline at end of file
diff --git a/wearable/wear/WatchFace/Wearable/src/main/java/com/example/android/wearable/watchface/models/ComplicationsSimpleWatchFaceSettingsConfigData.java b/wearable/wear/WatchFace/Wearable/src/main/java/com/example/android/wearable/watchface/models/ComplicationsSimpleWatchFaceSettingsConfigData.java
new file mode 100644
index 0000000..454fd11
--- /dev/null
+++ b/wearable/wear/WatchFace/Wearable/src/main/java/com/example/android/wearable/watchface/models/ComplicationsSimpleWatchFaceSettingsConfigData.java
@@ -0,0 +1,117 @@
+/*
+ * Copyright (C) 2017 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package com.example.android.wearable.watchface.models;
+
+import com.example.android.wearable.watchface.R;
+
+import java.util.ArrayList;
+
+/**
+ * Data represents different views for configuring the
+ * {@link com.example.android.wearable.watchface.watchfaces.ComplicationSimpleWatchFaceService}
+ * watch face's appearance and complications.
+ */
+public class ComplicationsSimpleWatchFaceSettingsConfigData {
+
+    public static ArrayList<Object> getSettingsData() {
+
+        ArrayList<Object> settingsConfigData = new ArrayList<>();
+
+        // Data for complications UX in settings Activity (ComplicationSimpleConfigActivity).
+        Object complicationConfigItem =
+                new ComplicationsConfigItem(R.drawable.preview_settings_complication_240);
+        settingsConfigData.add(complicationConfigItem);
+
+        // Data for drawable indicating there are more options in the settings
+        // Activity (ComplicationSimpleConfigActivity).
+        Object moreOptionsConfigItem =
+                new MoreOptionsConfigItem(R.drawable.ic_expand_more_white_18dp);
+        settingsConfigData.add(moreOptionsConfigItem);
+
+        // Data for Markers (watch face arms/hands/ticks) UX in settings
+        // Activity (ComplicationSimpleConfigActivity).
+        Object markersConfigItem =
+                new AppearanceConfigItem("Markers", R.drawable.icn_styles);
+        settingsConfigData.add(markersConfigItem);
+
+        // Data for 'Unread Notifications' UX (toggle) in settings
+        // Activity (ComplicationSimpleConfigActivity).
+        Object unreadNotificationsConfigItem =
+                new AppearanceConfigItem(
+                        "Unread Notifications",
+                        R.drawable.ic_notifications_white_24dp);
+        settingsConfigData.add(unreadNotificationsConfigItem);
+
+        // Data for background complications UX in settings
+        // Activity (ComplicationSimpleConfigActivity).
+        Object backgroundImageComplicationConfigItem =
+                new AppearanceConfigItem("Background Image", R.drawable.ic_landscape_white);
+        settingsConfigData.add(backgroundImageComplicationConfigItem);
+
+        return settingsConfigData;
+    }
+
+    /**
+     * Represents Complication data for config settings in a RecyclerView.
+     */
+    public static class ComplicationsConfigItem {
+        private int watchFaceDrawable;
+
+        ComplicationsConfigItem(int drawable) {
+            watchFaceDrawable = drawable;
+        }
+
+        public int getWatchFaceDrawable() {
+            return watchFaceDrawable;
+        }
+    }
+
+    /**
+     * Represents simple "more options" icon for config settings in a RecyclerView.
+     */
+    public static class MoreOptionsConfigItem {
+        private int drawable;
+
+        MoreOptionsConfigItem(int drawable) {
+            this.drawable = drawable;
+        }
+
+        public int getDrawable() {
+            return drawable;
+        }
+    }
+
+    /**
+     * Represents Appearance type data for config settings in a RecyclerView.
+     */
+    public static class AppearanceConfigItem {
+        private String name;
+        private int icon;
+
+        AppearanceConfigItem(String name, int icon) {
+            this.name = name;
+            this.icon = icon;
+        }
+
+        public String getName() {
+            return name;
+        }
+
+        public int getIcon() {
+            return icon;
+        }
+    }
+}
\ No newline at end of file
diff --git a/wearable/wear/WatchFace/Wearable/src/main/java/com/example/android/wearable/watchface/watchfaces/ComplicationSimpleWatchFaceService.java b/wearable/wear/WatchFace/Wearable/src/main/java/com/example/android/wearable/watchface/watchfaces/ComplicationSimpleWatchFaceService.java
index f0a5309..ed00e4a 100644
--- a/wearable/wear/WatchFace/Wearable/src/main/java/com/example/android/wearable/watchface/watchfaces/ComplicationSimpleWatchFaceService.java
+++ b/wearable/wear/WatchFace/Wearable/src/main/java/com/example/android/wearable/watchface/watchfaces/ComplicationSimpleWatchFaceService.java
@@ -38,18 +38,16 @@
 import android.support.wearable.complications.ComplicationData;
 import android.support.wearable.complications.ComplicationHelperActivity;
 import android.support.wearable.complications.ComplicationText;
-import android.support.wearable.complications.SystemProviders;
-import android.support.wearable.complications.rendering.TextRenderer;
 import android.support.wearable.watchface.CanvasWatchFaceService;
 import android.support.wearable.watchface.WatchFaceService;
 import android.support.wearable.watchface.WatchFaceStyle;
-import android.text.TextPaint;
+import android.text.TextUtils;
 import android.util.Log;
 import android.util.SparseArray;
-import android.view.Gravity;
 import android.view.SurfaceHolder;
 
 import com.example.android.wearable.watchface.R;
+import com.example.android.wearable.watchface.config.ComplicationSimpleRecyclerViewAdapter;
 
 import java.util.Calendar;
 import java.util.TimeZone;
@@ -61,12 +59,21 @@
 public class ComplicationSimpleWatchFaceService extends CanvasWatchFaceService {
     private static final String TAG = "SimpleComplicationWF";
 
-    // Unique IDs for each complication.
-    private static final int LEFT_DIAL_COMPLICATION = 0;
-    private static final int RIGHT_DIAL_COMPLICATION = 1;
+    /**
+     * Used by {@link ComplicationSimpleRecyclerViewAdapter} to request supported complication
+     * locations and types.
+     */
+    public enum ComplicationLocation {
+        LEFT, RIGHT, TOP, BOTTOM
+    }
+
+    // Unique IDs for each complication. The settings activity that supports allowing users
+    // to select their complication data provider requires numbers to be >= 0.
+    private static final int LEFT_COMPLICATION_ID = 0;
+    private static final int RIGHT_COMPLICATION_ID = 1;
 
     // Left and right complication IDs as array for Complication API.
-    public static final int[] COMPLICATION_IDS = {LEFT_DIAL_COMPLICATION, RIGHT_DIAL_COMPLICATION};
+    public static final int[] COMPLICATION_IDS = {LEFT_COMPLICATION_ID, RIGHT_COMPLICATION_ID};
 
     // Left and right dial supported types.
     public static final int[][] COMPLICATION_SUPPORTED_TYPES = {
@@ -74,6 +81,34 @@
             {ComplicationData.TYPE_SHORT_TEXT}
     };
 
+    // Used by {@link ComplicationSimpleRecyclerViewAdapter} to check if complication location
+    // is supported in settings config activity.
+    public static int getComplicationId(ComplicationLocation complicationLocation) {
+        // Add any other supported locations here.
+        switch (complicationLocation) {
+            case LEFT:
+                return LEFT_COMPLICATION_ID;
+            case RIGHT:
+                return RIGHT_COMPLICATION_ID;
+            default:
+                return -1;
+        }
+    }
+
+    // Used by {@link ComplicationSimpleRecyclerViewAdapter} to see which complication types are
+    // supported in the settings config activity.
+    public static int[] getSupportedComplicationTypes(ComplicationLocation complicationLocation) {
+        // Add any other supported locations here.
+        switch (complicationLocation) {
+            case LEFT:
+                return COMPLICATION_SUPPORTED_TYPES[0];
+            case RIGHT:
+                return COMPLICATION_SUPPORTED_TYPES[1];
+            default:
+                return new int[]{};
+        }
+    }
+
     /*
      * Update rate in milliseconds for interactive mode. We update once a second to advance the
      * second hand.
@@ -88,8 +123,8 @@
     private class Engine extends CanvasWatchFaceService.Engine {
         private static final int MSG_UPDATE_TIME = 0;
 
-        private static final float COMPLICATION_MAIN_TEXT_SIZE = 38f;
-        private static final float COMPLICATION_SUB_TEXT_SIZE = 34f;
+        private static final float COMPLICATION_TEXT_SIZE = 38f;
+        private static final int COMPLICATION_TAP_BUFFER = 40;
 
         private static final float HOUR_STROKE_WIDTH = 5f;
         private static final float MINUTE_STROKE_WIDTH = 3f;
@@ -126,21 +161,15 @@
         private Bitmap mBackgroundBitmap;
         private Bitmap mGrayBackgroundBitmap;
 
-        // Renders text for complications in specified bounds (shrinks text in some cases).
-        private TextRenderer mLeftMainTextComplicationRenderer;
-        private TextRenderer mLeftSubTextComplicationRenderer;
-        private TextRenderer mRightMainTextComplicationRenderer;
-        private TextRenderer mRightSubTextComplicationRenderer;
+        // Variables for painting Complications
+        private Paint mComplicationPaint;
 
-        // Holds Paint style for all complications.
-        private TextPaint mComplicationMainTextPaint;
-        private TextPaint mComplicationSubTextPaint;
-
-        // Bounds for the upper (main text) and lower (subtext) areas of the complications.
-        private Rect mLeftComplicationMainTextBounds;
-        private Rect mLeftComplicationSubTextBounds;
-        private Rect mRightComplicationMainTextBounds;
-        private Rect mRightComplicationSubTextBounds;
+        /* To properly place each complication, we need their x and y coordinates. While the width
+         * may change from moment to moment based on the time, the height will not change, so we
+         * store it as a local variable and only calculate it only when the surface changes
+         * (onSurfaceChanged()).
+         */
+        private int mComplicationsY;
 
         /* Maps active complication ids to the data for that complication. Note: Data will only be
          * present if the user has chosen a provider via the settings activity for the watch face.
@@ -151,6 +180,8 @@
         private boolean mLowBitAmbient;
         private boolean mBurnInProtection;
 
+        private Rect mPeekCardBounds = new Rect();
+
         private final BroadcastReceiver mTimeZoneReceiver = new BroadcastReceiver() {
             @Override
             public void onReceive(Context context, Intent intent) {
@@ -187,35 +218,18 @@
 
             mCalendar = Calendar.getInstance();
 
-            initializeComplicationDefaults();
+            setWatchFaceStyle(new WatchFaceStyle.Builder(ComplicationSimpleWatchFaceService.this)
+                    .setCardPeekMode(WatchFaceStyle.PEEK_MODE_SHORT)
+                    .setAcceptsTapEvents(true)
+                    .setBackgroundVisibility(WatchFaceStyle.BACKGROUND_VISIBILITY_INTERRUPTIVE)
+                    .setShowSystemUiTime(false)
+                    .build());
+
             initializeBackground();
             initializeComplication();
             initializeWatchFace();
         }
 
-        /*
-        * Sets a system provider as the default provider for the specified watch face
-        * complication id.
-        *
-        * To set a non-system provider as a default, or to clear a default,
-        * use setDefaultComplicationProvider(int, ComponentName, int).
-        *
-        * Important Note: Call these methods before initializing your watch face with
-        * setWatchFaceStyle(). In this example, we call setWatchFaceStyle() in the
-        * initializeWatchFace() method called after this method in onCreate().
-        */
-        private void initializeComplicationDefaults() {
-            setDefaultSystemComplicationProvider(
-                    RIGHT_DIAL_COMPLICATION,
-                    SystemProviders.DATE,
-                    ComplicationData.TYPE_SHORT_TEXT);
-
-            setDefaultSystemComplicationProvider(
-                    LEFT_DIAL_COMPLICATION,
-                    SystemProviders.WATCH_BATTERY,
-                    ComplicationData.TYPE_SHORT_TEXT);
-        }
-
         private void initializeBackground() {
             mBackgroundPaint = new Paint();
             mBackgroundPaint.setColor(Color.BLACK);
@@ -228,38 +242,11 @@
             }
             mActiveComplicationDataSparseArray = new SparseArray<>(COMPLICATION_IDS.length);
 
-            // Both TextPaint objects are used for all complications.
-            mComplicationMainTextPaint = new TextPaint();
-            mComplicationMainTextPaint.setColor(Color.WHITE);
-            mComplicationMainTextPaint.setTextSize(COMPLICATION_MAIN_TEXT_SIZE);
-            mComplicationMainTextPaint.setTypeface(
-                    Typeface.create(Typeface.DEFAULT, Typeface.BOLD));
-            mComplicationMainTextPaint.setAntiAlias(true);
-
-            mComplicationSubTextPaint = new TextPaint();
-            mComplicationSubTextPaint.setColor(Color.WHITE);
-            mComplicationSubTextPaint.setTextSize(COMPLICATION_SUB_TEXT_SIZE);
-            mComplicationSubTextPaint.setTypeface(
-                    Typeface.create(Typeface.DEFAULT, Typeface.NORMAL));
-            mComplicationSubTextPaint.setAntiAlias(true);
-
-            // By default, all text is aligned to the center. If you want to change the text
-            // alignment, use setAlignment() on your TextRenderer instance.
-            mLeftMainTextComplicationRenderer = new TextRenderer();
-            mLeftMainTextComplicationRenderer.setGravity(Gravity.BOTTOM);
-            mLeftMainTextComplicationRenderer.setPaint(mComplicationMainTextPaint);
-
-            mLeftSubTextComplicationRenderer = new TextRenderer();
-            mLeftSubTextComplicationRenderer.setGravity(Gravity.TOP);
-            mLeftSubTextComplicationRenderer.setPaint(mComplicationSubTextPaint);
-
-            mRightMainTextComplicationRenderer = new TextRenderer();
-            mRightMainTextComplicationRenderer.setGravity(Gravity.BOTTOM);
-            mRightMainTextComplicationRenderer.setPaint(mComplicationMainTextPaint);
-
-            mRightSubTextComplicationRenderer = new TextRenderer();
-            mRightSubTextComplicationRenderer.setGravity(Gravity.TOP);
-            mRightSubTextComplicationRenderer.setPaint(mComplicationSubTextPaint);
+            mComplicationPaint = new Paint();
+            mComplicationPaint.setColor(Color.WHITE);
+            mComplicationPaint.setTextSize(COMPLICATION_TEXT_SIZE);
+            mComplicationPaint.setTypeface(Typeface.create(Typeface.DEFAULT, Typeface.BOLD));
+            mComplicationPaint.setAntiAlias(true);
 
             setActiveComplications(COMPLICATION_IDS);
         }
@@ -314,10 +301,6 @@
                             }
                         }
                     });
-
-            setWatchFaceStyle(new WatchFaceStyle.Builder(ComplicationSimpleWatchFaceService.this)
-                    .setAcceptsTapEvents(true)
-                    .build());
         }
 
         @Override
@@ -378,13 +361,34 @@
                         && (complicationData.getType() != ComplicationData.TYPE_NOT_CONFIGURED)
                         && (complicationData.getType() != ComplicationData.TYPE_EMPTY)) {
 
-                    if (mLeftComplicationMainTextBounds.contains(x, y)
-                            || mLeftComplicationSubTextBounds.contains(x, y)) {
-                        return LEFT_DIAL_COMPLICATION;
-                    } else if (mRightComplicationMainTextBounds.contains(x, y)
-                            || mRightComplicationSubTextBounds.contains(x, y)) {
-                        return RIGHT_DIAL_COMPLICATION;
+                    Rect complicationBoundingRect = new Rect(0, 0, 0, 0);
 
+                    switch (COMPLICATION_IDS[i]) {
+                        case LEFT_COMPLICATION_ID:
+                            complicationBoundingRect.set(
+                                    0,                                          // left
+                                    mComplicationsY - COMPLICATION_TAP_BUFFER,  // top
+                                    (mWidth / 2),                               // right
+                                    ((int) COMPLICATION_TEXT_SIZE               // bottom
+                                            + mComplicationsY
+                                            + COMPLICATION_TAP_BUFFER));
+                            break;
+
+                        case RIGHT_COMPLICATION_ID:
+                            complicationBoundingRect.set(
+                                    (mWidth / 2),                               // left
+                                    mComplicationsY - COMPLICATION_TAP_BUFFER,  // top
+                                    mWidth,                                     // right
+                                    ((int) COMPLICATION_TEXT_SIZE               // bottom
+                                            + mComplicationsY
+                                            + COMPLICATION_TAP_BUFFER));
+                            break;
+                    }
+
+                    if (complicationBoundingRect.width() > 0) {
+                        if (complicationBoundingRect.contains(x, y)) {
+                            return COMPLICATION_IDS[i];
+                        }
                     } else {
                         Log.e(TAG, "Not a recognized complication id.");
                     }
@@ -452,17 +456,7 @@
             updateWatchHandStyle();
 
             // Updates complication style
-            mComplicationMainTextPaint.setAntiAlias(!inAmbientMode);
-            mComplicationSubTextPaint.setAntiAlias(!inAmbientMode);
-
-            // If the properties of the TextPaint have changed, then the TextRenderer may not be
-            // aware that the layout needs to be updated. In this case, a layout update should be
-            // forced by calling requestUpdateLayout().
-            mLeftMainTextComplicationRenderer.requestUpdateLayout();
-            mLeftSubTextComplicationRenderer.requestUpdateLayout();
-
-            mRightMainTextComplicationRenderer.requestUpdateLayout();
-            mRightSubTextComplicationRenderer.requestUpdateLayout();
+            mComplicationPaint.setAntiAlias(!inAmbientMode);
 
             // Check and trigger whether or not timer should be running (only in active mode).
             updateTimer();
@@ -534,28 +528,11 @@
             mCenterX = mWidth / 2f;
             mCenterY = mHeight / 2f;
 
-            // Calculates Left and Right complications' bounds for TextRenderer.
-            int top, left, bottom, right = 0;
-            int heightOfComplication = height / 6;
-
-            left = 0;
-            top = (height / 2) - heightOfComplication;
-            right = width / 2;
-            bottom = height / 2;
-            mLeftComplicationMainTextBounds = new Rect(left, top, right, bottom);
-
-            left = right;
-            right = width;
-            mRightComplicationMainTextBounds = new Rect(left, top, right, bottom);
-
-            top = height / 2;
-            bottom = top + heightOfComplication;
-            mRightComplicationSubTextBounds = new Rect(left, top, right, bottom);
-
-            right = left;
-            left = 0;
-            mLeftComplicationSubTextBounds = new Rect(left, top, right, bottom);
-
+            /*
+             * Since the height of the complications text does not change, we only have to
+             * recalculate when the surface changes.
+             */
+            mComplicationsY = (int) ((mHeight / 2) + (mComplicationPaint.getTextSize() / 2));
 
             /*
              * Calculate lengths of different hands based on watch screen size.
@@ -617,6 +594,7 @@
         }
 
         private void drawBackground(Canvas canvas) {
+
             if (mAmbient && (mLowBitAmbient || mBurnInProtection)) {
                 canvas.drawColor(Color.BLACK);
             } else if (mAmbient) {
@@ -643,52 +621,47 @@
                     if (complicationData.getType() == ComplicationData.TYPE_SHORT_TEXT
                             || complicationData.getType() == ComplicationData.TYPE_NO_PERMISSION) {
 
-                        if (COMPLICATION_IDS[i] == LEFT_DIAL_COMPLICATION) {
-                            // Set the text every time you draw, even if the ComplicationData has
-                            // not changed, in case the text includes a time-dependent value.
-                            mLeftMainTextComplicationRenderer.setText(
-                                    ComplicationText.getText(
-                                            getApplicationContext(),
-                                            complicationData.getShortTitle(),
-                                            currentTimeMillis));
+                        ComplicationText mainText = complicationData.getShortText();
+                        ComplicationText subText = complicationData.getShortTitle();
 
-                            mLeftSubTextComplicationRenderer.setText(
-                                    ComplicationText.getText(
-                                            getApplicationContext(),
-                                            complicationData.getShortText(),
-                                            currentTimeMillis));
+                        CharSequence complicationMessage =
+                                mainText.getText(getApplicationContext(), currentTimeMillis);
 
-                            // Assuming both the title and text exist.
-                            mLeftMainTextComplicationRenderer.draw(
-                                    canvas,
-                                    mLeftComplicationMainTextBounds);
-                            mLeftSubTextComplicationRenderer.draw(
-                                    canvas,
-                                    mLeftComplicationSubTextBounds);
-
-                        } else if (COMPLICATION_IDS[i] == RIGHT_DIAL_COMPLICATION) {
-                            // Set the text every time you draw, even if the ComplicationData has
-                            // not changed, in case the text includes a time-dependent value.
-                            mRightMainTextComplicationRenderer.setText(
-                                    ComplicationText.getText(
-                                            getApplicationContext(),
-                                            complicationData.getShortTitle(),
-                                            currentTimeMillis));
-
-                            mRightSubTextComplicationRenderer.setText(
-                                    ComplicationText.getText(
-                                            getApplicationContext(),
-                                            complicationData.getShortText(),
-                                            currentTimeMillis));
-
-                            // Assuming both the title and text exist.
-                            mRightMainTextComplicationRenderer.draw(
-                                    canvas,
-                                    mRightComplicationMainTextBounds);
-                            mRightSubTextComplicationRenderer.draw(
-                                    canvas,
-                                    mRightComplicationSubTextBounds);
+                        /* In most cases you would want the subText (Title) under the
+                         * mainText (Text), but to keep it simple for the code lab, we are
+                         * concatenating them all on one line.
+                         */
+                        if (subText != null) {
+                            complicationMessage = TextUtils.concat(
+                                    complicationMessage,
+                                    " ",
+                                    subText.getText(getApplicationContext(), currentTimeMillis));
                         }
+
+                        //Log.d(TAG, "Com id: " + COMPLICATION_IDS[i] + "\t" + complicationMessage);
+                        double textWidth =
+                                mComplicationPaint.measureText(
+                                        complicationMessage,
+                                        0,
+                                        complicationMessage.length());
+
+                        int complicationsX;
+
+                        if (COMPLICATION_IDS[i] == LEFT_COMPLICATION_ID) {
+                            complicationsX = (int) ((mWidth / 2) - textWidth) / 2;
+                        } else {
+                            // RIGHT_COMPLICATION_ID calculations
+                            int offset = (int) ((mWidth / 2) - textWidth) / 2;
+                            complicationsX = (mWidth / 2) + offset;
+                        }
+
+                        canvas.drawText(
+                                complicationMessage,
+                                0,
+                                complicationMessage.length(),
+                                complicationsX,
+                                mComplicationsY,
+                                mComplicationPaint);
                     }
                 }
             }
@@ -768,6 +741,11 @@
 
             /* Restore the canvas' original orientation. */
             canvas.restore();
+
+            /* Draw rectangle behind peek card in ambient mode to improve readability. */
+            if (mAmbient) {
+                canvas.drawRect(mPeekCardBounds, mBackgroundPaint);
+            }
         }
 
         @Override
@@ -787,6 +765,12 @@
             updateTimer();
         }
 
+        @Override
+        public void onPeekCardPositionUpdate(Rect rect) {
+            super.onPeekCardPositionUpdate(rect);
+            mPeekCardBounds.set(rect);
+        }
+
         private void registerReceiver() {
             if (mRegisteredTimeZoneReceiver) {
                 return;
diff --git a/wearable/wear/WatchFace/Wearable/src/main/res/drawable-360dpi/add_complication.png b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-360dpi/add_complication.png
new file mode 100755
index 0000000..56f902d
--- /dev/null
+++ b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-360dpi/add_complication.png
Binary files differ
diff --git a/wearable/wear/WatchFace/Wearable/src/main/res/drawable-360dpi/added_complication.png b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-360dpi/added_complication.png
new file mode 100755
index 0000000..b253a81
--- /dev/null
+++ b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-360dpi/added_complication.png
Binary files differ
diff --git a/wearable/wear/WatchFace/Wearable/src/main/res/drawable-360dpi/added_long_text_complication.png b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-360dpi/added_long_text_complication.png
new file mode 100755
index 0000000..705ba87
--- /dev/null
+++ b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-360dpi/added_long_text_complication.png
Binary files differ
diff --git a/wearable/wear/WatchFace/Wearable/src/main/res/drawable-360dpi/settings_overlay.png b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-360dpi/settings_overlay.png
new file mode 100644
index 0000000..b99ba45
--- /dev/null
+++ b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-360dpi/settings_overlay.png
Binary files differ
diff --git a/wearable/wear/WatchFace/Wearable/src/main/res/drawable-360dpi/settings_preview_placeholder.png b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-360dpi/settings_preview_placeholder.png
new file mode 100644
index 0000000..cc45c50
--- /dev/null
+++ b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-360dpi/settings_preview_placeholder.png
Binary files differ
diff --git a/wearable/wear/WatchFace/Wearable/src/main/res/drawable-360dpi/untappable_complication.png b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-360dpi/untappable_complication.png
new file mode 100644
index 0000000..16ff1c5
--- /dev/null
+++ b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-360dpi/untappable_complication.png
Binary files differ
diff --git a/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/add_complication.png b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/add_complication.png
new file mode 100755
index 0000000..b9df433
--- /dev/null
+++ b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/add_complication.png
Binary files differ
diff --git a/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/added_complication.png b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/added_complication.png
new file mode 100755
index 0000000..c73de35
--- /dev/null
+++ b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/added_complication.png
Binary files differ
diff --git a/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/ic_expand_less_white_18dp.png b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/ic_expand_less_white_18dp.png
new file mode 100644
index 0000000..508dc5f
--- /dev/null
+++ b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/ic_expand_less_white_18dp.png
Binary files differ
diff --git a/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/ic_expand_more_white_18dp.png b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/ic_expand_more_white_18dp.png
new file mode 100644
index 0000000..f21e0c3
--- /dev/null
+++ b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/ic_expand_more_white_18dp.png
Binary files differ
diff --git a/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/ic_landscape_white.png b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/ic_landscape_white.png
new file mode 100644
index 0000000..2d96d51
--- /dev/null
+++ b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/ic_landscape_white.png
Binary files differ
diff --git a/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/ic_notifications_off_white_24dp.png b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/ic_notifications_off_white_24dp.png
new file mode 100644
index 0000000..d2b23cf
--- /dev/null
+++ b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/ic_notifications_off_white_24dp.png
Binary files differ
diff --git a/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/ic_notifications_white_24dp.png b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/ic_notifications_white_24dp.png
new file mode 100644
index 0000000..d792f83
--- /dev/null
+++ b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/ic_notifications_white_24dp.png
Binary files differ
diff --git a/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/icn_complications.png b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/icn_complications.png
new file mode 100644
index 0000000..0a6bac8
--- /dev/null
+++ b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/icn_complications.png
Binary files differ
diff --git a/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/icn_styles.png b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/icn_styles.png
new file mode 100755
index 0000000..7204f52
--- /dev/null
+++ b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/icn_styles.png
Binary files differ
diff --git a/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/preview_settings_complication_240.png b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/preview_settings_complication_240.png
new file mode 100644
index 0000000..e7c215b
--- /dev/null
+++ b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/preview_settings_complication_240.png
Binary files differ
diff --git a/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/preview_settings_empty_240.png b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/preview_settings_empty_240.png
new file mode 100644
index 0000000..81a8fea
--- /dev/null
+++ b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/preview_settings_empty_240.png
Binary files differ
diff --git a/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/settings_overlay.png b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/settings_overlay.png
new file mode 100644
index 0000000..40e3cc6
--- /dev/null
+++ b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/settings_overlay.png
Binary files differ
diff --git a/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/settings_preview_placeholder.png b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/settings_preview_placeholder.png
new file mode 100644
index 0000000..6a468da
--- /dev/null
+++ b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/settings_preview_placeholder.png
Binary files differ
diff --git a/wearable/wear/WatchFace/Wearable/src/main/res/drawable-mdpi/ic_expand_less_white_18dp.png b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-mdpi/ic_expand_less_white_18dp.png
new file mode 100644
index 0000000..e4eabb5
--- /dev/null
+++ b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-mdpi/ic_expand_less_white_18dp.png
Binary files differ
diff --git a/wearable/wear/WatchFace/Wearable/src/main/res/drawable-mdpi/ic_expand_more_white_18dp.png b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-mdpi/ic_expand_more_white_18dp.png
new file mode 100644
index 0000000..3be1f75
--- /dev/null
+++ b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-mdpi/ic_expand_more_white_18dp.png
Binary files differ
diff --git a/wearable/wear/WatchFace/Wearable/src/main/res/drawable-mdpi/ic_landscape_white.png b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-mdpi/ic_landscape_white.png
new file mode 100644
index 0000000..f8a27f8
--- /dev/null
+++ b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-mdpi/ic_landscape_white.png
Binary files differ
diff --git a/wearable/wear/WatchFace/Wearable/src/main/res/drawable-mdpi/ic_notifications_off_white_24dp.png b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-mdpi/ic_notifications_off_white_24dp.png
new file mode 100644
index 0000000..3fec9c7
--- /dev/null
+++ b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-mdpi/ic_notifications_off_white_24dp.png
Binary files differ
diff --git a/wearable/wear/WatchFace/Wearable/src/main/res/drawable-mdpi/ic_notifications_white_24dp.png b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-mdpi/ic_notifications_white_24dp.png
new file mode 100644
index 0000000..2a5c93c
--- /dev/null
+++ b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-mdpi/ic_notifications_white_24dp.png
Binary files differ
diff --git a/wearable/wear/WatchFace/Wearable/src/main/res/drawable-xhdpi/added_long_text_complication.png b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-xhdpi/added_long_text_complication.png
new file mode 100755
index 0000000..aed9ba7
--- /dev/null
+++ b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-xhdpi/added_long_text_complication.png
Binary files differ
diff --git a/wearable/wear/WatchFace/Wearable/src/main/res/drawable-xhdpi/ic_expand_less_white_18dp.png b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-xhdpi/ic_expand_less_white_18dp.png
new file mode 100644
index 0000000..dea8988
--- /dev/null
+++ b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-xhdpi/ic_expand_less_white_18dp.png
Binary files differ
diff --git a/wearable/wear/WatchFace/Wearable/src/main/res/drawable-xhdpi/ic_expand_more_white_18dp.png b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-xhdpi/ic_expand_more_white_18dp.png
new file mode 100644
index 0000000..022e057
--- /dev/null
+++ b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-xhdpi/ic_expand_more_white_18dp.png
Binary files differ
diff --git a/wearable/wear/WatchFace/Wearable/src/main/res/drawable-xhdpi/ic_landscape_white.png b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-xhdpi/ic_landscape_white.png
new file mode 100644
index 0000000..21a2024
--- /dev/null
+++ b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-xhdpi/ic_landscape_white.png
Binary files differ
diff --git a/wearable/wear/WatchFace/Wearable/src/main/res/drawable-xhdpi/ic_notifications_off_white_24dp.png b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-xhdpi/ic_notifications_off_white_24dp.png
new file mode 100644
index 0000000..3e96f6d
--- /dev/null
+++ b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-xhdpi/ic_notifications_off_white_24dp.png
Binary files differ
diff --git a/wearable/wear/WatchFace/Wearable/src/main/res/drawable-xhdpi/ic_notifications_white_24dp.png b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-xhdpi/ic_notifications_white_24dp.png
new file mode 100644
index 0000000..9718ccf
--- /dev/null
+++ b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-xhdpi/ic_notifications_white_24dp.png
Binary files differ
diff --git a/wearable/wear/WatchFace/Wearable/src/main/res/drawable-xhdpi/icn_complications.png b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-xhdpi/icn_complications.png
new file mode 100644
index 0000000..8d9bc24
--- /dev/null
+++ b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-xhdpi/icn_complications.png
Binary files differ
diff --git a/wearable/wear/WatchFace/Wearable/src/main/res/drawable-xxhdpi/ic_expand_less_white_18dp.png b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-xxhdpi/ic_expand_less_white_18dp.png
new file mode 100644
index 0000000..ddd0078
--- /dev/null
+++ b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-xxhdpi/ic_expand_less_white_18dp.png
Binary files differ
diff --git a/wearable/wear/WatchFace/Wearable/src/main/res/drawable-xxhdpi/ic_expand_more_white_18dp.png b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-xxhdpi/ic_expand_more_white_18dp.png
new file mode 100644
index 0000000..82e6ac3
--- /dev/null
+++ b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-xxhdpi/ic_expand_more_white_18dp.png
Binary files differ
diff --git a/wearable/wear/WatchFace/Wearable/src/main/res/drawable-xxhdpi/icn_complications.png b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-xxhdpi/icn_complications.png
new file mode 100644
index 0000000..ef745cb
--- /dev/null
+++ b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-xxhdpi/icn_complications.png
Binary files differ
diff --git a/wearable/wear/WatchFace/Wearable/src/main/res/drawable-xxxhdpi/ic_expand_less_white_18dp.png b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-xxxhdpi/ic_expand_less_white_18dp.png
new file mode 100644
index 0000000..62fc386
--- /dev/null
+++ b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-xxxhdpi/ic_expand_less_white_18dp.png
Binary files differ
diff --git a/wearable/wear/WatchFace/Wearable/src/main/res/drawable-xxxhdpi/ic_expand_more_white_18dp.png b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-xxxhdpi/ic_expand_more_white_18dp.png
new file mode 100644
index 0000000..dbc0b20
--- /dev/null
+++ b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-xxxhdpi/ic_expand_more_white_18dp.png
Binary files differ
diff --git a/wearable/wear/WatchFace/Wearable/src/main/res/layout/activity_complication_simple_config.xml b/wearable/wear/WatchFace/Wearable/src/main/res/layout/activity_complication_simple_config.xml
index d32ea10..884aa17 100644
--- a/wearable/wear/WatchFace/Wearable/src/main/res/layout/activity_complication_simple_config.xml
+++ b/wearable/wear/WatchFace/Wearable/src/main/res/layout/activity_complication_simple_config.xml
@@ -14,25 +14,16 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
   -->
-<LinearLayout
+<FrameLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:orientation="vertical"
     android:background="@color/dark_grey"
-    android:paddingTop="4dp">
-
-    <TextView
-        android:id="@+id/header"
-        android:layout_width="match_parent"
-        android:gravity="center"
-        android:text="@string/complication_simple_config_name"
-        android:textSize="20sp"
-        android:layout_height="wrap_content"/>
-
-    <android.support.wearable.view.WearableListView
-        android:id="@+id/wearable_list"
+    android:paddingStart="30dp"
+    android:paddingEnd="30dp">
+    <android.support.wearable.view.WearableRecyclerView
+        android:id="@+id/wearable_recycler_view"
         android:layout_height="wrap_content"
         android:layout_width="match_parent">
-    </android.support.wearable.view.WearableListView>
-</LinearLayout>
\ No newline at end of file
+    </android.support.wearable.view.WearableRecyclerView>
+</FrameLayout>
\ No newline at end of file
diff --git a/wearable/wear/WatchFace/Wearable/src/main/res/layout/config_list_appearance_item.xml b/wearable/wear/WatchFace/Wearable/src/main/res/layout/config_list_appearance_item.xml
new file mode 100644
index 0000000..31e0f23
--- /dev/null
+++ b/wearable/wear/WatchFace/Wearable/src/main/res/layout/config_list_appearance_item.xml
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Copyright (C) 2016 The Android Open Source Project
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~      http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+<Button
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:id="@+id/appearance_button"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    style="@style/AppearanceSettingButton"
+    android:text="Appearance"/>
\ No newline at end of file
diff --git a/wearable/wear/WatchFace/Wearable/src/main/res/layout/config_list_complication_item.xml b/wearable/wear/WatchFace/Wearable/src/main/res/layout/config_list_complication_item.xml
new file mode 100644
index 0000000..52e3aa2
--- /dev/null
+++ b/wearable/wear/WatchFace/Wearable/src/main/res/layout/config_list_complication_item.xml
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Copyright (C) 2016 The Android Open Source Project
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~      http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+<!-- Best Practice: Use a preview image that is 240 pixels or less. -->
+<ImageView
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:id="@+id/watch_face_preview"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:scaleType="center"
+    android:src="@drawable/preview_settings_empty_240"/>
\ No newline at end of file
diff --git a/wearable/wear/WatchFace/Wearable/src/main/res/layout/config_list_more_options_item.xml b/wearable/wear/WatchFace/Wearable/src/main/res/layout/config_list_more_options_item.xml
new file mode 100644
index 0000000..a732545
--- /dev/null
+++ b/wearable/wear/WatchFace/Wearable/src/main/res/layout/config_list_more_options_item.xml
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Copyright (C) 2016 The Android Open Source Project
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~      http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+<ImageView
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:id="@+id/more_options_image_view"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:layout_centerHorizontal="true"
+    android:padding="10dp"
+    android:src="@drawable/ic_expand_more_white_18dp"/>
\ No newline at end of file
diff --git a/wearable/wear/WatchFace/Wearable/src/main/res/values/styles.xml b/wearable/wear/WatchFace/Wearable/src/main/res/values/styles.xml
new file mode 100644
index 0000000..bcf14d4
--- /dev/null
+++ b/wearable/wear/WatchFace/Wearable/src/main/res/values/styles.xml
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+ Copyright (C) 2016 The Android Open Source Project
+
+     Licensed under the Apache License, Version 2.0 (the "License");
+     you may not use this file except in compliance with the License.
+     You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+     Unless required by applicable law or agreed to in writing, software
+     distributed under the License is distributed on an "AS IS" BASIS,
+     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     See the License for the specific language governing permissions and
+     limitations under the License.
+-->
+<resources>
+    <style name="AppearanceSettingButton" parent="android:Widget.Holo.Button.Borderless">
+        <item name="android:padding">8dp</item>
+        <item name="android:textSize">18sp</item>
+        <item name="android:textColor">@color/white</item>
+        <item name="android:textAllCaps">false</item>
+        <item name="android:gravity">center_vertical|center_horizontal</item>
+        <item name="android:drawableLeft">@drawable/icn_styles</item>
+    </style>
+</resources>
\ No newline at end of file