wearables/apps/layouts.jd

page.title=Creating Custom Layouts
page.tags=wear
helpoutsWidget=true

@jd:body

<div id="tb-wrapper">
<div id="tb">

<h2>This lesson teaches you to</h2>
<ol>
  <li><a href="#CustomNotifications">Create custom notifications</a></li>
  <li><a href="#UiLibrary">Create Layouts with the Wearable UI Library</a></li>
</ol>

<h2>You should also read</h2>
<ul>
  <li><a href="{@docRoot}design/wear/index.html">Android Wear Design Principles</a></li>
</ul>

</div>
</div>

<p>Creating layouts for wearables is the same as handheld devices, except you have to design
for the screen size and for glanceability. Do not port functionality
and the UI from a handheld app and expect a good experience. You should create custom layouts
only when necessary. Read the <a href="{@docRoot}design/wear/index.html">design guidelines</a>
for information on how to design great wearable apps.</p>

<h2 id="CustomNotifications">Create Custom Notifications</h2>

<p>
In general, you should create notifications on the handheld and let them
automatically sync to the wearable. This lets you build your notifications
once and have them appear on many types of devices (not just wearables, but
eventually Auto and TV) without having to design them for different
form factors.</p>

<p>If the standard notification styles don't work for you (such as
{@link android.support.v4.app.NotificationCompat.BigTextStyle} or
{@link android.support.v4.app.NotificationCompat.InboxStyle}), you can display an activity with
a custom layout. You can only create and issue custom notifications on the wearable, and the
system does not sync these notifications to the handheld.</p>

<p clas="note"><b>Note:</b> When creating custom notifications on the wearable, you can use the
standard notification APIs (API Level 20) instead of the Support Library.
</p>

<p>To create a custom notification:</p>
<ol>
  <li>Create a layout and set it as the content view for the activity
  that you want to display.
<pre>
public void onCreate(Bundle bundle){
    ...
    setContentView(R.layout.notification_activity);
}
</pre>
  </li>
  <li>Define necessary properties for the activity in the Android manifest to allow
  the activity to be displayed in the wearable's context stream process. You need to declare the
  activity to be exportable, be embeddable, and have an empty task affinity. We also recommend
  setting the theme to <code>Theme.DeviceDefault.Light</code>. For example:</li>
<pre>
&lt;activity android:name="com.example.MyDisplayActivity"
     android:exported="true"
     android:allowEmbedded="true"
     android:taskAffinity=""
     android:theme="@android:style/Theme.DeviceDefault.Light" /&gt;
</pre>
  </li>
  <li>Create a {@link android.app.PendingIntent} for the activity that you want to display.
  For example:
<pre>
Intent notificationIntent = new Intent(this, NotificationActivity.class);
PendingIntent notificationPendingIntent = PendingIntent.getActivity(
        this, 0, notificationIntent, PendingIntent.FLAG_UPDATE_CURRENT);
</pre>
  </li>
  <li>Build a {@link android.app.Notification} and call
  {@link android.app.Notification.WearableExtender#setDisplayIntent setDisplayIntent()}
  providing the {@link android.app.PendingIntent}. The system uses this
  {@link android.app.PendingIntent} to launch the activity when
  users view your notification.
  </li>
  <li>Issue the notification using the
  <a href="{@docRoot}reference/android/app/NotificationManager.html#notify(int, android.app.Notification)"><code>notify()</code></a> method.
  <p class="note"><b>Note:</b> When the notification is peeking on the homescreen, the system
  displays it with a standard template that it generates from the notification's semantic data. This template works well on all watchfaces. When users swipe the notification up, they'll then see the
  custom activity for the notification.</p>
  </li>
</ol>
<h2 id="UiLibrary">Create Layouts with the Wearable UI Library</h2>
<p>
The Wearable UI Library is automatically included when you create your wearable
app with the Android Studio Project Wizard. You can also add this library to your <code>build.gradle</code>
file with the following dependency declaration:
</p>

<pre>
dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    <b>compile 'com.google.android.support:wearable:+'</b>
    compile 'com.google.android.gms:play-services-wearable:+'
}
</pre>

<p>This library helps you build UIs that are designed for wearables. For more information, see
<a href="{@docRoot}training/wearables/ui/index.html">Creating Custom UIs for Wear Devices</a>.</p>

<p>Here are some of the major classes in the Wearable UI Library:</p>

<dl>
  <dt><a href="{@docRoot}reference/android/support/wearable/view/BoxInsetLayout.html"><code>BoxInsetLayout</code></a>
  </dt>
  <dd>A {@link android.widget.FrameLayout} object
  that's aware of screen shape and can box its children in the center square of a round screen.
  </dd>

  <dt><a href="{@docRoot}reference/android/support/wearable/view/CardFragment.html"><code>CardFragment</code></a>
  </dt>
  <dd>A fragment that presents content within an expandable, vertically scrollable card.
  </dd>

  <dt><a href="{@docRoot}reference/android/support/wearable/view/CircledImageView.html"><code>CircledImageView</code></a>
  </dt>
  <dd>An image view surrounded by a circle.
  </dd>

  <dt><a href="{@docRoot}reference/android/support/wearable/activity/ConfirmationActivity.html"><code>ConfirmationActivity</code></a>
  </dt>
  <dd>An activity that displays confirmation animations after the user completes an action.
  </dd>

  <dt><a href="{@docRoot}reference/android/support/wearable/view/CrossfadeDrawable.html"><code>CrossFadeDrawable</code></a>
  </dt>
  <dd>A drawable that contains two child drawables and provides methods to directly adjust the blend
  between the two.
  </dd>

  <dt><a href="{@docRoot}reference/android/support/wearable/view/DelayedConfirmationView.html"><code>DelayedConfirmationView</code></a>
  </dt>
  <dd>A view that provides a circular countdown timer, typically used to automatically confirm an
  operation after a short delay has elapsed.
  </dd>

  <dt><a href="{@docRoot}reference/android/support/wearable/view/DismissOverlayView.html"><code>DismissOverlayView</code></a>
  </dt>
  <dd>A view for implementing long-press-to-dismiss.
  </dd>

  <dt><a href="{@docRoot}reference/android/support/wearable/view/GridViewPager.html"><code>GridViewPager</code></a>
  </dt>
  <dd>A layout manager that allows the user to navigate both vertically and
    horizontally through pages of data. You supply an implementation of a
    <a href="{@docRoot}reference/android/support/wearable/view/GridPagerAdapter.html"><code>GridPagerAdapter</code></a>
    instance to generate the pages that the view shows.
  </dd>

  <dt><a href="{@docRoot}reference/android/support/wearable/view/GridPagerAdapter.html"><code>GridPagerAdapter</code></a>
  </dt>
  <dd>An adapter that supplies pages to a
  <a href="{@docRoot}reference/android/support/wearable/view/GridViewPager.html"><code>GridViewPager</code></a>
  object.
  </dd>

  <dt><a href="{@docRoot}reference/android/support/wearable/view/FragmentGridPagerAdapter.html"><code>FragmentGridPagerAdapter</code></a>
  </dt>
  <dd>An implementation of a
  <a href="{@docRoot}reference/android/support/wearable/view/GridPagerAdapter.html"><code>GridPagerAdapter</code></a>
  instance that represents each page as a fragment.
  </dd>

  <dt><a href="{@docRoot}reference/android/support/wearable/view/DotsPageIndicator.html"><code>DotsPageIndicator</code></a>
  </dt>
  <dd>A page indicator for a
  <a href="{@docRoot}reference/android/support/wearable/view/GridViewPager.html"><code>GridViewPager</code></a>
  implementation that identifies the current page in relation to all available pages on the current
  row.
  </dd>

  <dt><a href="{@docRoot}reference/android/support/wearable/view/WatchViewStub.html"><code>WatchViewStub</code></a>
  </dt>
  <dd>A class that can inflate a specific layout, depending on the shape of the device's screen.
  </dd>

  <dt><a href="{@docRoot}reference/android/support/wearable/view/WearableListView.html"><code>WearableListView</code></a>
  </dt>
  <dd>An alternative version of a {@link android.widget.ListView}
  object that is optimized for ease of use on small screen wearable devices. It displays a
  vertically scrollable list of items, and automatically snaps to the nearest item when the user
  stops scrolling.
  </dd>
</dl>

<h3 id="UiLibReference">Wear UI library API reference</h3>

<p>The reference documentation explains how to use each UI widget in detail. Browse the
<a href="{@docRoot}reference/android/support/wearable/view/package-summary.html">Wear API
reference documentation</a> for the classes above.</p>

<h3 id="UiLibEclipse">Download the Wearable UI library for Eclipse ADT</h3>

<p>If you are using the ADT plugin for Eclipse, download the
<a href="{@docRoot}shareables/training/wearable-support-lib.zip">Wearable UI library</a> to
include the Wearable UI library as a dependency in your project.</p>

<p class="note"><strong>Note:</strong> We recommend
<a href="{@docRoot}sdk/index.html">Android Studio</a> for Android Wear app
development.</p>