1 page.title=Creating Custom Layouts 2 3 @jd:body 4 5 <div id="tb-wrapper"> 6 <div id="tb"> 7 8 <h2>This lesson teaches you to</h2> 9 <ol> 10 <li><a href="#CustomNotifications">Create custom notifications</a></li> 11 <li><a href="#UiLibrary">Create Layouts with the Wearable UI Library</li> 12 </ol> 13 14 <h2>You should also read</h2> 15 <ul> 16 <li><a href="{@docRoot}design/wear/index.html">Android Wear Design Principles</a></li> 17 </ul> 18 19 </div> 20 </div> 21 22 <p>Creating layouts for wearables is the same as handheld devices, except you have to design 23 for the screen size and for glanceability. Do not port functionality 24 and the UI from a handheld app and expect a good experience. You should create custom layouts 25 only when necessary. Read the <a href="{@docRoot}design/wear/index.html">design guidelines</a> 26 for information on how to design great wearable apps.</p> 27 28 <h2 id="CustomNotifications">Create Custom Notifications</h2> 29 30 <p> 31 In general, you should create notifications on the handheld and let them 32 automatically sync to the wearable. This lets you build your notifications 33 once and have them appear on many types of devices (not just wearables, but 34 eventually Auto and TV) without having to design them for different 35 form factors.</p> 36 37 <p>If the standard notification styles don't work for you (such as 38 {@link android.support.v4.app.NotificationCompat.BigTextStyle} or 39 {@link android.support.v4.app.NotificationCompat.InboxStyle}), you can display an activity with 40 a custom layout. You can only create and issue custom notifications on the wearable, and the 41 system does not sync these notifications to the handheld.</p> 42 43 <p clas="note"><b>Note:</b> When creating custom notifications on the wearable, you can use the 44 standard notification APIs (API Level 20) instead of the Support Library. 45 </p> 46 47 <p>To create a custom notification:</p> 48 <ol> 49 <li>Create a layout and set it as the content view for the activity 50 that you want to display. 51 <pre> 52 public void onCreate(Bundle bundle){ 53 ... 54 setContentView(R.layout.notification_activity); 55 } 56 </pre> 57 </li> 58 <li>Define necessary properties for the activity in the Android manifest to allow 59 the activity to be displayed in the wearable's context stream process. You need to declare the 60 activity to be exportable, be embeddable, and have an empty task affinity. We also recommend 61 setting the theme to <code>Theme.DeviceDefault.Light</code>. For example:</li> 62 <pre> 63 <activity android:name="com.example.MyDisplayActivity" 64 android:exported="true" 65 android:allowEmbedded="true" 66 android:taskAffinity="" 67 android:theme="@android:style/Theme.DeviceDefault.Light" /> 68 </pre> 69 </li> 70 <li>Create a {@link android.app.PendingIntent} for the activity that you want to display. 71 For example: 72 <pre> 73 Intent notificationIntent = new Intent(this, NotificationActivity.class); 74 PendingIntent notificationPendingIntent = PendingIntent.getActivity(this, 0, notificationIntent, 75 PendingIntent.FLAG_UPDATE_CURRENT); 76 </pre> 77 </li> 78 <li>Build a {@link android.app.Notification} and call 79 {@link android.app.Notification.WearableExtender#setDisplayIntent setDisplayIntent()} 80 providing the {@link android.app.PendingIntent}. The system uses this 81 {@link android.app.PendingIntent} to launch the activity when 82 users view your notification. 83 </li> 84 <li>Issue the notification using the 85 <a href="{@docRoot}reference/android/app/NotificationManager.html#notify(int, android.app.Notification)"><code>notify()</code></a> method. 86 <p class="note"><b>Note:</b> When the notification is peeking on the homescreen, the system 87 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 88 custom activity for the notification.</p> 89 </li> 90 </ol> 91 <h2 id="UiLibrary">Create Layouts with the Wearable UI Library</h2> 92 <p> 93 There's an unofficial UI library that is automatically included when you create your wearable 94 app with the Android Studio Project Wizard. You can also add the library to your <code>build.gradle</code> 95 file with the following dependency declaration: 96 97 <pre> 98 dependencies { 99 compile fileTree(dir: 'libs', include: ['*.jar']) 100 <b>compile 'com.google.android.support:wearable:+'</b> 101 compile 'com.google.android.gms:play-services-wearable:+' 102 } 103 </pre> 104 This library helps you build UIs that are designed for wearables. Here are some of the major classes: 105 </p> 106 107 <ul> 108 <li><code>BoxInsetLayout</code> - A FrameLayout that's aware of screen shape and can box its 109 children in the center square of a round screen.</li> 110 <li><code>CardFragment</code> - A fragment that presents content within an expandable, 111 vertically scrollable card.</li> 112 <li><code>CircledImageView</code> - An image view surrounded by a circle.</li> 113 <li><code>ConfirmationActivity</code> - An activity that displays confirmation animations after the user 114 completes an action.</li> 115 <li><code>DismissOverlayView</code> - A view for implementing long-press-to-dismiss.</li> 116 <li><code>GridViewPager</code> - A layout manager that allows the user to both vertically and 117 horizontally through pages of data. You supply an implementation of a GridPagerAdapter to 118 generate the pages that the view shows.</li> 119 <li><code>GridPagerAdapter</code> - An adapter that supplies pages to a GridViewPager.</li> 120 <li><code>FragmentGridPagerAdapter</code> - An implementation of GridPagerAdapter that 121 represents each page as a fragment.</li> 122 </li> 123 <li><code>WatchViewStub</code> - A class that can inflate a specific layout, 124 depending on the shape of the device's screen.</li> 125 <li><code>WearableListView</code> - An alternative version of ListView that is optimized for 126 ease of use on small screen wearable devices. It displays a vertically scrollable list of items, 127 and automatically snaps to the nearest item when the user stops scrolling. 128 </li> 129 </ul> 130 131 <p class="note"><a href="{@docRoot}shareables/training/wearable-support-docs.zip">Download the full API 132 reference documentation</a> for the classes above. The documentation goes over how to use 133 each UI widget.</p> 134
