Updated image sizes and wrapped text around images.

Fixed messagingstyle link in api-overview page.

Bug:28864173
Change-Id: I2e1a6036010b2e3aea8104e51e37a1697906691c

docs/html/wear/preview/api-overview.jd

@@ -147,7 +147,7 @@ see <a href="{@docRoot}wear/preview/features/complications.html">
 <p> If you have a chat messaging app, your notifications should use
 {@code Notification.MessagingStyle}, which is new in Android 6.0. Wear 2.0 uses
 the chat messages included in a
-<a href="{docRoot}preview/features/notification-updates.html#style">{@code MessagingStyle}</a>
+<a href="{@docRoot}preview/features/notification-updates.html#style">{@code MessagingStyle}</a>
  notification
 (see {@code addMessage()}) to provide a rich chat app-like experience in the
 expanded notification.

docs/html/wear/preview/features/notifications.jd

@@ -41,7 +41,7 @@ material design</a> visual changes.
 </p>
 
 <p><img src="{@docRoot}wear/preview/images/comparison_diagram.png" /> </p>
-<p><b>Figure 1.</b> Comparison of the same notification in Android Wear 1.x and 2.0.</p> 
+<p><b>Figure 1.</b> Comparison of the same notification in Android Wear 1.x and 2.0.</p>
 
 <p>Some of the visual updates include:</p>
 <ul>
@@ -73,7 +73,7 @@ material design</a> visual changes.
 
 <li><strong>Updated horizontal swipe gesture on a notification</strong>:
   To dismiss a notification in Wear 2.0, the user swipes horizontally in either
-  direction. So if your notification instructs the user to swipe left or right, 
+  direction. So if your notification instructs the user to swipe left or right,
   you must update the text of your notification.
 </li>
 </ul>
@@ -82,13 +82,14 @@ material design</a> visual changes.
   substantial additional content and actions for each notification.
 </p>
 <p>When you <a href="{@docRoot}training/wearables/notifications/pages.html">specify additional content pages</a>
- and actions for a notification, those are available to the user within the 
- expanded notification. Each expanded notification follows 
+ and actions for a notification, those are available to the user within the
+ expanded notification. Each expanded notification follows
  <a href="http://www.google.com/design/spec-wear">Material Design for Android Wear</a>,
   so the user gets an app-like experience.
 </p>
-<p><img src="{@docRoot}wear/preview/images/expanded_diagram.png" /> </p>
-<p><b>Figure 2</b>. An expanded notification with content and actions.</p>
+
+
+<h3 id="expanded">Expanded notifications</h3>
 <p>If the first action in the expanded notification has a
 <a href=" {@docRoot}reference/android/support/v4/app/RemoteInput.html">{@code RemoteInput}</a>
   (e.g., a Reply action), then the choices you set with <a href="http://developer.android.com/reference/android/support/v4/app/RemoteInput.Builder.html#setChoices(java.lang.CharSequence[])">{@code setChoices()}</a>
@@ -102,7 +103,7 @@ material design</a> visual changes.
   <li>The notification is generated by an app on the paired phone and
     bridged to Wear.
   </li>
-  <li>The notification does not have a 
+  <li>The notification does not have a
   <a href="http://developer.android.com/reference/android/support/v4/app/NotificationCompat.Builder.html#setContentIntent(android.app.PendingIntent)">{@code contentIntent}</a>.
   </li>
 </ul>
@@ -126,9 +127,11 @@ material design</a> visual changes.
 <p>
  Expanded Notifications allow you to include additional content and actions
    for a notification. You choose the level of detail that your app's notifications
-    will provide; however be judicious with the amount of detail you include in a 
-    notification. 
+    will provide; however be judicious with the amount of detail you include in a
+    notification.
 </p>
+<img src="{@docRoot}wear/preview/images/expanded_diagram.png" height="340"
+  style="float:left;margin:10px 20px 0 0" />
 <h4>Adding additional content</h4>
 To show additional content in your expanded notification, see <a href="{@docRoot}training/wearables/notifications/pages.html">Adding Pages to a Notification</a>.</p>
 <p>Additional content pages are stacked vertically in the expanded notification
@@ -151,34 +154,36 @@ action in the notification unless a different action is specified using
 
 <p>If you have a chat messaging app, your notifications should use
 <a href="{@docRoot}preview/features/notification-updates.html#style">{@code Notification.MessagingStyle}</a>,
- which is new in Android 6.0. Wear 2.0 uses the chat messages included
+ which is new in Android N. Wear 2.0 uses the chat messages included
   in a <a href="{@docRoot}preview/features/notification-updates.html#style">{@code MessagingStyle}</a> notification 
+
   (see <a href="{@docRoot}preview/features/notification-updates.html#style">{@code addMessage()}</a>) to provide
   a rich chat app-like experience in the expanded notification.
 </p>
-<p class="note">Note: <a href="{@docRoot}preview/features/notification-updates.html#style">{@code MessagingStyle}</a> 
+
+<p class="note">Note: <a href="{@docRoot}preview/features/notification-updates.html#style">{@code MessagingStyle}</a>
 expanded notifications require that you have at least version 1.5.0.2861804 of the
   <a href="https://play.google.com/store/apps/details?id=com.google.android.wearable.app">Android Wear app</a>
   on your paired Android phone. That version will be available within the next
   few weeks in the Play Store.
 </p>
+
 <h3 id="smart-reply">Smart Reply</h3>
-<p>Wear 2.0 also introduces <i>Smart Reply</i> for <a href="{@docRoot}preview/features/notification-updates.html#style">{@code MessagingStyle}</a> notifications.
+<img src="{@docRoot}wear/preview/images/messaging_style.png" height="420"
+  style="float:right;margin:10px 20px 0 0" />
+<p>Wear 2.0 also introduces <i>Smart Reply</i>
+for <a href="{@docRoot}preview/features/notification-updates.html#style">{@code MessagingStyle}</a> notifications.
   Smart Reply provides the user with contextually relevant, touchable choices in
   the expanded notification and in {@code RemoteInput}. These augment the fixed
-  list of choices that the developer provides in 
+  list of choices that the developer provides in
    <a href="http://developer.android.com/reference/android/support/v4/app/RemoteInput.html">{@code RemoteInput}</a>
-    using the 
+    using the
     <a href="{@docRoot}reference/android/support/v4/app/RemoteInput.Builder.html#setChoices(java.lang.CharSequence[])">{@code setChoices()}</a> method.
 </p>
 <p>By enabling Smart Reply for your MessagingStyle notifications,
   you provide users with a fast (single tap), discreet (no speaking aloud), and
   reliable way to respond to chat messages.
 </p>
-<p><img src="{@docRoot}wear/preview/images/messaging_style.png" /></p>
-<p><b>Figure 3</b>. The expanded notification includes contextually relevant
-  Smart Reply responses below the primary action.
-</p>
 
 <p>Responses generated by Smart Reply are shown in addition to those set using the
   <a href="{@docRoot}reference/android/support/v4/app/RemoteInput.Builder.html#setChoices(java.lang.CharSequence[])">{@code setChoices()}</a> method.
@@ -189,7 +194,7 @@ following:
 <ol>
   <li>Use <a href="{@docRoot}preview/features/notification-updates.html#style">{@code Notification.MessagingStyle}</a>.
   </li>
-  <li>Call the method 
+  <li>Call the method
   <a href="{@docRoot}wear/preview/start.html#get_the_preview_reference_documentation">{@code setAllowGeneratedReplies()}</a>
    for the notification action.</li>
   <li>Ensure that the notification action has a
@@ -222,8 +227,9 @@ Notification noti = new NotificationCompat.Builder()
  .setSmallIcon(R.drawable.new_message)
  .setLargeIcon(aBitmap)
  // 2) set the style to MessagingStyle
- .setStyle(new NotificationCompat.MessagingStyle(resources.getString(R.string.reply_name)).addMessage(messages[0].getText(), messages[0].getTime(), messages[0].getSender())
-  .addMessage(messages[1].getText(), messages[1].getTime(), messages[1].getSender()))
+ .setStyle(new NotificationCompat.MessagingStyle(resources.getString(R.string.reply_name))
+ .addMessage(messages[0].getText(), messages[0].getTime(), messages[0].getSender())
+ .addMessage(messages[1].getText(), messages[1].getTime(), messages[1].getSender()))
 
 
 // 3) add an action with RemoteInput