Bringing Your App to the Living Room: Android Development on Amazon Fire TV

Mobile development is not just about mobile devices anymore: Android scaled up from mobile devices to the TV screen, and developers have now the occasion to start building for a brand new use case: the 10-foot experience. In this session, we cover what's needed to bring your Android app to the living room: we’ll dive into the Leanback Android support library and understand how to take advantage of the big TV screen while using new UI patterns for app navigation through the remote, and how to run your first TV app on Amazon Fire TV.

Transcript

1. MARIO VIVIANI T E C H N O L O G Y E V A N G E L I S T, A M A Z O N A P P S T O R E U K @mariuxtheone http://www.linkedin.com/in/marioviviani ANDROID DEVELOPMENT ON AMAZ ON FIRE TV
2. I T ’ S A - M E ! Ma r io V ivia n i Technology Evangelist, Amazon Appstore UK @mariuxtheone Android Developer from 2010 95+ apps published 12,000,000+ downloads Google Developer Expert 2013-15 Startup Founder, Co-Worker Speaker at: Droidcon, Android Dev Days, Google I/O 2015
3. Android is Not Just for Mobile Devices
4. Android Android TV Apps based on Fire OS Fire TV Apps based on
5. OS 5 Based on Android Lollipop Android Studio
6. TV 4K & TV STICK
7. bit.ly/firetvspecs TV TV Stick 4K compatible FullHD Quad-core CPU Dual-core CPU 2 GB RAM 1 GB RAM (2160p) (1080p) WiFi – Bluetooth 4.1 WiFi – Bluetooth 3.0 8 GB Internal Storage (actual formatted capacity will be less) 8 GB Internal Storage (actual formatted capacity will be less) USB-A and MicroSD slot MicroUSB (power only)
8. TV APPS
9. Development on Fire TV ADB Setup
13. Development on Fire TV Connect ADB via WiFi adb connect <ipaddress> - + x Terminal
14. Development on Fire TV Project Setup: Media Streaming App
15. TV APPS DEVELOPMENT Fire TV SDK add-on v17 Leanback Library Fire TV SDK add-on
16. Android Studio Project Setup
17. Android Studio Project Setup
18. dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile 'com.android.support:recyclerview-v7:23.1.1' compile 'com.android.support:leanback-v17:23.1.1' compile 'com.android.support:appcompat-v7:23.1.1' compile 'com.github.bumptech.glide:glide:3.4.+' } Gradle Dependencies
19. Browse For Content Read Description & Details Play TV Interaction Model
20. Browse Fragment Details Fragment Playback Overlay Fragment TV App Model
21. Development on Fire TV BrowseFragment
23. BrowseFragment
24. HeadersFragment RowsFragment BrowseFragment
26. ListRowAdapter HeaderItem Movie Movie Movie
27. public class MainFragment extends BrowseFragment { private void loadRows() { List<Movie> list = MovieList.setupMovies(); CardPresenter cardPresenter = new CardPresenter(); //Create the adapter for the row and add all the movies ArrayObjectAdapter listRowAdapter = new ArrayObjectAdapter(cardPresenter); for (Movie movie:list) { listRowAdapter.add(movie); } //Create the header of this row HeaderItem header = new HeaderItem(0, "Category Name"); ...
28. ListRowAdapter RowsAdapter
29. public class MainFragment extends BrowseFragment { ... //add the ListRowAdapter to the RowsAdapter ArrayObjectAdapter rowsAdapter = new ArrayObjectAdapter(new ListRowPresenter()); rowsAdapter.add(new ListRow(header, listRowAdapter)); setAdapter(mRowsAdapter); } }
30. Title Description
31. Title Description ImageCardView
32. public ViewHolder onCreateViewHolder(ViewGroup parent) { ... ImageCardView cardView = new ImageCardView(parent.getContext); cardView.setFocusable(true); cardView.setFocusableInTouchMode(true); return new ViewHolder(cardView); ... } public class CardPresenter extends Presenter { CardPresenter
33. CardPresenter public void onBindViewHolder(Presenter.ViewHolder viewHolder, Object item) { Movie movie = (Movie) item; ImageCardView cardView = (ImageCardView) viewHolder.view; if (movie.getCardImageUrl() != null) { cardView.setTitleText(movie.getTitle()); cardView.setContentText(movie.getDescription()); Glide.with(viewHolder.view.getContext()) .load(movie.getCardImageUrl()) .centerCrop() .into(cardView.getMainImageView()); } }
34. Development on Fire TV DetailsFragment
35. Title Subtitle Description ACTION ACTION
36. DetailsFragment Title Subtitle Description ACTION ACTION
37. private void setupDetailsOverviewRow() { final DetailsOverviewRow row = new DetailsOverviewRow(mSelectedMovie); ... row.setImageDrawable(R.drawable.default_background)); row.addAction(new Action(ACTION_WATCH_TRAILER, “Watch Trailer”, “FREE”))); mAdapter.add(row); } DetailsOverviewRow
38. public class DetailsDescriptionPresenter extends AbstractDetailsDescriptionPresenter { @Override protected void onBindDescription(ViewHolder viewHolder, Object item) { Movie movie = (Movie) item; if (movie != null) { viewHolder.getTitle().setText(movie.getTitle()); viewHolder.getSubtitle().setText(movie.getStudio()); viewHolder.getBody().setText(movie.getDescription()); } } } DescriptionPresenter
39. public class DetailsDescriptionPresenter extends AbstractDetailsDescriptionPresenter { @Override protected void onBindDescription(ViewHolder viewHolder, Object item) { Movie movie = (Movie) item; if (movie != null) { viewHolder.getTitle().setText(movie.getTitle()); viewHolder.getSubtitle().setText(movie.getStudio()); viewHolder.getBody().setText(movie.getDescription()); } } } DescriptionPresenter
40. Development on Fire TV Video Overlay
42. VideoView PlaybackOverlayFragment
43. playback_controls.xml <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <VideoView android:id="@+id/videoView" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="center" /> <fragment android:id="@+id/playback_controls_fragment" android:name="PlaybackOverlayFragment" android:layout_width="match_parent" android:layout_height="match_parent" /> </FrameLayout>
44. PlaybackOverlayActivity - Components public class PlaybackOverlayActivity extends Activity implements PlaybackOverlayFragment.OnPlayPauseClickedListener { private VideoView mVideoView; private LeanbackPlaybackState mPlaybackState; private MediaSession mSession;
46. PlaybackOverlayActivity - MediaSession @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.playback_controls); ... mSession = new MediaSession(this, "LeanbackSampleApp"); mSession.setCallback(new MediaSessionCallback()); mSession.setFlags(MediaSession.FLAG_HANDLES_MEDIA_BUTTONS | MediaSession.FLAG_HANDLES_TRANSPORT_CONTROLS ); mSession.setActive(true); }
47. PlaybackOverlayActivity – Remote @Override public boolean onKeyUp(int keyCode, KeyEvent event) { PlaybackOverlayFragment playbackOverlayFragment = findFragmentById(R.id.playback_controls_fragment); switch (keyCode) { ... case KeyEvent.KEYCODE_MEDIA_PLAY_PAUSE: if (mPlaybackState == LeanbackPlaybackState.PLAYING) { playbackOverlayFragment.togglePlayback(false); } else { playbackOverlayFragment.togglePlayback(true); } return true; ... } }
48. PlaybackOverlayActivity – Play/Pause public void onFragmentPlayPause(Movie movie, int position, Boolean playPause) { mVideoView.setVideoPath(movie.getVideoUrl()); ... if (mPlaybackState != LeanbackPlaybackState.PLAYING) { mPlaybackState = LeanbackPlaybackState.PLAYING; if (position > 0) { mVideoView.seekTo(position); mVideoView.start(); } ... updatePlaybackState(position); updateMetadata(movie); }
49. The Final Result
51. CREATE NEW EXPERIENCES ON FIRE TV
52. Support for Game Controller
53. Amazon Fling bit.ly/amazonfling
54. DIAL DIscovery And Launch
55. Fire TV Catalogue Integration
57. developer.amazon.com/appstore
58. THANK YOU! Mario Viviani @mariuxtheone @AmazonAppDev vivianim@amazon.co.uk developer.amazon.com/appstore