Android Wear for beginners: A lunch tracker app
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Number of Parts | 46 | |
| Author | ||
| License | CC Attribution 3.0 Unported: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor. | |
| Identifiers | 10.5446/47183 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
00:00
RepetitionAndroid (robot)Lecture/Conference
00:21
Computing platformMobile appLecture/Conference
00:41
Graph (mathematics)outputBitAlgorithmNetwork topologyAndroid (robot)NeuroinformatikJava appletStandard deviationMultiplication signComputer scienceLecture/Conference
01:13
Normal (geometry)Tablet computerMobile appGame theoryAndroid (robot)Bookmark (World Wide Web)Student's t-testCodeElectronic mailing listSampling (statistics)SpacetimeLocal ring1 (number)View (database)Goodness of fitBitWeb 2.0Computer iconLecture/Conference
02:34
Sample (statistics)Execution unitCodeComputing platformContent (media)Sampling (statistics)Mobile appComputer animation
02:51
CodeComputing platformContent (media)Android (robot)CodeAddress spaceBitSlide ruleProjective planeWeb 2.0Computer animationLecture/Conference
03:14
TouchscreenClosed setDifferent (Kate Ryan album)Android (robot)Revision controlMultiplication signMobile appGame theoryWeb 2.0Computing platformLecture/Conference
04:08
Walsh functionMobile appComputing platformAndroid (robot)GoogolPlastikkarteMobile app1 (number)SpacetimeConnectivity (graph theory)GoogolSoftware developerAndroid (robot)Multiplication signFacebookGame theoryConnected spaceLecture/Conference
04:58
RepetitionGoogolPlastikkarteElectronic mailing listCASE <Informatik>Normal (geometry)Projective planeElectronic mailing listAndroid (robot)Data storage device1 (number)BitPlastikkarteDifferent (Kate Ryan album)Social classMobile appGroup actionVariable (mathematics)Flow separationMusical ensembleMultilaterationView (database)TouchscreenGoogolLecture/Conference
06:06
GoogolPlastikkarteElectronic mailing listRepetitionMessage passingTouchscreenPixelPopulation densityAreaElectronic mailing listPoint (geometry)Computer animation
06:39
Machine visionMobile appDifferent (Kate Ryan album)MereologyMultiplication sign1 (number)Projective planeLecture/Conference
07:14
Menu (computing)Sample (statistics)Scalable Coherent InterfaceCASE <Informatik>HypothesisSpacetimeEmulatorLocal ringReal numberOffice suiteMobile appCodeStudent's t-test1 (number)Different (Kate Ryan album)Android (robot)Revision controlLecture/Conference
08:47
Menu (computing)MaizeAxiom of choiceDuplex (telecommunications)Newton's law of universal gravitationRevision controlEmulatorElectronic mailing listView (database)Computer animation
09:06
Drum memoryDirection (geometry)MaizeOnline helpoutputInclusion mapAxiom of choiceStatisticsAndroid (robot)Standard deviationKeyboard shortcutLatent heatCodeoutputWeb pageBitPrice indexType theorySpeech synthesisNormal (geometry)TouchscreenEmulatorStatisticsPoint (geometry)Cartesian coordinate systemVolumenvisualisierungDemo (music)Real numberComputer simulationElectronic mailing listMobile appMultiplicationMenu (computing)Axiom of choice
11:13
Inclusion mapSpeech synthesisAndroid (robot)CodeElectronic mailing listMobile appDatabaseCodeMultiplication signComputer animation
11:47
Android (robot)Computer iconDigital filterMenu (computing)Execution unitView (database)Numbering schemeRevision controlConvex hullGreatest elementSummierbarkeitMaxima and minimaCircleSocial classDot productElectronic mailing listView (database)Roundness (object)Price indexFrame problemVariable (mathematics)Web pageCuboidProjective planeComputer configurationComputer file1 (number)Message passingCircleTouchscreenInsertion lossRootSquare numberFlow separationStandard deviationMedical imagingComputer iconComputer hardwareRoutingGreatest elementLibrary (computing)HierarchyData managementMobile appComputer animation
15:22
Menu (computing)Android (robot)CircleSpeech synthesisStatisticsExecution unitMaxima and minimaNormal (geometry)Information managementFiber bundleView (database)Local GroupNormed vector spaceOvalAxiom of choiceConvex hullComputer iconCodeInheritance (object-oriented programming)String (computer science)outputHost Identity ProtocolEndliche ModelltheorieRow (database)CountingFormal languageWordFinite-state machineWeb pageSpeech synthesisMenu (computing)ResultantPhysical systemParameter (computer programming)Statistics1 (number)NumberDatabaseExpert systemMultiplication signCodeGraph coloringGoogolTouchscreenView (database)Computer animation
18:48
CodeGroup actionSlide ruleAndroid (robot)QuicksortEmulatorPersonal digital assistantComputer animationLecture/Conference
19:26
CuboidLevel (video gaming)Real numberEmulatorRoundness (object)Computer simulationRevision controlLecture/Conference
19:46
Bit error rateLecture/Conference
Transcript: English(auto-generated)
00:05
Okay, can you hear me? Yeah, that's great. Okay, I'm delighted that there's still people here because it's quite late on Friday afternoon and the weather is beautiful outside, but I'm glad you choose to come here. So I'll try to guide you through some of the basics in Android Wear.
00:21
It's an exciting new platform just released last year, and it might be somebody who wants to get started but don't really know how, so I hope you can use this talk. First of all, how many people has a smartwatch here? Raise your hand. Okay, quite a few. How many people has actually made an app for a smartwatch?
00:42
Ah, okay. Well, this is for beginners only, but you're welcome to stay, of course. So a bit about me, I'll do it fast. Well, I started in mobile back in a galaxy far, far away called Java Micro Edition, well, a long time ago. Unfortunately, we improved a lot in the industry
01:01
and, well, we have iOS and, of course, Android. These days, I'm in the academic world. I'm teaching basic computer science, you know, your standard graph algorithms and tree algorithms and this stuff in a local college in Denmark. Well, nobody knows the town, but it's about one hour away from Legoland. So if you're in the vicinity, come visit, it's a nice place.
01:25
And we have quite a good IT community there as well. And I teach one Android course, which is, of course, my favorite. So it's a full semester course and normally we teach just, let's say, normal phone and tablet Android, but we want to introduce Android Wear, of course,
01:40
in this course as well for a few weeks. Normally the problem for students and maybe also many beginners is actually that, yes, you can find a lot of online material on Google, like code snippets here and there, how to do a confirmation dialogue, how to do a list view, but putting everything together is often a bit challenging for students.
02:01
So I'll show you one sample app that demonstrates a lot of these things. First, actually, I just wanted to show you some, like what is out there, you know, the creativity is actually huge. So just two of my favorite ones for Wear. This was the first one I downloaded, Space Invader for Android Wear.
02:21
I don't know who made this, it's not an affiliate to me, but, you know, you have a lot of games out there. You have a lot of cool watch faces also these days. Here's an interesting one, I actually met the people who made this at the welcome party here. It's like a beer o'clock, watch face, yeah, when it's five o'clock you can drink beer.
02:40
So a lot of creativity out there, I have to say. So my talk, basically just a brief intro to Android Wear and what is my sample app here about, and then, you know, we'll go to the code into Android Studio, look at some of how the XML is done and the code,
03:01
and hopefully we can manage to do quite a bit. All the code is on GitHub. This address will be on all the slides and also the last slide. You see the GitHub address. There's also a few, another Wear project. If you're interested in doing like full screen custom graphics apps on Wear,
03:20
like games, I have an example on GitHub as well how to do that. It's a bit different than doing standard Wear UI, so feel welcome to have a look at that as well. Then a few conclusions and some, you know, advice for people who want to get started on Android Wear.
03:40
And hopefully you'll have some time for a few questions before the closing ceremony. So the Wear platform, basically just running a watch version of Android. There's some things you can do on normal Android, it's not possible on Wear, and some things vice versa, but we'll get into that later.
04:01
So old watches, well, I have a Moto 360 here, it's already pretty old, first gen, so it needs to be connected to my phone via Bluetooth, but newer ones can use Wi-Fi for connectivity. So the main idea from Google is that the watch should be showing relevant data
04:22
at relevant time by cards or notifications. You can also of course have standalone apps like the Space Invader one. This relevant is of course a challenge. Now a lot of the big companies, I think Facebook and LinkedIn,
04:43
have like a Wear component for the Android app, so you get some special notifications on your app here. As a developer, if you want to release a Wear component or a standalone Wear app like a game, well it still needs to be packaged inside a normal phone app,
05:02
there's no special Play Store where you can download Wear apps, so it needs to be packaged into that, and I have a project as well on GitHub, you can look on how to do this packaging inside, there's several different ways to do that. So just be aware of that. So you actually need to have two apps like a phone and a Wear app
05:22
and then combine them into one. Just to show you a bit about how is the UI on Android Wear, so these are some examples from Google, I have some custom ones a bit later, there's quite a few more than these, but basically you have cards which can also show an action,
05:44
so in this case it's a music player, and you see a pause button on this action card, you can have lists, there's a special variable list class for this, it's not the normal list view,
06:03
and one thing you probably already notice here is, well the screen is really small, you only have three items here in your list, and this is of course the challenge on Wear, the screen is really small, I think on the motor it's like 1.65 inches,
06:21
in pixels it's about 320 pixels by 290, I think around that area, so we're almost back into the old VGA standard, 320 by 200, but of course the density is higher. Also you have like confirmations, you can show to the user that okay we sent a message
06:40
or we did some other things, and there's a lot more of these special Wear UI. Okay so the app I'm just presenting here is for, I made it for educational purposes, so it's not a commercial project, and that's why if Jana who did the keynote the first day, if she was here she would kill me for the UI,
07:02
because it's not meant to be like a commercial ones, it's just to show different, oh sorry, just to show different ways of doing the UI, so I have buttons in different styles, and I have dialogues in different styles, so please it's for educational purposes. I wanted to include as much code as possible for students
07:22
and new people into Android Wear. So actually this was born out of a critical need to examine what kind of food did we get in our local canteen, and yeah there was a hypothesis that we get too much chicken, so of course we need to make an app for that,
07:42
you know we need to be data driven, so I made an app for that, just for my own purposes and educational ones, and here actually there was a real use case, I don't think I've seen like a killer app yet for Wear, of course there's nice apps, but you can certainly live without SpaceInvader
08:01
or you can live without the beer or o'clock, so I haven't really found a killer app yet, but I hope some guys here will make it in the future. So the use case for me was that actually I'm not always carrying the phone around, and this might be something you can consider, is there some places where people normally
08:21
don't carry the phones these days, it's getting less and less, people carry the phones to toilets, in the bed, whatever, but this could be something you could think about, and for me I always leave my phone in the office just charging. So just to show you some of the UI here,
08:42
I have it running also in an emulator, it's probably easier to show in the emulator, I have a big version here of the emulator, I have a smaller one as well, but I think we go with the big one. So basically you have your list view here, you know what did you have for lunch,
09:02
well okay it's pretty simple, but let's say I click and you know it's a bit slow, the emulator here, but on Realbot it's quite fast. Then I can slide, you know, and I can see my statistics from the other days, you know, just to have another screen, just to show how to do multi-screen in Android Wear,
09:21
these are called pages, we'll get back to the code for how to do that. You'll notice in the bottom there's like an indicator here, it's called a dot page indicator, I think it's really nice to include that for your users to see what screen are you on. If I go here, well, you know, maybe if I was in Australia for a visit or something,
09:43
maybe I wanted to put kangaroo on the menu, it's not one of the predefined choices, and here we run into a challenge on Wear, how to do input. Obviously, keyboard input is a no-go, you can't really type on the Wear, so that's why we have speech input, and that I wanted to demonstrate in the app as well.
10:02
If you want to test it on the emulator, I won't do it because it doesn't work, speech input you have to type in, so it's not so much fun, but it works here, and I can add whatever new stuff I want to my list. Well, then there's some reset buttons to reset the stuff, and here I just wanted to show the dialogs,
10:20
you notice, so here, these buttons here are just standard Android UI, if you don't do anything to the buttons, they're rendered like this, well, maybe it's pretty boring, but of course you can style your buttons exactly as you do on normal Android to get something specific for your application, you have also dialogs, let's say I press this reset stats,
10:42
this is actually a normal alert dialog, it works exactly as on normal Android, and it's rendered like this, of course you can choose the text, yeah, but that's how it's rendered. You probably want to do your own dialogs, at some point maybe a bit, let's say Wear-like,
11:01
maybe something like this, maybe a bit more graphical as well, so that's also in the code. Okay, I think that's enough for the demo, let's move a bit on, so these we have already looked at, so let's move on.
11:21
So actually this is a pretty simple app, but there's a lot of Wear-specific things, and how to get everything up and running, here's just a small list of some of these things that this app demonstrates, while there's of course also a database, SQL database that works exactly as you would expect, and there's a lot of other stuff.
11:42
Okay, let's look at some code, and I can just show a few highlights because of time, but everything is on GitHub. Is it big enough? Bigger? No?
12:00
I don't know. I'll just put it up a bit bigger maybe. Yeah, okay, anyway. So this is the manifest file, so just a few things I want to point out here.
12:21
So yeah, we have this hardware feature, of course we need to have a watch, for that you want to include that in your manifest. You also want to include any classes you use, and here I use one class from the support library, the variable support library. Confirmation activities, those were the ones you saw
12:42
with the one button saying, or the one icon saying message sent. So yeah, those you also want to include as well. Alright, let's go into the main activity, just to show the XML. Here are three important classes.
13:02
Yeah, you'll notice that it's actually rendered as empty because it includes other pages. So you can use what is called a box insert layout if you want to have kind of the same UI on both a round and a square device.
13:22
If you want to have a completely separate UI on round and square, there's also another class called watch view stop, you can use for that. I have that on my other project on GitHub, if you want to look into that. Here I have the same UI for round and square devices, so I use that.
13:40
It needs to be in your root hierarchy, otherwise it won't work. Then there's the grid view pager, and this is for if you want to have several screens in your variable app, you put that in as well. And finally, we have the dots page indicator to get the dots on the bottom,
14:04
and you can also decide to put them on top or wherever you want. So there's a lot of options here. Okay, let's try to go into, let's say, the select one, just one of them. So you will notice that,
14:20
so this is the XML for the first screen where I can select what did I have for lunch, and those are all frame layouts, so each screen is actually a frame, so you can use the standard frame manager, et cetera, for that, so it's defined as a frame layout.
14:40
And here you have a special list view, if I just show it here. Here, this is from the variable support library, so this is the variable list view, and of course you need to define how will your children of this view look like. You can do that in another file.
15:00
I have it here just to show you. So basically you can do anything in there, so this is a variable list item layout class, and in my example here, well, basically I have an image view, which was the blue circle you saw, so that is defined here as a drawable,
15:22
and then I have the text view, which of course depends on what is in the database. You can do anything you want in here. So that's the layout. Okay, let's just look briefly at how to do this grid paging, how to have several pages.
15:41
So basically you need to have an adapter, and this is in Wear as well, it's called fragment grid pager adapter, if you can see it in the end here, you need to extend that, and then you need to override three methods to determine what should be on each of those screens.
16:00
So I have four fragments as well here for each of my screens, but let's go to these methods you have to override. So this is the most important one. This is called get fragment, and this is called by the system. So you will notice actually here the two parameters,
16:21
that's like a row and a column, so this means you can do a layout page in 2D, so you can also scroll horizontally if you want. Here I just have a one-dimensional one. So I'm just looking at the column. So the column one is of course the first screen, then I return my menu fragment,
16:40
column one is like a stats fragment, and the second one is the speech fragment, and then this clear fragment at the end. So that's basically how you do it. Yeah, and then you need also to return what is your row count. I just have one row here, and you need to return what is your column count.
17:01
Of course if you do something in 2D, the column count will depend on the row number. So this can be dynamically. That's why there's one parameter here. Yeah, I think I have of course a lot of code I want to show. The final one, because time is running,
17:20
just a speech fragment, how to use the speech recognizer on where. Yeah, so I have a method here, which this is basically just pretty much copied from Google. That's a pretty good example from that. So to display a speech recognizer,
17:41
you just start a new intent, and you can specify your language model here, or I'm not an expert on those. I just use the standard ones. And then basically you start your intent and wait for the result. And I have the code for the result here.
18:03
So first of course you want to check if everything went okay. Did we get, was it also from the speech code? Then you can go in and get the result data here. So I just want to get the first word. I only allow my users or myself
18:23
to just speak one word for the menu. That is why you see a zero here, just get the first word, but of course you can get the whole sentence, and then you can try to react on that. The speech recognizer is pretty good. It's not perfect. Yeah, I think that's what I can manage to show you. All the code is on GitHub, and if you want to use it wherever you want, yeah.
18:43
Okay, so just the final conclusions, and then maybe just a few questions. Yeah, okay, if you want to debug, you can look at this slide later, but basically debugging on Android Wear is a bit different than normally.
19:01
You need to do it by USB, sorry, by Bluetooth. Conclusions, I think the APIs are pretty good, but, you know, it's subject to change. That is at least what it says in the documentation. Most of the Android standard stuff is available, alert dialog, buttons, et cetera, et cetera.
19:21
Some things, of course, doesn't work. Action bar, just to mention one. About the emulator, you can't trust it 100%. I found box in API level 21 of the round emulator. It didn't correctly render the stuff. This was removed. This works now in the API level 22 round emulator,
19:40
so use the newest emulator version, or use a real watch as well, of course, and yes, we do get a lot of chicken. Okay, thank you.