Overview of the new form factors for Android Lollipop

1. Android ForAll The Things
Paul Ruiz

2. New Android Form Factors
•
Android Wear
•
Android TV
•
Android Auto

3. Android Wear
Android for wearable computing (smart
watches)

Design for Accessibility

Notifications

Hardware Sensors

Device Communication

4. Design for Accessibility

Glanceable Information

Voice Actions

No to Low Interactions

5. Notifications
Cards
●
Action Buttons
●
Quick Reply
●
Media Controls

6. Notifications

7. Notifications
Action Button Notifications:
//Create action pending intent
Intent intent = new Intent( Intent.ACTION_VIEW );
intent.setData( Uri.parse( "http://ptrprograms.blogspot.com" ) );
PendingIntent pendingIntent = PendingIntent.getActivity( getActivity(), 0, intent, 0 );
//Create notification builder with NotificationCompat
NotificationCompat.Builder notificationBuilder = new NotificationCompat.Builder( getActivity() )
.setSmallIcon( R.drawable.ic_launcher )
.setLargeIcon( BitmapFactory.decodeResource( getResources(), R.drawable.icon ) )
.setContentText( getString( R.string.content_text ) )
.setContentTitle( getString( R.string.content_title ) )
.addAction( R.drawable.ic_launcher, "Launch Blog", pendingIntent );
//Create WearableNotification with the previous builder as a base
Notification notification =
new WearableNotifications.Builder( notificationBuilder )
.setHintHideIcon( true )
.build();
mNotificationManager.notify( notificationId, notification );

8. Notifications
Quick Reply Notifications:
//Create notification builder with NotificationCompat
NotificationCompat.Builder notificationBuilder = new NotificationCompat.Builder( getActivity() )
.setSmallIcon( R.drawable.ic_launcher )
.setLargeIcon( BitmapFactory.decodeResource( getResources(), R.drawable.icon ) )
.setContentText( getString( R.string.content_text ) )
.setContentTitle( getString( R.string.content_title ) )
//Create RemoteInput list of quick reply options
RemoteInput remoteInput = new RemoteInput.Builder( "extra_replies" )
.setLabel( ''Transportation'' )
.setChoices( getResources().getStringArray( R.array.getting_around ) )
.build();
Notification notification =
new WearableNotifications.Builder( notificationBuilder )
.setHintHideIcon( true )
.addRemoteInputForContentIntent( remoteInput )
.build();
mNotificationManager.notify( notificationId, notification );

9. Hardware Sensors

Gyroscope

Compass

Barometer

Optical Heart Rate Monitor

Accelerometer

10. Hardware Sensors
Register the SensorListener from android.sensor package:
public void start( SensorManager manager ) {
this.mSensorManager = manager;
//Check if device has a heart rate sensor
mHeartRateSensor = mSensorManager
.getDefaultSensor( Sensor.TYPE_HEART_RATE );
//If heart rate sensor exists, associate it with the SensorListener
if ( mHeartRateSensor != null ) {
mSensorManager.registerListener( this, mHeartRateSensor,
SensorManager.SENSOR_DELAY_FASTEST );
}
}

11. Hardware Sensors
Implement SensorEventListener:
@Override
public void onSensorChanged( SensorEvent event ) {
if ( event.sensor.getType() == Sensor.TYPE_HEART_RATE ) {
if ( (int) event.values[0] > 0 ) {
handleHeartRate( (int) event.values[0] );
}
}
}

12. Device Communication

Direct Bluetooth

Wear APIs
−
Message and DataLayer APIs – Play Services

13. Device Communication
private void sendMessage( final String path, final String text ) {
new Thread( new Runnable() {
@Override
public void run() {
//Get all nodes connected to the phone
NodeApi.GetConnectedNodesResult nodes =
Wearable.NodeApi.getConnectedNodes( mApiClient ).await();
//Try sending a message to each node via the Wearable Message API
for( Node node : nodes.getNodes() ) {
Wearable.MessageApi.sendMessage(
mApiClient,
node.getId(),
path,
text.getBytes() ).await();
}
}
} ).start();
}

14. Device Communication
Implement MessageApi.MessageListener or Extend WearableListenerService
@Override
public void onMessageReceived( MessageEvent messageEvent ) {
if( messageEvent.getPath().equalsIgnoreCase( ''/PathFilter'' ) ) {
handleMessageEvent( messageEvent.getData() );
} else {
super.onMessageReceived( messageEvent );
}
}

15. Additional Resources for Wear
Android Developers Documentation:
https://developer.android.com/wear/index.html
Designing for Wearables
https://www.youtube.com/watch?v=ea_KCJ2qy6s
Building for Android Wear: Depth and Flexibility
http://android-developers.blogspot.com/2015/02/building-
for-android-wear-depth-and.html

16. Related Tutorials
Building a Native Wear Application
http://bit.ly/1B8yfL8
Wear Notifications
http://bit.ly/1FgomIu
Using Native Android Sensors
http://bit.ly/1Azfe0U
Wear Message API
http://bit.ly/1D0v56V

17. Sample Code Projects for Wear
Android Wear Seizure Detector
https://github.com/PaulTR/WearHackathon
Wear MessageAPI
https://github.com/PaulTR/AndroidDemoProjects/tree/
master/WearMessageApi
Native App – Stay Awake
https://github.com/PaulTR/AndroidDemoProjects/
tree/master/StayAwake

18. Android TV

Designing for the Livingroom

Media Apps

Games

19. Designing for the Livingroom

10 Foot View

Immersive Experiences

Voice Interaction

Audio Feedback

Provide Recommendations

20. Media Apps

Leanback Support Library
−
Browse Fragment

Horizontal and Vertical Navigation

Fastlane Navigation

Similar to ListFragment
−
DetailFragment

Detailed information and action chooser

Recommendations
−
SearchFragment

Content Activity

21. BrowseFragment

22. BrowseFragment Rows
private void loadRows() {
ArrayObjectAdapter rowsAdapter = new ArrayObjectAdapter( new ListRowPresenter() );
CardPresenter cardPresenter = new CardPresenter();
for( String category : getCategories() ) {
ArrayObjectAdapter listRowAdapter = new ArrayObjectAdapter( cardPresenter );
for( Movie movie : mMovies ) {
//Group movies by their category
if( category.equalsIgnoreCase( movie.getCategory() ) )
listRowAdapter.add( movie );
}
//Add headers for BrowseFragment Categories
if( listRowAdapter.size() > 0 ) {
HeaderItem header = new HeaderItem( rowsAdapter.size() - 1, category, null );
rowsAdapter.add( new ListRow( header, listRowAdapter ) );
}
}
setAdapter( rowsAdapter );
}

23. DetailFragment

24. DetailFragment
Use an AsyncTask to load DetailFragment:
@Override
protected DetailsOverviewRow doInBackground( Movie... movies ) {
//Create the initial details 'row'
DetailsOverviewRow row = new DetailsOverviewRow( mSelectedMovie );
//Set main image for details
Bitmap poster = getPosterForMovie( mSelectedMovie );
row.setImageBitmap( getActivity(), poster );
//Add buttons to detail view
row.addAction( new Action( ACTION_WATCH, getResources().getString(
R.string.watch ), getResources().getString( R.string.watch_subtext) ) );
return row;
}

25. DetailFragment
@Override
protected void onPostExecute( DetailsOverviewRow detailRow ) {
ClassPresenterSelector classPresenter = new ClassPresenterSelector();
/*
Get the presenter for the detail information:
1. Uses the binder pattern to associate movie dana to the detail view
2. Sets background color and styles
3. Adds ActionClickedListeners to Action buttons
*/
classPresenter.addClassPresenter( DetailsOverviewRow.class,
getDetailsOverviewRowPresenter() );
//Create the recommendations row
classPresenter.addClassPresenter( ListRow.class, new ListRowPresenter() );
//Put everything together
ArrayObjectAdapter adapter = new ArrayObjectAdapter( classPresenter );
adapter.add( detailRow );
loadRelatedMedia( adapter );
setAdapter( adapter );
}

26. DetailFragment -
Recommendations

27. DetailFragment - Recommendations
private void loadRelatedMedia( ArrayObjectAdapter adapter ) {
List<Movie> movies = getMovies();
List<Movie> related = new ArrayList<>();
//Save a list of 'related' movies. In this case, all from the same category
for( Movie movie : movies ) {
if( movie.getCategory().equals( mSelectedMovie.getCategory() ) ) {
related.add( movie );
}
}
//Create a new row adapter for related movies using the same movie cards in BrowseFragment
ArrayObjectAdapter listRowAdapter = new ArrayObjectAdapter( new CardPresenter() );
for( Movie movie : related ) {
listRowAdapter.add( movie );
}
//Create a new header and associate the related row with the
//detail view adapter
HeaderItem header = new HeaderItem( 0, "Related", null );
adapter.add( new ListRow( header, listRowAdapter ) );
}

28. Games

Design
– Landscape
– Companion Apps

Game Controller

29. Game Controller

30. Game Controller
Implement InputDeviceListener
public boolean handleMotionEvent(MotionEvent motionEvent) {
Int deviceId = motionEvent.getDeviceId();
float leftJoystickX = motionEvent.getAxisValue( MotionEvent.AXIS_X );
float leftJoystickY = motionEvent.getAxisValue( MotionEvent.AXIS_Y );
float rightJoystickX = motionEvent.getAxisValue( MotionEvent.AXIS_Z );
float rightJoystickY = motionEvent.getAxisValue( MotionEvent.AXIS_RZ );
return true;
}
public boolean handleKeyEvent(KeyEvent keyEvent) {
Int deviceId = keyEvent.getDeviceId();
return keyEvent.getKeyCode() == KeyEvent.KEYCODE_BUTTON_X;
/* Possible KeyEvents: KEYCODE_BUTTON_A, KEYCODE_BUTTON_B,
KEYCODE_BUTTON_X, KEYCODE_BUTTON_Y
KEYCODE_BUTTON_R1, KEYCODE_BUTTON_R2,
KEYCODE_BUTTON_L1, KEYCODE_BUTTON_L2, etc */
}

31. Additional Resources for TV
Android Developers Documentation:
http://developer.android.com/training/tv/index.html
Android Design Documentation:
http://developer.android.com/design/tv/index.html

32. Related Tutorials
Creating a Media App for Android TV:
http://bit.ly/1D9gwAL
Getting Started with the Gamepad Controller
for Android TV:
http://bit.ly/1MMjPDn

33. Sample Code Projects for Android TV
Android TV Media Player
https://github.com/PaulTR/AndroidDemoProjects/
tree/master/AndroidTVMediaPlayer
Game Using Game Controller
https://github.com/PaulTR/AndroidDemoProjects/
tree/master/AndroidTVAsteroidBelt

34. Android Auto

Design
−
Glanceable and Simple
−
Context Aware
−
Provided UIs

Implementation
−
CarExtender Notifications
−
Media Browser Interface – Folders and playable
items, MediaSession callbacks
Out Soon

35. Message Cards

36. Auto Messaging App
//Create UnreadConversation Object
NotificationCompat.CarExtender.UnreadConversation.Builder
unreadConversationBuilder = new
NotificationCompat.CarExtender.UnreadConversation.Builder( ''Convo'' );
unreadConversationBuilder.setReadPendingIntent( getMessageReadPendingInt
ent() );
unreadConversationBuilder.setReplyAction( getMessageReplyPendingIntent(),
getVoiceReplyRemoteInput() );
unreadConversationBuilder.addMessage( "Message Text" );
return unreadConversationBuilder.build()

37. Auto Messaging App
//Create Notification with Unread Conversation
NotificationCompat.Builder notificationBuilder =
new NotificationCompat.Builder( getApplicationContext() )
.setSmallIcon( R.drawable.ic_launcher )
.setLargeIcon( BitmapFactory.decodeResource( getResources(),
R.drawable.ic_launcher ) )
.setContentText( "content text" )
.setWhen( Calendar.getInstance().get( Calendar.SECOND ) )
.setContentTitle( "content title" );
notificationBuilder.extend( new NotificationCompat.CarExtender()
.setUnreadConversation( getUnreadConversation() ) );
NotificationManagerCompat.from( this ).notify( 1, notificationBuilder.build() );

38. Auto Media App

39. Auto Media App

40. Auto Media App
@Override
public void onLoadChildren(String parentId, Result<List<MediaBrowser.MediaItem>>
result) {
//This method is called by the system to populate items in the media browser
List<MediaBrowser.MediaItem> items = getMediaItemsById( parentId );
if( items != null )
result.sendResult( items );
}
private List<MediaBrowser.MediaItem> getMediaItemsById( String id ) {
List<MediaBrowser.MediaItem> mediaItems = new ArrayList<>();
if( BROWSEABLE_ROOT.equalsIgnoreCase( id ) ) {
//Add folders here
mediaItems.add( generateBrowseableMediaItemByGenre ( BROWSEABLE_ROCK ) );
} else
//Get media items for the selected folder
return getPlayableMediaItemsByGenre( id );
return mediaItems;
}

41. Auto Media App
private MediaBrowser.MediaItem generateBrowseableMediaItemByGenre( String genre ) {
MediaDescription.Builder mediaDescriptionBuilder = new MediaDescription.Builder();
mediaDescriptionBuilder.setMediaId( genre );
mediaDescriptionBuilder.setTitle( genre );
mediaDescriptionBuilder.setIconBitmap( folderBitmap );
return new MediaBrowser.MediaItem( mediaDescriptionBuilder.build(),
MediaBrowser.MediaItem.FLAG_BROWSABLE );
}
private MediaBrowser.MediaItem generatePlayableMediaItem( Song song ) {
MediaDescription.Builder mediaDescriptionBuilder = new MediaDescription.Builder();
mediaDescriptionBuilder.setMediaId( song.getuId() );
mediaDescriptionBuilder.setTitle( song.getTitle() );
mediaDescriptionBuilder.setSubtitle( song.getArtist() );
mediaDescriptionBuilder.setIconUri( song.getImage() ) );
return new MediaBrowser.MediaItem(
mediaDescriptionBuilder.build(),
MediaBrowser.MediaItem.FLAG_PLAYABLE );
}

42. Additonal Resources for Auto
Developer Overview:
https://developer.android.com/auto/overview.html
Managing Audio Playback:
https://developer.android.com/training/managing-
audio/index.html
Notifications:
http://developer.android.com/guide/topics/ui/notifiers/
notifications.html

43. Related Tutorials
Using the Android Auto Media Browser:
http://bit.ly/17KsqWj
Sending Messages to Android Auto:
http://bit.ly/1JB9ZoT

44. Sample Code Projects for Auto
Media Browser:
https://github.com/PaulTR/AndroidDemoProjects/tree/
master/AndroidAutoMedia
Auto Messenger:
https://github.com/PaulTR/AndroidDemoProjects/tree/
master/AndroidAutoMessenger

45. Me
Android Development Blog:
http://ptrprograms.blogspot.com/
GitHub:
https://github.com/PaulTR
Google Plus:
+PaulTrebilcoxRuiz