Android Design in Action: Device Automation and Touch Feedback

Uploaded by androiddevelopers on 04.12.2012


ROMAN NURIK: Hello and welcome again to
Android Design in Action.
My name is Roman Nurik.
ADAM KOCH: Hey, guys.
Adam Koch.
Nick [? Coche. ?]
ROMAN NURIK: And today we have way too much content.
So we're just going to get started.
Today's episode is on the device automation apps.
The app that we'll be looking at today is called Tasker.
And then we'll also go into a deep dive on touch feedback.
And then we have a good amount of design
use to cover as well.
So let's just get started.
So if we can look at the slides, Jeff.
I can't really see if we're looking there.
But I guess we are.
So this is, on the left side, the Tasker app.
Now Tasker is basically a device automation app.
In the app clinic, they kind of use the term profile,
device profile apps.
This is kind of I guess a subset of that.
Basically it lets you create a system of constraints or
contexts and create a set of actions or tasks.
I guess tasks are collections of actions in this app that
get run when the device enters that kind of
profile, that context.
So, for example, if the week day is Monday through Friday
and the time of day is between 9:00 AM and 5:00 PM, you can
be thought as in the work profile or in
the work set of contexts.
And then so once you enter that context, rather enter
that profile-- there's a lot of terminology in this app.
It's somewhat confusing.
But it's very well thought out.
When you enter the context, certain things can happen.
When you leave that context or profile,
other things can happen.
So there's an Enter and Exit action.
So that's at a very high level what the app does.
It lets you had to do a number of different things from
setting system settings automatically, to speaking out
text, to doing all sorts of interesting things.
And then of course, the number of different profiles or
different constraints that they have is also very large.
So you can really, really customize the set of
behaviors you want.
So this is the app.
As you can see here, there's kind of these three tabs--
profiles, tasks, and scenes.
I'm not really going to talk about scenes that much.
Because I honestly didn't really get a feel
for what they were.
But profiles and tasks are two of the most
important things here.
So here we have a single profile,
which is my work profile.
And on the left, you see the different contexts that need
to be satisfied to be in this profile.
And then on the right hand side, you see basically the
actions that occur when you enter or exit.
In this case, there's only an enter action.
So when you exit this profile, when you leave work basically,
nothing will happen.
There won't be an unmute or anything.
NICK: And it's set to unleash a panda as soon
as you get to work.
I couldn't really find a better icon for muting.
Unfortunately, the built an icons didn't really have a
really obvious mute icon.
So I just chose a panda.
Because they're cute and cuddly.
ROMAN NURIK: And basically here there's
some standard stuff.
There's these actions in the bottom that let you add
things, add a profile in this case, accept and cancel
changes, turn Tasker on and off as a whole.
And then to edit things on the screen, there is a lot of long
pressing going on, which if you look through our
guidelines on gestures you should really reserve long
press for other things.
But there's a lot of complex interactions and a lot of
stuff going on on this screen.
So that's why we chose to think of a kind of a
re-imagining of what it could look like.
Before I jump into the redesign,
Nick, Adam, any thoughts?
NICK: Yeah.
This app's been on my radar for quite some time.
I think they won one of the early Android developer
And I think the features you described are super powerful.
But I've always been put off.
Whenever I get to the place, to a listing, and you see
their screenshots, it's very intimidating looking.
Like I have no idea what all the different controls refer
to and the plethora of options it seems to offer up.
So I was pretty excited that we got to take a look at this
application and try and make all that power perhaps a
little easier to tap into.
ROMAN NURIK: Yeah, absolutely.
We'll just move on.
So let's look at the redesign.
So this is the re-imagining of the Tasker home screen.
So on the right hand side--
I'm just going to zoom in here so you can see.
On the right hand side here, we have Tasker.
And obviously we've refitted it with--
Saying refitted sounds like exhibits--
what's that kind of car refitting show that he had?
NICK: "Pimp My Ride."
ROMAN NURIK: "Pimp My Ride." It sounds like pimping rides
or anything.
But whatever.
So we've refitted it with--
NICK: Is like a plasma screen TV is going to
[? fall down the side. ?]
We've done a plasma screen TV.
We should really fly through this.
Because we have way too much content.
Anyway so we've fitted it with the standard
action bar and tab bar.
We've basically taken their core tab bar that they've had
in the previous screen here.
And we've made it look more hollow obviously.
We feel these tabs are probably fine.
Separating out the app into these three core sections is
probably OK.
It's really up to the app to decide what their information
architecture is.
But we left it as it.
And we've moved the on, off switch for the entire app to
the top right as a key action.
In this case, some could argue that you shouldn't have
actions in both the top right and in the split action bar.
But in this case, it's really kind of like a global--
it's not really an action.
It's really like a toggle, like a high level toggle for
the entire app.
So we felt that it was appropriate there.
And then in the content of the screen, you see your profiles.
But here you can't really edit the profiles.
And this is one of the things that I found that was a little
confusing with the current app is that viewing the list of
profiles and editing an individual profile is all in
one screen.
It'd almost be like seeing a list of contacts and editing
each contact all in one.
It's almost like a spreadsheet.
And it just felt overbearing.
So we decided to split this screen up into two screens,
where on one screen you see the list of profiles.
And you can obviously turn them on or off, which is a
simple action that you can take.
But then to edit the profile, you touch once to
get into the details.
And we'll show you that.
So here you see the list of contexts.
This is called my mute at work profile.
And there's the list of contexts or constraints that
need to be fulfilled.
And then when you enter, it mutes.
And when you leave, it unmutes.
And then here is an example of a profile that's turned off.
For example, send, I'm coming home, as a text message.
And we've decided to turn that off.
And there's no exit action.
There's only a single enter action there.
And then you could add a profile using the standard
action bar action there.
And then there's another feature inside of the menu,
deep in there somewhere, which was Search Tasker, which--
I don't exactly know what it did.
But it was just kind of like a global search through the app.
We decided to expose that as an action in the bottom left.
Before we move on, any comments?
Should we fly through, keep going?
Let's keep going.
So in the same exact screen that you saw in the beginning,
you see this kind of both viewing a list of profiles and
editing the profile screen.
This is the editing portion that we broke up into a
separate screen, where here you see the profile itself,
the enter and exit actions that you can
select using a spinner.
And then there's a little shortcut here to edit each of
these tasks.
And again, a task is a collection of actions which
we'll see a bit.
And then to add a context or add a constraint, you simply
would press this in line Add button.
And of course, you could put this in the
action bar if you want.
But this is just an assortment of different types of ways you
can expose this.
And then to remove something, you just swipe to dismiss it.
And there are probably other actions you can take on each
individual context.
For example, editing should just be a one touch thing.
But if you want to duplicate it or clone it or something,
maybe that can be exposed through an overflow
And obviously if you want to delete multiple things, you
should allow for multiple selection using contextual
action bar.
The next screen--
this is an example of selecting a task.
So when you exit this mute at work profile, here are the
list of things you could do.
You can say oh, there's no exit task.
Or you can browse all tasks and manage tasks where you can
select one of the existing ones that you have there.
Pretty straightforward, nothing fancy there.

On the next screen, this is basically where you are
editing a task.
And you can see here, there are a lot of objects that you
deal with in this app.
And so one of the core points overall with this redesign is
to simplify things, to make it very obvious what you're
working with.
And so here you're working with a list of
actions for a task.
And previously you were working with a list of
contexts for a profile.
So you want to make it very, very clear throughout every
step in the process what the types of data you are working
with is and where in the structure it is.
So here is another example of how you can kind of use swipe
to dismiss and a simple Add Action here at the top to
replace a bunch of buttons that are on screen for
deleting and adding and things like that.
And actually here you'll notice that there's no real
way to delete something.
You have to long press to delete.
It seems kind of like extra work to have to do that.

I think there's probably one or two more.
This is the place where you can kind of rename a task.
So if you jump into the task details, you should be able to
edit everything.
And one of the ways you could do that is to have an inline
text field with the name.
So you just start changing the name right there and then.
Or if you don't think that that's going to be a very
common thing, you could move it into the action overflow as
kind of a rename additional action bar.
And I think the last screenshot I want to show here
is adding an action.
This is one of the more important parts.
So actually this is adding an action, not a context.
So when you add an action, like when I am at work for
example mute the phone or speak some text or whatever,
airplane mode or whatever.
To do that in the current app if you have to kind of go into
a browse mode where you see this overwhelmingly large set
of things you can do.
And it's kind of hard to really find the thing you're
looking for.
And I think in this case, you're generally more in
search mode rather than browse mode.
So I think that it would be a better case here to basically
have an auto complete.
So if I'm in the list of actions to take, I just start
typing volume or mute or something.
And it gives me a pre-populated auto completed
list of things that I can do.
And as soon as I touch, it just adds it.
And if there's configuration stuff, then it just shows the
configuration stuff.
So I think that was it.
I know that was super fast.
We went through that in 12 minutes.
Anything else you guys want to say before we move on from the
screen redesigns?
NICK: I really like the way it feels a lot cleaner now.
I think generally dialogues just aren't the answer.
The previous app popped up a lot of dialogues, which kept a
lot of contexts and a lot of load of the user to kind of
remember where they are.
And I feel like the new setup with the before and after-- it
just feels a lot easier to use for me.
And this app in general is just really complicated.
It does a lot of things.
And so I think breaking the different functions into
different screens really, really helps the user navigate
through these different sections.
And really in this case it's simplifying.
And actually there's a lot of cases in the past where we've
combined the multiple screens into one.
And I think that this app can do well by splitting things up
more since it's so complex.
Before we jump to the touch feedback session, I just want
to briefly talk about some iconography, well actually I
guess branding.
And actually it's really just branding,
this umbrella of branding.
This is the current icon on the left.
And here's kind of what it could look like matching the
redesigned theme.
So the redesigned theme is kind of a blue and orange
color scheme.
And so here's what it could look like
with that color scheme.
And this better fits some of the other app icons that are
out there just purely in terms of styling, not so much in
iconography which is kind of the most important thing to be
memorable is, what is in the icon?
But to make it feel a little more modern and up to par with
some of the other apps that are out there.
And then the last thing I want to mention is the lack of a
feature graphic.
You cannot be featured, absolutely cannot be featured.
The editorial team for Google Play will do nothing with your
app in terms of promotion unless you
have a feature graphic.
So make sure that you add one.
And this is just one example of what a feature graphic
could look like for Tasker.
It could be as simple as just having your name and the icon
there, maybe a tag line or something.
But make sure that it's also legible and clearly delivers
the message at small sizes.
Because this feature graphic can appear in very, very small
sizes on phones and other devices.
NICK: Yeah.
Just to expand on that just a little bit.
Like Roman says, this one, same, large asset--
it's like 1024 pixels wide when you supply it.
And so people get tempted to cram all kinds of
information in there.
But really, really resist that.
Because it can be shown very, very small.
If you think about a small handset, kind of three inches
diagonally handset, it's going to be shrunken down greatly.
So my advice to people is always to get
your feature graphic.
And resize it down to about 100 pixels wide.
And check that everything's kind of legible and still
looks good at that kind of size.
And the other tip is that if you are lucky enough to get
featured, the graphic can be shown in the Play store on the
front page without much context.
So I always find it's helpful to have your feature graphic
convey some of the meaning of what the
application actually does.
Because they're going to see it on its own without the
benefit of the title and the description text and the
So really have it kind of stand alone.
And it could appear without the icon and
appear without the title.
So absolutely.
That it can appear standalone is a very, very important
point for future graphics.
NICK: And resist putting screenshots in there.
Because they don't size very well.
And also [INAUDIBLE]
[? put a device ?] frame in it.
It just has the ability to look dated very quickly.
So try and resist that.
ROMAN NURIK: Absolutely.
All right.
Shall we move on to touch feedback?
ROMAN NURIK: All right.
Adam, you want to drive?
ADAM KOCH: Yeah, sure.
So we wanted to discuss a little
bit about touch feedback.
We actually look at a lot of different
applications in our role.
And surprisingly, one of the things we see broken in a lot
of them is touch feedback, which is strange.
Because it really does give the user a sense of
responsiveness and indicate that something's happening
within the application.
And the amount of effort required to actually add good
touch feedback in your application is
actually not that much.
So it's definitely something with lower amounts of effort
that has great pay off.
And of course the canonical source for information on
touch feedback is the design site.
So if you just go on to style, there's a section
called touch feedback.

We'll cover this on the next page.
There's a bunch of states here and some more information on
some recommendations of how you should actually style the
different states for touch feedback.
But we have some tips I think on the next screen.
So the first thing to remember is all interactive elements
should provide feedback.
Not some of them-- every single one should provide some
sort of feedback.
ROMAN NURIK: They say if it does something, it should look
like it does something when you press it.
ADAM KOCH: Exactly.
And another point to make is you should be consistent.
So we often see people customizing touch feedback for
parts of the application.
But then they don't go and customize, say, the action bar
touch feedback.
So you have sort of the holo blue in the action bar.
But you have a completely different color scheme for the
rest of your application.
ROMAN NURIK: And one that one thing that can help with that
is the Android holo colors website, which basically
generates all that for developers, as well as the
action bar style generator, which again does all that for
Combining that will really help you get sort of 99%
through your application, being consistent there.
We'll touch on this again in a second.
But you should really ensure that the full touchable target
area has feedback, so not just the portion of it.
If it's touchable elsewhere, it should really have feedback
across the entire item.
As we mentioned, customized ad feedback for custom components
and whatnot.
And also, don't forget about the multi select mode and
contextual action bar.
Those are really important modes.
And you should really make sure that there's touch
indicators when you're in the multi select mode.
So we've got some examples.
And we can discuss some of these points on
the next slide here.

ROMAN NURIK: It'll load.
And there it is.
So this is just some of the system apps to start with.
We've got Google+ on the left, YouTube in the middle, and the
system gallery on the right.
So one area I see a lot of people leaving out touch
feedback is when they're fully customizing a list view.
So you've got this long scrolling list of items.
And they've really customized it.
So in the case of Google+, they've got these
sort of nice cards.
YouTube-- it's almost like a card-like interface.
But it's sort of rich items showing the YouTube thumbnail.
And very frequently, we'll see people forget to add the
different states to these kinds of list views.
So there's two, sort of, different types here that
these apps have taken.
In the Google+ app, for example, they've sort of
covered the entire item in a sort of blue highlight, a holo
blue highlight.
I quite like that.
That's kind of like an overlay.
And in development terms, it's basically the draw selector on
top attribute on list views and grid views.
ADAM KOCH: Correct.
And in the YouTube app, they've gone and sort of shown
the overlay, a sort of [INAUDIBLE] overlay.
They've gone and showed it underneath the
main thumbnail there.
So it's another approach you can take.
It's really up to you which one to choose.
Personally, I like the Google+ method a little bit more.
But when you've got rich graphics in your list view, it
really comes down to how you want to display it here.
And then the third screen shot shows the gallery.
And it's got the contextual action bar activated.
And you can see, again, it's got the touch feedback there.
So that when you select each of these, it shows a nice sort
of blue holo overlay.
ROMAN NURIK: And actually you get a lot of this for free
using on Android 4.0, well, on ICS and above, you get this
for free with, I think, the selectable
item background attribute.
So if you use that throughout, you don't even have to custom
create all these assets, these blue assets.
It just comes with the system, with the framework.
So it's really, really useful to just use that, to
just drop it in.
Android, colon, background equals this.
Or Android, colon, foreground equals the selectable item
background thing.
And you get a lot of it for free.
ADAM KOCH: Correct.
NICK: It's also included in the support library, right?
That's awesome.
That's great.
I guess it's with [INAUDIBLE] as well.
Like a standard list view-- if you use the standard list
items, it will have touch feedback for you.
But it's only when you really customize these
things that it may not.
Because you're building the layouts from scratch.

NICK: Yeah.
So I think the key thing is here is if you're customizing
you're providing your own button drawables and stuff
like that, make sure you include all the
custom states as well.
And it's a selector drawable or a stateless drawable.
ROMAN NURIK: So here you have XML along with your PNG's that
indicate which PNG file, which nine patch, or whatever should
be used with each state.
NICK: And while you're in there creating your kind of
press states, remember to also include the
focus states as well.
Because devices with trap falls and Google TV's and so
on will really, really benefit from those states.
So while you're at it, do the right thing.
ADAM KOCH: Yes, correct.
And as I mentioned, on the design side it has some
examples of how you should color and style those
particular different states.

NICK: Well just use [? Andrew Holoco's ?].
So here's an example of a third party app, the Ted
application, which we like to use as an
example here on the show.
There's three different screens here now.
It's kind of hard to see in the first screen.
But there's a grey highlight actually on the top left part
of the action bar as well as on the tabs.
I kind of double tapped here just so we could fit it into
one screenshot.
ROMAN NURIK: You just contorted your hand in there.
It was kind of hard to take a screenshot at the same time.
But they've got a sort of light grey highlight here when
the user touches down.
And then if you look at these other screenshots next to it,
you'll see for other items, including the action items in
the action bar--
ROMAN NURIK: So we should move it into view.
ADAM KOCH: Yeah, sure.
Let's move it here.
They've got a red highlight.
So they've got two different highlights.
And they kind of use them for different items across the
So places, I guess, where they are already using the sort of
trademark Ted red color, they'll
use the grey highlight.
And other places, they'll use the red highlight.
So for example, in this button here, which says, listen to
this talk, they've got the red highlight again.
And this comes back to that point we were talking about
where you should really highlight the
entire touchable area.
So you'll see here that the whole red highlight is
covering the entire line.
Because you can touch anywhere across that entire line.
So the first time you touch it, you'll probably touch
around the icon or the text.
But then when you see that the rest of that row responds in
red, your brain will internalize the fact that this
whole thing is a single object that you can interact with.
So it really helps make that association.
And I think we should move on.
Because we're low on time.
ADAM KOCH: And then finally two other types of touch
feedback worth mentioning-- there's boundaries and
So if you look here at the left screenshot, it's kind of
hard to see.
If you get the slides after the show, you'll be able to
see it a bit easier.
But this is showing the edge resistance, when you swipe
down and there's nothing more above the current list.
So you've got this sort of blue glow showing here at the
top left in Google Play.
NICK: It's like a force field you just run up against.
It starts glowing.
ROMAN NURIK: It's dissipating energy as its kinetic energy
is turning into light basically.
For developers out there, this is the edge effect.
And edge effect compat classes that let you do
this on custom views.
ADAM KOCH: And of course, using standard views, you get
all of this for free.
It is worth remembering how it looks and how it behaves.
Because you don't want to have, say, blue colors at the
top there that might be clashing with it.
NICK: But it's quite interesting that if you use an
app when you can see that they've implemented their own
kind of horizontal paging [? we're often ?] using, so
another view page component.
And it doesn't give you that feedback when
you've reached the edge.
It just kind of feels off, right?
ADAM KOCH: Mmm hm.
ADAM KOCH: Definitely.
ROMAN NURIK: For sure.
ADAM KOCH: And then in the second screenshot, it's the
Gallery application.
And when you swipe to the edge here, it kind of has a 3D
effect where all of the different thumbnails kind of
tilt to the side, again showing resistance.
So this is more of a custom implementation, I guess.
So you can definitely implement something custom.
It's really up to you.
Personally, I like the blue glow, as we've
been talking about.
But depending on the feel of your application, the gallery
is very much of a 3D sort of feel of an application.
So that's what's it's sort of appropriate here.
And Launcher has something kind of similar as well.
But the whole thing tilts.
And then finally, I just wanted to
quickly mention this.
And this is fairly advanced.
I can't imagine that many app developers doing this.
But there's this concept of communication,
so for touch gestures.
So in this example, Gmail-- you've got the sort of swipe
to delete or swipe to archive.
As you swipe, you'll notice the actual item starts to fade
out slowly as you move across more.
And if you slide back again without actually completing
the swipe, it'll fade back in again.
So this is just sort of hinting to the user that this
item's going to go away as you swipe it off the screen.
So, again, this is pretty custom and
probably more advanced.
But definitely something to think about if you have these
advanced gestures.
All right.
We'd better keep moving.
We've got five minutes left.
ROMAN NURIK: All right.
So let's fly through Android design news.
ROMAN NURIK: We have like six or seven items.
But let's start with the redesigns of the
map by Taylor Ling and Sam Nolte from holo there.
Really awesome work.
Sam even basically did a multi pane UI.
He did a whole bunch of different screens.
And Taylor also kind of had his own take on this app.
And you'll notice that actually there are some
There are some very obvious ways to map an older app to
the newer holo style.
And this is just one example of minor variations of that.
And I think that they're both really good jobs there.
Let's fly through to actually Uhani, in
response to their redesigns.
He also did a post on the [? ?] map.
And basically he gave some anecdotal feedback, actually
some real feedback, I guess, with some real data on how
when you release an app that is using older, kind of
gingerbread, even eclair, donut styling, for newer
devices, meaning now if you released that sort of app now,
users are going to respond very negatively towards that.
So be careful while doing that if you're
thinking about doing that.
NICK: Just don't do that.
ROMAN NURIK: Just don't.
ADAM KOCH: It's a easier way, yeah.
ROMAN NURIK: And then one of the folks that submitted an
entry for the stencil giveaway a few weeks ago, Gen Gal--
he did a couple UI mock-ups for the Dribble app or for
what Dribble could look like on Android.
It's pretty cool.
Nick, you want to add anything about this?
NICK: Just that I want this.
I saw your comment, just want, exclamation point.
I feel the same way.
NICK: Says it all, right?
Next up we just released yesterday the new version of
the Maps API for Android.
This is V2 of the API.
It requires Google Play services.
And that's all you need really.
There's no separate bundle or anything.
It's really just part of Google Play services.
And this is basically if you want to get vector tiles and
3D building facades and all of this cool new 3D maps stuff in
your app, you should definitely switch over to this
from the original map view.
And this also works with fragments and support library
fragments as well.
So you get a lot of the benefits.
Basically everybody's asking for this.
And finally we're able to--
NICK: So for designers, I guess the key takeaway is you
can now have maps kind of throughout the application.
Developers have complained and said, oh, that's
really hard to do.
That's no longer the case, as well as having some pretty
advanced features as well, so having custom overlays and
different shapes and boundary boxes and so on and so forth.
This really, really allows lots of really, really cool
interactions with maps.
I'm really excited about the different angles and panning
and tilting that you can do.
I think that's going to work really nicely with some of the
apps that are out there.
ROMAN NURIK: And remember, you can design
custom marker icons.
So the marker icons don't have to look like the teardrop
shape or a little circle shape.

It could use your branding if you want.
It could be custom shape or whatnot.
So lots of options there.
And there's this new website,, which
basically has a list, a collection, of different
custom views and different UI widgets and things.
And this is kind of similar to the ultimate Android library,
which is more broadly scoped.
It covers libraries that are for image caching and all
sorts of stuff.
But this is very specific to UI widgets.
And it's a very nice presentation of the different
UI elements you can use in your app.
NICK: It's very pretty.
But I'm not sure about that icon.
It's like a steaming Android.
That's exactly what it looks like, a steaming Android.
He's very angry.
He's very angry.
ROMAN NURIK: And, Nick, you want to talk
about Marie's post?
NICK: Yeah.
So basically Marie is a regular viewer and active
designer in the community is trying to get the community of
Android designers to kind of coalescence and speak to each
other a bit more.
I certainly resonate with this kind of idea.
I think when we were doing the design competition, there was
a ton of activity going on on Google+ especially where
people posting on the hash Android
design and the hashtag.
And that was really cool.
I'd really like to see that continue.
So Marie is trying to get everyone together.
So if you find this QR code and comment on her thread,
she's trying to put together a circle of developer designer
working with Android.
So comment on the post.
And we'll try and share that around, so everyone can kind
of connect to each other and start talking
about Android design.
ROMAN NURIK: All right.
So we're at 11 o'clock.
Let's fly through the last couple of things.
I recently did a blog post on designing for tablets.
So if you're designing for tablets, which means hopefully
everybody that's watching, check out this blog post.
It will link you to things that you may not have seen
before, definitely kind of a good resource for designing
for tablets and even developing for tablets.
And lastly, we recently put out a developer survey.
So if you're an Android developer and you haven't
filled out the survey and you are thinking, I really wish
that the Google Android team could do this, this, or this,
fill out the survey and let us know.
Thank you.
And I think that's it for stuff for this week.
As always, I am Roman Nurik.
ADAM KOCH: Adam Koch.
NICK: Bye.
Nick Coche.
ADAM KOCH: Thanks, guys.
ROMAN NURIK: See you guys.
ADAM KOCH: See you later.
See you next time.
Peace out.