2014-09-26 13:00:34 -07:00
|
|
|
page.title=Creating Custom UIs for Wear Devices
|
2014-10-23 10:55:18 -07:00
|
|
|
page.image=wear/images/10_uilib.png
|
2014-09-26 13:00:34 -07:00
|
|
|
|
|
|
|
|
@jd:body
|
|
|
|
|
|
|
|
|
|
<div id="tb-wrapper">
|
|
|
|
|
<div id="tb">
|
|
|
|
|
<h2>Dependencies and Prerequisites</h2>
|
|
|
|
|
<ul>
|
|
|
|
|
<li>Android Studio 0.8 or later and Gradle 0.12 or later</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<p>User interfaces for wearable apps differ significantly from those built for handheld devices.
|
|
|
|
|
Apps for wearables should follow the Android Wear <a href="{@docRoot}design/wear/index.html">design
|
|
|
|
|
principles</a> and implement the recommended <a href="{@docRoot}design/wear/patterns.html">UI
|
|
|
|
|
patterns</a>, which ensure a consistent user experience across apps that is optimized for
|
|
|
|
|
wearables.</a>
|
|
|
|
|
|
|
|
|
|
<p>This class teaches you how to create custom UIs for your
|
|
|
|
|
<a href="{@docRoot}training/wearables/apps/creating.html">wearable apps</a> and
|
|
|
|
|
<a href="{@docRoot}training/wearables/apps/layouts.html#CustomNotifications">custom
|
|
|
|
|
notifications</a> that look good on any Android Wear device by implementing these
|
|
|
|
|
UI patterns:</p>
|
|
|
|
|
|
|
|
|
|
<ul>
|
|
|
|
|
<li>Cards</li>
|
|
|
|
|
<li>Countdowns and confirmations</li>
|
|
|
|
|
<li>Long press to dismiss</li>
|
|
|
|
|
<li>2D Pickers</li>
|
|
|
|
|
<li>Selection lists</li>
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
<p>The Wearable UI Library, which is part of the Google Repository in the Android SDK,
|
|
|
|
|
provides classes that help you implement these patterns and create layouts that work on
|
|
|
|
|
both round and square Android Wear devices.</p>
|
|
|
|
|
|
|
|
|
|
<p class="note"><b>Note:</b> We recommend using Android Studio for Android Wear development
|
|
|
|
|
as it provides project setup, library inclusion, and packaging conveniences that aren't available
|
|
|
|
|
in ADT. This training assumes you are using Android Studio.</p>
|
|
|
|
|
|
|
|
|
|
<h2>Lessons</h2>
|
|
|
|
|
|
|
|
|
|
<dl>
|
|
|
|
|
<dt><a href="{@docRoot}training/wearables/ui/layouts.html">Defining Layouts</a></dt>
|
|
|
|
|
<dd>Learn how to create layouts that look good on round and square Android Wear devices.</dd>
|
|
|
|
|
<dt><a href="{@docRoot}training/wearables/ui/cards.html">Creating Cards</a></dt>
|
|
|
|
|
<dd>Learn how to create cards with custom layouts.</dd>
|
|
|
|
|
<dt><a href="{@docRoot}training/wearables/ui/lists.html">Creating Lists</a></dt>
|
|
|
|
|
<dd>Learn how to create lists that are optimized for wearable devices.</dd>
|
|
|
|
|
<dt><a href="{@docRoot}training/wearables/ui/2d-picker.html">Creating a 2D Picker</a></dt>
|
|
|
|
|
<dd>Learn how to implement the 2D Picker UI pattern to navigate through pages of data.</dd>
|
|
|
|
|
<dt><a href="{@docRoot}training/wearables/ui/confirm.html">Showing Confirmations</a></dt>
|
|
|
|
|
<dd>Learn how to display confirmation animations when users complete actions.</dd>
|
|
|
|
|
<dt><a href="{@docRoot}training/wearables/ui/exit.html">Exiting Full-Screen Activities</a></dt>
|
|
|
|
|
<dd>Learn how to implement the long-press-to-dismiss UI pattern to exit full-screen activities.</dd>
|
|
|
|
|
</dl>
|
