roman nurik: hello, and welcomeagain to "android design in action." i'm yourhost, roman nurik. adam koch: hey guys, myname's adam koch. nick butcher: and hi,i'm nick butcher. roman nurik: and today, we havea special episode, once
Android home screen, again, on home screen widgets. we're going to take a look ata couple of home screen widgets at the very end. a couple of home screenwidgets that we
think do a good job. but first, we're going to talkabout designing home screen widgets, how you should approachthem in general. we're going to talk about somedesign guidelines for widgets, and then talk about some of theconstraints, since as a designer, you may not be fullyaware of the different types of things you can and can't dowith home screen widgets. so with that, should wejust jump right in? adam koch: yeah, let's do it.
roman nurik: all right. ok, so what is a homescreen widget? well, according to thedesign guidelines-- the link down thereis at the bottom. so, "widgets are an essentialaspect of the home screen customization. you can imagine them asat-a-glance views of an app's most important data andfunctionality." i'd actually add latest data, as well here,since it's very important that
widgets are up to date. and it's "accessible right fromthe user's home screen. users can move widgets acrosstheir home screen panels, and, if supported, resize them." so that's another importantaspect is the customizability, the fact that you can basicallytake a widget, move it wherever you want and towhichever home screen you want, resize it to fit whatevericons are around it. and it's really thereto make it your own.
so that's a home screen widgetat a very high-level overview. the idea is that you basicallytake a part of your app and throw it onto the home screen. nick butcher: and i think-- just want to interject-- it'sone of the uniquely android features that i love tosee in an application. you can't get much more primereal estate than owning a small piece of the user'shome screen. this is where most of theiruser journeys are going to
start from. i know personally, on thebus, you're bored. you're just clicking aroundyour phone, seeing what's going on. i love to be able to seethe latest information. it's similar to the rules, whichalex went through last week, about notifications butwithout that kind of pressing time sensitivity or a personwaiting for it. it's the latest information thatthe user has opted in and
requested to be notified aboutis kind of brought and surfaced to the user. and it's such a greatopportunity. it's such a shame when anapplication with this kind of information doesn't takeadvantage, i think, of the home screen widget. roman nurik: and i'd saythat there are certain users that if they-- or actually, i guess if you adda home screen widget, it's
probably a pretty strong signalthat you're pretty passionate about the app. so some of your biggest powerusers will be the ones that use the home screen widget. not everybody will use it. not everybody decides to addit to their home screen. but the folks that do reallyprobably love your content. so let's move on. so there are a few typesof home screen widgets.
so if you look at thedesign guidelines, they'll talk about these. but they're roughly broken upinto three main categories-- information-type widget, likeweather, that shows you information at a glance. control widgets that let youmake changes to a certain app, or even the system,in this case. and collection widgets, whichbasically let you see collections of data scrollingvertically to see past items
or other items in the list. and then, of course, there's thehybrid type of widget that includes multiple items. and most widgets are probablygoing to be kind of hybrid widgets. they'll include aspects ofshowing information, also allowing you access to controlof the app, or potentially linking you into different partsof the app, which we'll talk about in a bit.
and so there are a couple thingsthat i think make a home screen widget reallygood, a couple of key important items. so the first is up-to-date. a home screen widgetshould be dynamic. it should never really be justshowing one piece of information from a weekago or two weeks ago. it should really be somethingthat the user would open up their home screen and expect tosee the latest and greatest
information. so for example, if you have, forsome reason, a widget that does traffic, then you shouldprobably show something that's very immediate, somethingthat's relevant to the next few hours. if you have a widget that'sshowing weather, also you want to show something that'skind of around now. you don't want to show weatherfrom yesterday or something like that.
as well as news articles orgmail or any sort of list or feed-type widget, you want tomake sure to basically update the widget as soon asthere's new data. so for example, in the case ofgmail, when you get a new email, there's a push messagethat's sent to the device that basically tells the gmailapplication that, hey, there's a new email. so along with updating thecached content for gmail, you should also make sure to triggeran update to the
widget so that the widget canshow that new information. and this is all possible. as a developer, you coulddo this, of course. but as a designer, you shouldplan for push updates to your widget as the informationcomes in. you can also specifya periodic refresh. and absolutely, most widgetsshould probably refresh automatically, unless there'ssome great reason not to. and generally, you don't want torefresh too often, like for
example, refreshing once aminute, or once every few minutes, even. that's pretty dangerous,because you may suck up battery life. and basically, you shouldprobably optimize around refreshes of no more frequentthan, say, once every half hour to an hour. that's probably the peak or theminimum refresh time for a widget without using toomuch battery life.
the other thing to note is thatthere's a lot of ways to tweak this, but youshould also be conscious of when you update. so do you actually want toupdate when the phone is sleeping, or do you wantto update only when the phone is awake? and those are things that as adeveloper, you can control. but as a designer, you shouldalso be aware of the different types of updates youcan do for widgets.
the other very important thingabout a widget is that it should be actionable. so it's one thing to justshow information. but generally, the informationyou show is a snippet, right? so you don't actuallyjust want to end the experience there. you want to somehow letthe user dive deeper. if they actually care aboutthe news story that you're showing, for example, in yourwidget, let them touch on that
story and jump into the detailsfor that so that they can read it. nick butcher: it could also belike a teaser, almost, think like a newspaper headline,right? so you want to be able to teasethese and entice them to click through to more details. roman nurik: absolutely. and another thing to point out--and nick, you'll talk about this later-- but it'simportant to note that widgets
can have differentlinkable regions. so make sure to be aware of whatare the different types of things a user would want todo from this widget, and tailor to those differentbehaviors. the other thing is that a widgetshould be very, very customizable. so again, the idea is thata user is granting their precious real estateto you, right? they're giving away part oftheir home screen to you, so
you should make sure to makeyour widget as customizable as you feel is fit in thesense that make sure that is resizable. one of the worst things is whena user finds a widget that can't be resized,or is too large. and then it's requestingtoo much of that precious real estate. so make sure that you designyour widget to scale to different sizes.
the other thing is that yougenerally want to show information that's customtailored to the user. so for example, if it's like areader-type thing or a feed consumption app, and the userhas a list of favorite feeds that you want to see,make sure to make that a default option. but let them, obviously,customize if they want to change things around. and then also note that thereis the option of a
configuration step. so after the user selects whichwidget to add, you have the option of providing kind ofan interstitial page where they can customize what shouldbe shown in the widget. so make sure to make useof that as well. so again, in the case of thefeed reader example, you want to give them the option tospecify which feeds they'd like to see in that widget. nick butcher: and that'sprobably preferable to having
multiple widgets, even thoughthe application can, rather than having 10, 15 differentwidgets or all the different feeds your application mightbe able to produce, it's preferable to probably havejust the one and a roman nurik: right. and so in past versions ofandroid, you weren't able to create resizable widgets. so one of the biggestworkarounds was, let's just create four different widgetsof four different sizes.
on newer versions of theplatform, you should hide away all those widgets. you should only reallyshow the single widget that is resizable. that's the best approach. so let's move on and talkabout the guidelines. nick, do you want tokick us off here? nick butcher: yeah, so speakingof sizing, the way that the widget system works isyou have a number of cells
on your home screen. so one cell is typicallythe size of an application shortcut. and so when you're designingyour widget, you want to be cognizant of when your usersplace the widget on the home screen, they're going toallocate it a number of cells. so hopefully, you're usinga resizable widget. what you would do is you'd setthe minimum number of cells which make sense for theinformation you're going to
present, and then let theuser resize it by the number of cells. so when you come to actuallydesigning that, you need to think about a few things. the first thing is that thesecells aren't really that deterministic. there's a slight amount offlexibility in the actual size, depending on the deviceimplementation. so the home screen is inlandscape or portrait, the
actual number of pixels may varyslightly, so you need to build a lot of flexibility intoyour widget, really, so it can cope with a little bitof change either way of the ideal boundary sizes. and also, it's worth bearing inmind that the actual pixel size and the way that we handlemargins has changed slightly in the newerversions of android. so previously, we used to leaveit up to the developer to include any paddinginside the bounds.
so we would just give them thecell and let them draw anywhere they liked within itand would hope that they would include sensible amountsof paddings. we decided to change that inandroid 4.0, primarily to help keep the home screens slightlymore aligned so that everyone was using similar [inaudible]of the same paddings so that everything was on anice, tight grid. so you need to beaware of that. so we've included here theformula which we used to
calculate the size of thecells in dp units. so bear these in mind whenyou're creating widgets. if you're targeting just 4.0 andabove, you might want to use one formula. if you want to target olderdevices, then you need to bear in mind how much paddingto allow for. roman nurik: one other thing iwanted to add is that this is a good guideline to followfor minimum sizes. but note that the widgetmay actually grow.
so for example, on a tablet,let's say, the home screen, if you rotate the device fromlandscape to portrait, the cells aren't actually stillperfectly square. they're actuallynever perfectly square, as far as i know. the idea is that in landscape,the cells are slightly wider. and in portrait, the cellsare slightly taller. so designing with this formulain mind will give you a good minimum size.
but note that it can grow andshrink based on different orientations, as well asdifferent devices. different devices have slightlydifferent cell sizes. but this is a verygood guideline. nick butcher: yeah, we'll getmore into the layout controls that you can actuallyuse in your app. but basically, yeah, bear thatin mind in thinking in terms of scaling layouts, and howthey're going to stretch and fill these differentlysized cells.
roman nurik: so let'smove on to the next slide around styling. nick butcher: yeah, so stylingis very important. i think we touched on it earlierwhen we were talking about you're occupying-- the user's giving you asmall amount of space on their home screen. so you really need to fit it inwith the rest of the home screen and the otherapps on there.
so for that reason, you reallywant to be fitting in with the rest of the platforms. and following the holo stylingguidelines is a great start to fit in with what other widgetsare going to look like on the home screen, as well as thestandard visual style of the app shortcuts and so on. we found that subtletransparency works really well here, because theuser has chosen their personal wallpaper.
and so to work nicely withthat and to go with their color scheme, we find thattransparency can work quite well there. it aligns, also, to thesystem widgets, how we do that as well. roman nurik: just one pointi wanted to point out. so a lot of these system widgetsactually have subtle transparency. it's not showing up wellhere in the slides.
but the idea is that in very,very small parts of the widget, you'll see alittle bit of the background peek through. and it kind of gives that extrafeeling of digital. it's a real object, but it'sactually something that's living in my digital world. nick butcher: yeah, exactly. and i think the users chosethe background on purpose. you feel a sense of ownershipwith that--
connection with that. and i think it reinforces thefact that you're on the user's home screen. they've chosen to give you thispiece of space as well, that you blend in well with it,literally, by using these design principles. and the last thing i wanted topull out here is that even though you are not in the fullapp mode, you want to be doing all the good practices, likeincluding pressed state or
inactive states for all yourelements, because they are still interactive elements,and they still need to respond to touch. roman nurik: the other thingabout pressed states is that since, again, you're on theuser's home screen, where generally the pressed statesare using a blue glow, for example, for icons, or fordifferent widgets, they're probably using that kind ofsemi-transparent blue overlay. you want to use a similarpressed state, if possible, if
it fits in with your theme. because again, we generally wantthe home screen to feel like a single, unifiedexperience. and as much as widgets can doto fall in place and just be cohesive with the rest of the launcher, that's very important. nick butcher: yeah, just as yourjob when you're building an app is to marry your brand'svisual style with the android visual style, this isall the more leaning towards
the default android visualstyle on the home screen, because you're going to beshoulder to shoulder with other players, as it were. adam koch: personally, if thestyling and the padding are off for a particular widget, i'mprobably going to remove it from my home screen. it just doesn't fit in with theflow of the home screen. so i think this slide and theprevious slide are very important to consider.
nick butcher: yeah, home screensare precious things. adam koch: very precious. yeah. nick butcher: there's wholecommunities of people just around sharing imagesof how they configure their home screen. people get very passionateabout this stuff, so [? we're being ?]very respectful. roman nurik: it's somethingyou see--
i don't know about afew hundred times a day, but you see-- adam koch: possibly 100 times. roman nurik: possibly, yeah,100 times a day. so you want to make it asbeautiful as possible. nick butcher: and then thenext step is a personal bugbear of mine, which isapplications which don't provide a preview image. so you can provide one previewimage for a widget.
and this is used not onlyin the tray here-- so when i'm going through andselecting a widget, i go into the widget tray and then longpress [inaudible] to pick it up and then place iton my home screen. but also, when i'm placing it,a slightly semi-transparent version will be-- i'll hold onto it and hover itto place it where i want on the home screen. so it's really important toinclude this visual image of
what the widget's goingto look like. when they're placed into thetray, you'll be aware that you have this landscape croppedrepresentation. so if you provide a very tallwidget, it's going to do a center-top crop. so if you look in this examplewe're showing here of the photo gallery widget, it'sshowing the top half, almost, of the preview image,which is fine. but just bear that in mindwhen you're designing the
asset, that it may bedisplayed as such. and then when i pick it up toplace it on the home screen, it will display the wholeimage in this kind of semi-transparent way. and also, when you're creatingthis, you want to be cognizant not to be leaking any personaldata or anything like that. you want to create these withtest data just when you're designing them. roman nurik: and one generaltechnique that i've used when
creating widgets isbasically take a screen shot of the widget. open it up in photoshop. and i'm guessing that as adesigner, you probably have some of the sourceassets, anyway. but drop in the source assetson top of your screen shot, line things up appropriately,and then just replace all the real data with dummy data. and then export that as a pngfile and drop it in as a
preview image. the other thing to note aboutpreview images is that you should try to avoid showing anyextra transparent pixels around the sides of the previewimage since the launcher will automaticallyapply padding and margins so that your preview imageisn't flush with the bounds of its cell. should we move on? nick butcher: yeah,absolutely.
nick butcher: and this isa few more guidelines. we touched briefly on theconfiguration, but this is an example of what itmight look like. so if you drop thegoogle play-- the library widget, which showsyou all your books and movies you've beenwatching lately-- you'll get this dialogue, whichwill pop up offering you if you want to personalize it,just one of the media sources. so some general guidelinesabout creating these
configuration steps is you wantto keep it very light. you do want to make itpersonalizable, but you don't want to be leading the userthrough five, six, seven deep series of steps. this is supposed to quitea light process to grab something and place itonto the home screen. so do keep that in mind. the other thing is we dorecommend to use a dialogue style here.
this is one of the very fewcases, i guess, where we recommend a dialogue, just tokeep the user in the context, that you are actually workingon something on the home screen, and you're not deep inthe app [inaudible] where they were coming from. moving on to the linking. [interposing voices] nick butcher: --go a littlebit deeper about linking through to content.
so as we talked about earlier,it's all about another avenue to expose your content. so you want to be having itemsof content-- so here, this email widget, individualemails. there might be individualnews stories. and they want to be deeplinks straight through to that content. this isn't just alauncher widget. they want to be able to havethe avenues go straight to
read more about it. but you also want to includeaccess points, other common points in your application theuser might want to get to. so typically, we see that asbeing the top level of the application. and quite often, you'll use yourapp icon in the top left [inaudible] pattern as a quick access to theroot of the application. so that means the user doesn'thave to have-- if you didn't
have this, you might have thosedeep links through to the emails, but then youmight also have to have an email shortcut. you want to remove that. the user's going allout and putting a widget on the home screen. they don't want to havea shortcut to the application as well. it's kind of one or the other.
so give them a way to get to thetop level of the app, as well as to come [inaudible], inthe email example, again, creating a new emailis an example here. and it might be taking a photoor whatever it might be. and just a little note there,mostly for those developers out there, really, is that ourrecommendations on navigation is that if you do deep linkinto the application, you should be synthesizing[inaudible]. roman nurik: all right, let'smove on to the lock screen,
one of my favorite parts ofthe widget framework. nick butcher: yes, so one ofthe new, shiny features in android 4.2 is the ability toplace widgets not only on the home screen but onthe lock screen. and talk about immediateinfo and control. you don't get much moreimmediate than that. this is like zero interactioninformation. you just have to turnthe phone on, and that's it, right?
you don't even haveto unlock it. so some things to be aware of isthat we allow slightly less personalization optionson the lock screen. widgets essentiallyrun in two sizes. so you can see on the slide herethere's an example of the calendar widget. so either you have the abilityto unlock-- so that could be the slide unlock or some kindof secure pin, in which case the widget is in a collapsedstate-- or it takes up the
whole screen. there's no in-between state. roman nurik: there's anotherthing to note on that is that you actually can have multiplewidgets on a lock screen. this is just an exampleof one. but as of android 4.2, youcan actually add more items to the left. or i believe they're actuallyall to the left. to the right, there'sthe camera.
but to the left, you canadd other items. so where the center widget,where the first thing you see when you unlock, or when youpress the power button, the first thing you seemay be the clock. if you swipe to theleft, you can actually add widgets there. and those will alwaysbe expanded. the other thing i want to-- nick butcher: you can see, ifyou look at the back screen
shot, the expanded calendarview, you can see there's an extra panel peekingin to the side. don't know if you can make thatout in the screenshot. but yeah, you can swipeacross the other ones. roman nurik: the other thingto note is that on tablets, there is no collapsed view. there is just expanded view. this is kind of the currentpresentation of things. these things may changein the future.
and certainly, i don't thinkwe have guidance on third-party devices or otheroems, how they would present lock screen widgets. there's certainly lotsof different options. but the core api, you shouldassume that there'll be a collapsed and expanded stateand in some cases, no collapsed state. nick butcher: and speaking ofthe current presentation right now, we darkened thewallpaper slightly.
i think it's about40% [inaudible]. roman nurik: somethinglike that. nick butcher: somethinglike that. i forget exactly. so all of the stock controls,like to actually go ahead and unlock the devices,are in monochrome white on top of that. and that contrasts well, becauseobviously, the user can control what the wallpaperis behind.
so yeah, using white as the maincolor in your design will work well here, because[inaudible] at the moment guaranteed to contrast. adam koch: one quick note on thedevelopment side is this is just really one extra xmlattribute that you need to add to make your widget compatiblewith both the home screen and the lock screen. but obviously, not all homescreen widgets should be placed or should be allowed tobe placed on the lock screen.
it really comes down to theapplication and the information you're tryingto display. roman nurik: yeah. and by the way, when you add alock screen widget, you do, again, have the optionof providing a you may want to ask the user,what are you comfortable showing on the lock screen? do you want to show all theinformation, or maybe just a snippet of information thatdoesn't include personal
information or contactinformation from other people? but definitely keep in mind thatthere's this extra place here where you potentiallyhave insecure access to the device. somebody can just walk by theuser's cubicle, see their phone, and if this is a badperson, they can take a look at the phone. if they don't know the pattern,they'll still be able to access the lockscreen widgets.
so if those have insecureinformation, that's a problem. nick butcher: so i'm probablynot going to put my bank account balance onto alock screen widget. but something like a to-do list,like one of my favorite to-do lists that i use lets medo a lock screen widget. so i'm shopping, i'm walkingaround the shops, i don't even have to unlock my device totick things off as i walk around the aisles, placethem in my basket. i can just literallyturn the screen on,
tick, tick, tick, done. it's great. roman nurik: awesome. nick butcher: ok. constraints. roman nurik: oh, actually,there's one more thing i wanted to mention. when you actually touch an itemon a lock screen widget-- like let's say you wereto touch, i guess,
this calendar item-- you'd actually be given theoption first to unlock. if you don't unlock the device,it'll actually just cancel that click. so keep in mind that what'son the widget is insecure. but once you touch on something,it will be secure. so constraints. should i talk aboutconstraints? so there are a coupleconstraints that you should
keep in mind when you'redesigning home screen widgets. the first is there isn't really support for custom fonts. so from a developer'sstandpoint, in your app, you can actually just specify a fontfile, a truetype file to use for a given view, like alabel or a piece of edit text or something like that. but on widgets, there's noreal way to do that. there is a hack.
you can obviously render thetext into a bitmap, into an image, and throw thatinto the widget. but that's just a really,really bad hack. it's very bad for performance,things like that. so just avoid customfonts, if possible. there's also no opportunityfor custom animations. this is something that a fewdesigners have asked me. what can i really do? can i make cool transitions--
when i press one thing,the widget rotates? unfortunately, the widgetframework right now is a little static. so if you touch on something inthe widget, you can update the widget. you can change the contents,show something expand or whatnot, but you won't be ableto animate it really well. so just kind of assume thatthere won't be animations. one thing to note is that ifyou're touching an item and
jumping into the full screenview, like deep linking into content, as of android 4.1,there is something called activity options where you canbasically create a zoom-up animation from the content. but that's basically the limitof the animation abilities you can do with widgets. actually, there's alsothe option of cross-fading between views. we'll talk about thatin a second.
also, there's no horizontalgesture support. so the main way you navigate thehome screen and the lock screen is you swipe left andright to change between your different screens. since that's a very importantgesture, we don't allow widgets to containviews that can horizontally scroll as well. so the only type of scrollingor flinging or anything like that you can do is vertical.
and to do that, you need to useone of the specific views, which we'll talk about. also, vertical scrollingis only available as of android 3.0. resizability, basically theability to long press on the widget and then get those nicelittle resize handles, is only in android 3.1. and then we added this optionto change the layout of your widget, based on itssize dynamically.
and so basically, after youresize, you can update the layout of the widget. and that was added in jellybean,android 4.1. so in earlier versions, you'rebasically stuck with your layout once you've placed it,and even after you resized it, until the next timeyou updated it. adam koch: i think wementioned this. lock screen widgetsare 4.2+ as well. so those are some ofthe constraints.
the other thing to keep in mindis that there are certain things you just can'tdo in widgets. for example, you can't playvideo in widgets. you can't play a gamein a widget. you can't draw arbitrarystuff into the widget. there are a few standard things that you can do, though. the common things, like textlabels and images and buttons, those work.
there's support for loadingspinners as well, progress bars as well. although, like we mentionedbefore, you don't want to update the widget very,very frequently. so it's not really feasible tohave a progress bar that updates as you're downloadingsomething, for example. so progress bars, you shouldprobably only use for percent watched, for example. if the widget is showing thelatest tv show episode that
i've seen, and i've seen 50%of it, maybe you can use a progress bar to show thati've seen 50% of it. but don't show something thatis supposed to update very, very frequently. you can also show anin-place carousel. basically, you have an imagein place in the widget, and then after a few seconds,it kind of fades out into another image. you can do somethinglike that.
a good example of that is thenews and weather widget that comes by default with nexus4, things like that. and that's an alternative toa collection widget that basically lets you scrollup and down. and then you can add someclocks in there if you really want. also for scrollable elements,you can have list views. and by list view, i don't meanspecifically, basically, a view containing a list item ora piece of text followed by
another piece of text. your list items themselves,the items you show in this list view, can befairly complex. you can do lots of differentthings in them. so don't treat thisas a list view. think of it more as a basic kindof collection view that can list items or differentpresentations. nick butcher: the email andcalendar examples, i guess we showed briefly earlier, are goodexamples of that, where
you can show quite a lot ofdifferent [inaudible] content in that list view and havea user click through it. roman nurik: and also, youcould have grid views. so for example, the bookmarkswidget lets you see a two-column view of bookmarks. so that's another example. and you can actually replicatethat using a list view as well. and then finally, stack view,which we'll show an
example of in a bit. and then most of thelayout types-- as a designer, you may not beaware of the different types-- but there are things likerelative layout, where things are arranged relative to oneanother; linear layout, where things are arranged linearly;and frame layout, and things like that. all those main onesare supported. so you have a lot of options interms of where things are
placed within the widget. so that's one of the more openparts of the widget system. so those are the supportedui elements. let's actually then, just jumpinto examples, since i think we're probably runninga little low on time. adam koch: yeah. all right. so we had some screenshots,but we thought, hey, we've actually got a deviceconnected.
why don't we actually demothese widgets live. so we added just a few widgetsthat we like to the home screen of this device. first of all, we've gotsome news widgets. there's the new york timesand the bbc news widgets. they're both resizable widgets, both vertically scrolling. so here you can see thenew york times. we've got a list of differentnews articles, some headline
text, some summary text, and animage, in most cases here on the right. nick butcher: should wedemo resizing it? adam koch: sorry? nick butcher: you want to showhow the resizing works? adam koch: yeah, you just pickup the widget and drop it. and then you can very easilyresize it right there. and then the bbc news widget-- actually, what i might do isflip this guy over here so you
can see a bit better. this is quite a nicewidget, as well. and when you expand it outthere, it actually grows the columns quite nicely here. roman nurik: this is probablya grid view, right? i'm guessing that'sa grid view. nick butcher: so that'sa great example. this is coming [inaudible]as a grid view. but you want your widget todynamically resize, based on
if i give it more horizontalreal estate, then you might change the representation ofthe story, like going into multiple rows of a grid. or you might show a moredetailed headline or something along those lines. you want your widget toreact and make the most of that space. adam koch: yeah, i reallylike these widgets. quite nice for news widgets.
and i think both of them, whenyou add them, you get to configure which category ofnews that you want to actually show here. so you can show technology newson your home screen if that's what's interestingto you. or you can show top newsin these cases. so that's some news widgets. this is the google play mylibrary widget, which is quite nice because--
actually, how much roomdo we have here? roman nurik: yeah,that's fine. adam koch: if you see that asyou resize it and let go of the resizing handles, it re-laysitself out, i guess you would say. and it's quite nice, because itfits dynamically into all sorts of different sizes here. so you can have a small one ifthat's what you want to use on your home screen.
you can have it be awider widget here. and it shows the various itemsfrom your play library. nick butcher: it's one of myfavorite widgets, actually. i think it's a great exampleof what roman was talking about earlier about havingreally current, really up-to-date information. so if you have a lot of yourinformation in place, if you play music and booksand everything-- and movies-- then it willupdate, so it's very easy to
get back to what youwere last doing. so if i'm reading a book on myphone on my commute home, and i get home, i can just pick upmy tablet, and the widget's updated to show that that bookis the most prominent thing in and i can just click it to getstraight back to where i was, which is a brilliantuse of it, i think. adam koch: yeah, it'squite nice. over here, we've got somemiscellaneous widgets. i've got the songkick widgethere, which shows your plans--
upcoming concerts thatyou have planned. i've got the google+ widget. roman nurik: and the google+widget, it's not a collection widget, but it lets you flipbetween different items using a button on screen. so you just press this buttonand flip through the different items. and i generally prefer thecollection-type widget, but this is definitely another wayto focus on a single item and
actively have the userswitch between them. adam koch: down at the bottom,it's the play music widget. uh oh. what's going on here? roman nurik: whichone is that? adam koch: that's thecurrents widget. roman nurik: oh, so currentsis probably stuck loading something. adam koch: it's stuckloading something.
roman nurik: oh well. adam koch: it's a collectionswidget, again. it's actually similar to thisyoutube widget here, where you can flip between thedifferent cards. roman nurik: and that'san example of a stack view widget. so it's another type ofcollection, but it's just presented in a different way. adam koch: yeah, the currentsone is quite nice.
nick butcher: and you canactually set the stack view to auto advance, whichis kind of fun. so if you have something likeyoutube, where it's probably telling you about the latestvideos added to a playlist, you can leave it there on thehome screen, and it'll actually rotate through andhighlight that content, which is kind of cool. roman nurik: yeah, it'sa good way to present passive content.
so not like emails, for example,that are obviously very important to the user,but featured items or recommended items that theuser may find enjoyable. adam koch: and then finally,we've got a collection of clock widgets. and actually, the one in thecenter there is dashclock widget, built by romannurik, himself. and it's also open source aswell, so it's actually a good one for developers anddesigners to go look
at how it was built. roman nurik: and the way thesework, i actually just want to point out, is that thisis an analog clock. an analog clock, actually,you can customize. as a designer, you can tweakthe hour hand, the minute hand, and basically, the systemjust rotates those png files to make it right. and then here, there's somethingcalled a text clock that basically, you just giveit what part of the time you
want to show, andit shows that. and you can customize thedifferent topography aspects, like font weight and thingslike that, as well as colors, and so on. adam koch: and you can seehere, as you resize the dashclock widget, it goes intoa sort of summary view. and as you expand it, itjumps back out again. so that's it for someof the demos, right? adam koch: shouldwe jump back?
do we have any-- roman nurik: i thinkthat was it. so all right, that was-- nick butcher: there's one morething, which i've seen a couple of applications do, islike we were saying earlier, a home screen widget is prime,prime real estate on the user's home screen. and the fact that they've putyou on the home screen means they're probably quite engagedwith your product.
so i think it's actually anopportunity to use them quite intelligently. so yes, you can highlight thenewest, latest information. but one interesting example i'veseen is a shopping app where if you've abandoned theshopping cart, it has a widget showing you the latest offersor whatever it is targeted to the user. but it will actually insert alittle item at the top saying, why don't you finishyour journey?
and so, and so forth. so remember that they're smallversions of your app, almost, not just a way to highlightyour interesting content. so think about interesting waysthat you can use your home screen widgets. also, we should probablymention there's some categories. if you're building an app in acertain category, you pretty much have to build a widget,or else your users will
comment, like, where'syour widget? a couple of examples, if you'rebuilding a sports app, you should probably have ascores widget for your league or for whatever informationyou have. if you're buildinga music, app-- adam koch: yeah, a musicapp, gotta have one. roman nurik: --absolutelyhave transport controls. so yeah, definitelybuild a widget. well, with that, thanksfor joining.
a couple of announcementsbefore we sign off. so as we mentioned a few weeksago on the show, the "android design in action" show and the"app clinic" show, we're actually starting to integratea little better. so when we do a topic ontuesday, the folks over in mountain view, california, willbe doing the same topic, the same general categoryon friday. so tune in this friday to "theapp clinic" to check out their thoughts on homescreen widgets.
all right, with that, i'myour host, roman nurik.
adam koch: see you guys. adam koch. nick butcher: bye fromnick butcher. see you guys next week.
