web app user interface design
>>roman nurik: all right. we are good. i thinkwe are ready to go. thank you everyone for coming to our session, android design forui developers. today we are going to talk about how to implement some of those awesomepatterns that we have documented on developer.android.com/design. my name is roman nurik. i'm on the androiddeveloper relations team. >>nick butcher: hi, my name is nick butcher,also on the android developer relations team. we focus on ux and design to help you guysbuild awesome applications. some of you might know us from android design in action, ourweekly youtube show every tuesday on youtube where we talk about how to design awesomeandroid applications. so today's going to be slightly different. we will be focusingmuch more on the code. this is a developer
conference. we will talk about building thecool applications not just design them. >>roman nurik: we will cover three main themestoday. first is app navigation where we will talk about some of the newer patterns as wellas some of the existing navigation patterns that are out there. then nick will talk.>>nick butcher: i'm going to tell you all about responsive design. what it is, why youshould care and how you can go about building it in your apps.>>roman nurik: if you pay attention, if you guys are on your laptops, if you pay attentionto a single section of this session, please listen to nick. so whenever he talks, listento him. >>nick butcher: no pressure.>>roman nurik: i will finish off with a discussion
of the holo visual language specifically howto implement some of the visual characteristics that are a part of holo style and theme. sofirst let's talk about app navigation, shall we? so anytime we talk about navigation youthink about a couple of different ways to navigate. so one of those important ways islateral navigation. basically the way this which you switch between sibling elementsor kind of members of a single collection or a top-level sections in the app. so theaction bar, as probably many of you know, is one mechanism or one tool that gives youaccess to lateral navigation. so you can use things like tabs or a spinner in the actionbar to provide kind of access to sibling sections. we're not going to talk about how to implementthe action bar. we have a good training class
on developer.android.com/training that talksabout how to do this. implementing effective navigation. implementing lateral navigation.please take a look, it's really awesome. we do want to talk about compatibility for theaction bar. so as many of you know, the action bar is not available on versions of platformbelow api 11. but we have been working on something called actionbarcompat will giveyou access to the action bar and all versions 2.1 and above. the native apis here, you haveactivity, fragment activity, get action bar. the apis for action bar compat will be similar.the overall structure of the code doesn't change. you swap different imports, swap indifferent names for classes and things and you're done. so this is not available rightnow, i should mention. this is still something
that we're working on. it's going to be availablevery soon. if you're using the i/o app right now. it is using the action bar compat library.it is coming sooner rather than later. like i said, it will be available on android 2.1and above. you will be able to use it on those versions which is basically all devices outthere. and a very important note here is that if you are already using actionbarsherlock,there's a phenomenal library by jake wharton. you shouldn't feel like you should switchover to this version of the compatibility library. this is a phenomenal library. it'sgoing to be very similar in terms of apis and so actionbarcompat we recommend for newapps. if you are creating a new app, consider actionbarcompat. basically what this means,if you are thinking about the action bar,
not using it because of compatibility, youno longer have that excuse. >>nick butcher: no excuses now. just use it.>>roman nurik: exactly. another component is viewpager. we talk about lateral navigation.we also think about swiping left and right or the swipe views pattern. now, viewpageris kind of the conical implementation of that pattern. it's covered very well in our trainingclasses so we're not going to go into too much detail there. the reason i mention ithere, we should really be using it if you are using any sort of horizontal paging orbuilt this kind of conical implementation. >>nick butcher: whenever you see tabs, thinkswipe. >>roman nurik: exactly. we do want to covera new pattern that was just formalized yesterday
in an update to the android design guide callednavigation drawers. so navigation drawers are for main navigation. if you have disparatesections in your app, navigation drawers is another tool you have for navigation. i'mnot going to talk about all the guidelines here. all the documentation is published.if you click on the navigation drawer section, you will see all that stuff. i will say that-- as many of you saw in the google play music part of the keynote, the navigation drawerhas a slightly different style than you'd expect. it doesn't slide the content out ofthe way. the action bar stays fixed. not sliding the content out of the way is one way to furtherindicate that this is really a piece of the app's chrome. it's a piece of chrome likethe action bar that sits atop of your content.
so the content is stable there. the otherthing that this does is it helps preserve the horizontal gesture space. so if your contentinvolves things like swiping to dismiss and things like that, it's still very compatiblewith this pattern. >>nick butcher: in contrast to what you weresaying about action bar, if you are using some of the other community libraries outthere, you might consider moving to this official library because this implements all of ourbest practices and ux that we recommend you use. so really do consider that.>>roman nurik: exactly. i want to show you a quick video of what this looks like. theactivity content, you press on the left, bezel, it peaks for a bit. you can interact withit, of course. then you can also kind of swipe
to hide it. you can also touch on the actionbar's top left area to show and hide it as well. so there are a lot of kind of uniquelittle things about this, this pattern, and we're going to talk about how to implementthis pattern using some of the new features in the support library just released yesterday.so to implement a navigation drawer, the very first thing you do is in your activity contentyou replace the top level layer with a drawerlayout. it works on api 4 and above. which is basicallyevery device out there. this drawerlayout contains two children -- should contain twochildren. the first is the actual activity content. so everything that you had in youractivity before. and then the second child of the drawerlayout should be the actual drawerthat slides out and that's usually going to
be something like a listview or a gridviewor something. generally a listview. now, you can set the width of this to fix that widthto whatever you want. we recommend somewhere between 240dp and 320dp of width. you canvary that, of course, by device if you find on larger screen devices you want a slightlylarger drawer. now, that gets you -- just doing that getsyou all the edge swipe stuff. it does a lot of things for you. but another important partof the drawer is how it interacts with the action bar. so for that we have another componentthat's part of the support library r13 called actionbardrawertoggle. that's basically kindof a helper method or helper class that ties the action bar with the drawer. so you simplycreate a new -- substantiate the actionbardrawertoggle.
give it the activity. give it the drawer layoutitself. you give it the icon to show on the top left because that icon is custom for navigationdrawers and then you basically set this action bar drawer toggle instance as the drawerlistenerfor the drawerlayout. now, one quick note about the icon. it's available for download.we have both holo light and holo dark variations and all the densities available for download.you should customize this. changing the colors and such, make sure you customize this tofit in with the theme. one other important -- i guess, very important part of the actionbar drawer toggle is that you need to pass through the onoptionsitemselected method fromyour activity. this takes care of actually handling button presses on the action bar'stop left area. basically it just handles the
android.r.id.home click. that's basicallyit for navigation drawers. that's really all the main code that you need. it's really easyto do. you guys should absolutely start using it if it makes sense for your app. again,this is all available in the support library r13 which was pushed yesterday.so one last note, i guess, on navigation is up navigation. so we had a talk -- full talkdedicated to up and back navigation last year from adam powell and rich fulcher last year.this year we wanted to give you tips and tricks for up. the first thing to do to implementup is tell the action bar to show the up button. you can do that by using this method here.now, jelly bean, as of android 4.1, you can automatically -- or the system will automaticallyhandle up presses for you. you simply give
a parent activity name for each of your activitiesand the system will take care of taking you to the right place when you press up. forearlier versions of the platform, you can use this meta data element to supply thatsame value. that's worth noting that in a lot of cases you have to customize where yougo when the user presses up. rather than handling all the up stuff yourself, simply overridethese two methods. you override the getparentactivityintent method to tell the platform which activityto visit when you press up. you can also customize what happens by providing extras that youwould then handle in that activity. then you can also override the oncreatenavigateuptaskstackmethod to basically customize what happens when you are navigating up outside of yourcore task. so this happens, for example, if
you get to your app from something like gmail.pressing up should stay within your app. this let's you customize what happens there. you'llsee that it still mirrors the overall structure of your app, how you got to that activity.so i think that's it for navigation. i'm going to go off and hand things to nick to talkabout responsive design. >>nick butcher: thanks, roman. part of thejoy and strength of the android is the variety of devices. small phones, big phones, tablets,everything in between. as developers that can perhaps seem daunting to make sure yourui is going to look great on those different sized devices. so luckily android has beenbuilt from the very beginning to deal with this kind of difference sized devices. soit has lots of greats tricks in there. relativelayout
and layout weights and so forth will helpto you build a scalable ui. i hope that you are using all these things already. the problemwith this is that scaling your ui up and down is only going to get you so far. i will outlineissues you may run into if you are relying on scaling techniques and how you can betterwork around them. so one of the challenges you might encounterif you are scaling is something like this where you have excessively wide layout. herewe are running text and images to the entire width of the device and it produces quitean uncomfortable reading experience which is hard to scan. ideally, aim for line lengthof 45 to 75 characters. anything longer is going to feel very uncomfortable and not easyto use. we don't have great tooling for automatically
detecting line lengths. but you can use themulti-config editor which will help you to get an idea and visually inspect what yourlayouts is going to look like on a variety of different devices. one hint that you mightlook for that you run into in this issue is whenever you find yourself typing this, likelayout_width="match_parent", stop and think how is this going to scale up to larger devices?is this going to lead to this excessively long line length issue? another challengeto run into is something like this, where you end up with a very unbalanced kind ofui. so here in this example application. we can see all of the content is kind of, like,clustered together tightly into the top left-hand corner leaving a huge space around. you canencounter this behavior if you are using a
list-driven application. and you end up withthis huge amount of white space on the other side on larger devices. what you really wantto ideally go for is a more balanced look. you want to be able to step back and squintat your application and have an overall balance distribution of your content. a missed opportunityis the last one. when your app is running on a larger device, you want to take advantagethat you have this extra room, extra space. put your content first, really enjoy it. here'san example of an application which is perhaps showing a lot of imagery. the images comeout very small and you can't see them very well. such a shame that you are not actuallyreacting to the amount of space available on the device and showing them off.so those are some of the challenges you might
get into in scaling approaches. here are strategies.the first strategy is combination. this is where you have more space available to youon a device. you combine different content. on a phone or smaller device, you have twolayouts which you combine together when you have sufficient room. building this kind oflayout is easier if you are already embracing fragments. fragments have been pretty wellcovered. i will not take you through them. they are building blocks to reduce your appdown to so it makes it easier to define individual blocks and lay them out differently. you onlyhave to code them once and then move them around.to build this kind of master detail, you can use this trick alternate layouts. all of thoseactivities includes a single fragment filling
up the whole screen. on larger devices, weoverride that same activity and include both fragments at once. i'm using the layout-wresource qualifier. devices that have 600dps of width, pick up this configuration instead.easier than writing all that, is using this template. use this code to create a masterdetail flow. work through the wizard. give it to your objects. it will generate the activity.it is getting much easier to create this kind of layout.>>roman nurik: it's worth noting this isn't currently available in android studio, torwould be able to tell us. it is not available but it is something we are going to work onto get it in there. this is an important tool. >>nick butcher: and another tool for buildingthese combination approaches is another custom
layout that has just launched in r13 of thesupport library, just went out yesterday. that's a slidingpanelayout. the slidingpanelayoutthat you use to build these two-column views. you see this is my master; this is my detailedpane. if there's enough room it, will lay them out next to each other. if there isn't,like the case on the right, it will overlap so one is on top of each other. sliding thefinger across will reveal them, the master pane again, and you can click or slide backto go to overlapping view. it is worth calling out differences to how this is different thanthe drawlayout. these two panes really are in the same plane. so unlike the navigationdraw where chrome comes across the top, these are content panes. they move together so youcan think of them as being very tightly connected.
>>roman nurik: to summarize it is to say thatdrawer layout is for primary app navigation. really kind of chrome versus content. thisis all about content. this is effectively a tool to take master detail flows and simplifythem across different orientations and tablets. >>nick butcher: awesome. to implement thisslidingpanelayout, you define it as root layout and give it two children. the first childis going to form that master or left-hand pane and the second child is going to be thecontent pane. so you define a layout width for each of those and if the sum of thosetwo widths exceeds the amount of space available on the device, they will overlap and you havethis sliding behavior. if the device has enough room, it will show them side by side. youcan also set a layout weight of one on the
content pane which means it will expand tofill the extra space like when it is shown on its own. you can really think of the contentpane's layout_width as the minimum size. this is an easy way to build a responsive layout.so that was it for combination-type strategies. the next strategy to go on to is what we callmacro reflow. the idea of this reflow is to rearrange the major blocks of your content.so here is an example where we can see when shown on a larger device in landscape we reflowit down to rearrange the content blocks to avoid those problems of having really excessiveline lanes or unbalanced content. here you can see by using fragments, we just definedthe content once and very simply just using a different layout, just specifies an orientation.when it is landscape, they will be stacked
next to each other. when they are in portrait,they will be stacked on top of each other. really simple but makes a huge difference.so the next strategy to know is what we are calling micro reflow. so rather than takingthese major blocks and moving them around, it is actually going to look at the individualblocks and change representation depending on how much space they have to layout. sothis kind of micro reflow makes huge use of what we call dimension files. hopefully alot of you are using these already. i want to stress it in case anyone isn't. this approachmakes huge use of dimension files, so i hope a lot of you are using these. just like inyour layouts, i hope none of you are hard coding strings into your layouts. the sameis true for your layout configurations and
your sizing and dimensions and so forth. youreally want to be putting all of those things into a dimensions file or a style for tworeasons. firstly, it let's you reuse these same dimensions across different screens throughoutyour app so you can have consistent margins and consistent text sizing throughout yourapplication. and secondly, it let's you override them and provide alternative sizes and dimensionson different sized devices. in this example we've defined standard dimensions for textsizes and margins and line spacing, for example. define them in this dimensions file and usethem throughout the application's' different screens. and then on a larger device, youcan provide different sizes so it's really simple to use the same layout but bump upthe text sizing and other margin sizes or
line spacing to get a better experience ona larger device. >>roman nurik: this helps recompose your screenson larger devices to rebalance. when you step away and you squint and you look at the screen,you kind of see everything smooshed to the top left. this type of approach will reallyhelp rebalance things. it's very, very important to use this technique especially for tabletuis. >>nick butcher: one point to especially callout here. in this example, i'm using the sw or smallest width qualifier. what this doesis looks at smallest width of the device which is the width in portrait. it just uses that.so it's an orientation agnostic qualifier. the reason i've chosen to use this here issome of these dimensions, you don't want them
altered just because you rotated a device.it can jarring to change text size when you rotate your device as it will re-layout soalso chaninging text size could cause confusion. using something like sw, orientation agnosticqualifier, you can keep dimensions stable while some dimensions will change.so some examples of doing this kind of micro reflow is margin point. sometimes you can'tuse combination or reflow to move around or show more content on the screeb but you stillwant to avoid unbalanced or excessively long line lengths. instead, you can simply introducepage margins. so a technique for doing this is setting a style onto your content containerhere called marginpoint. we will use that style to provide the layout width of the contentcontainer. on a smaller device, the style
is going to say match the parent here. it'sgoing to grow up until you reach max much size you want the content to reach, here we'reusing 600dps. when it reaches that size, it will clamp and never continue to grow anylarger. also by setting a layout gravity of center, it will put the content in the centerand have these margin points so you don't get this excessively wide or unbalanced feel.>>roman nurik: two quick points. the w600dp modifier, qualifier, if you will, so it'simportant to note that that is the width of the screen and not the width of the content.so if your content has extra padding or margins or such, make sure to account for that whenyou are doing the math to determine the switching point. another point i wanted to make is thatthis might not work for every scenario. it's
perfectly okay in some cases to use dialogson tablets and full screen activities on phones, phone size uis. the way to do that is to usethe theme.holo.dialogwhenlarge theme. customize that using a similar resource qualifier basedapproach. >>nick butcher: so the last point to giveyou on doing this kind of micro reflow approach is switching from lists to grids. so as imentioned before, listviews can feel unbalanced when they grow to larger devices. it's goingto be great to switch over to a grid representation that you have content that works for it. somethingthat has a consistent height or has a very visual kind of graphic which you can include,this can work really, really well. so to build this kind of approach, instead of using alistview, you simply use a gridview in the
layout. you then use an integer resource forthe number of columns attribute. you can then define the number of columns it will showbased on the size of the device. by default, going into single column which will give youthe listview representation. on larger devices, step up to two or more columns. you simplyneed to respect that change in your adapter. so in your adapter, you can query that verysame integer resource and find out how many columns the gridview wants to use and inflatea different layout for the individual item so it can be a list style item in a singlecolumn or grid style layout in multiple column view.>>roman nurik: gridview and listview are very similar in terms of api. they both inherit-- they both sub class the abslistview class.
so switching between listview and gridviewon different cases, that's also possible as well. so definitely feel free to do that inyour apps. >>nick butcher: cool. those are some of thechallenges you might encounter with a scalable approach and how responsive design can helpto you get around them. and one point i wanted to make, in all of those kind of strategieswe just talked through, never once did we talk about a phone layout and tablet layout.each of them was based upon the content; it took a content-first approach.so by defining your content on, you know, these switching points, instead of thinkingin like strict device terms you kind of future proof yourself a little bit. who knows whateversize and shape or orientation aspect ratio
device is going to come around the corner,and you want your application to be able to cope with them. by putting you content firstand thinking about your content to size it, whatever device comes along we'll just pickthe most appropriate one that's going to work for it.so now i'll hand it back to roman to give you pro-tips on implementing the holo visuallanguage. >>roman nurik: so holo visual language, thatmeans a couple of different things. just for some really quick exposition or i guess background,i guess, back in android 3.0, honeycomb, we redesigned or rethought the ui for androidand that kind of manifested in this holo visual language.and there are two major tenets that i can
think of right now about the holo visual languagethat are important to note as we go through the process of implementing it.the first is a refocus on content versus chrome, so we want to spend as many of the pixelsas we have available to us on content rather than showing boxes and borders and thingslike the chrome. it's kind of like a refocus on showing theinformation rather than the machinery behind it that makes everything work.the second tenet, i guess it's a sub-tenet of the first one, is really a focus on spaceand typography to communicate hierarchy rather than things like borders and boxes and soon. so as we go through this process, keep thatin mind because that's kind of what influences
some of these decisions.so the very first thing you need to do to implement holo, use the holo visual languagein your app, is to inherit the theme.holo theme or one of its descendents.so one thing to note is this is only available on api 11 and higher, android 3.0 and higher,so one thing you can do to mitigate that is to have this kind of switching behavior forthe base theme. you can inherit theme.holo.light, for example, on api 11 or higher and thenjust theme.light, which is available everywhere in other versions of the platform.>>nick butcher: this trick of actually having a base, like a level of indirection betweenthe inherited theme from the base theme, which has like a different switching point is reallyhandy because some of the platform behaviors
which you want to take advantage of may havebeen introduced in different api levels and using this base theme behavior lets you insertthem into your hierarchy. it's really handy. >>roman nurik: we use this a lot in the i/oapp which will be open sourced at some point very soon so you can see how we make use ofthis. i do want to mention that when we releasethe actionbarcompat library it will handle a lot of this stuff for you for your activitiestheme or your applications theme. simply you would inherit theme.appcompat.light,but the file name might change. rather than switch on this you can just inherit on this.this is again coming soon. so once you've inherited the theme.holo theme-- we should figure out a better way to say
that. once you've inherited that theme it'stime to use some of the resources that the framework gives you for free. and one of thefavorite things that you like to say, nick, is lean on the framework. use what it givesyou for free so you don't have to reimplement all of this stuff from scratch.>>nick butcher: there's nothing worse than trying to imitate the way the stock ui looksbecause you might overlook a slight detail. you can actually just reuse the same stylesthat we used to build it and then you will get the exact same consistent behavior.i think i stole that saying from rich fulcher! >>roman nurik: exactly. so one thing you willnotice is that in the next couple of screens, next couple of slides, we're going to be usingthis question mark android colon syntax, and
that is basically a theme attribute reference.we're basically accessing something that is stored in the theme, whether it be a dimensionfile, like the listpreferreditemheightsmall, which is the standard item height for a smalllist item, or a style resource for like loading spinners. so for example, to create a largeloading spinner or indeterminate -- indeterminate progress view, you simply create a progressbar and set its style to the question mark android progress bar style large attributes,theme attribute. and then if you want to use drawables, forexample, we have built in drawables into all the themes so you can use the listchoiceindicatorsingledrawable as, for example, the drawabletop attribute in a textview or drawableleft orsuch.
so really you get a lot of stuff for free.i definitely advise you guys to take a look at the docs for the android.r.attr java class,i guess. it contains a whole bunch of these you can use in your apps.so i want to talk a little bit about that space and typography stuff. the first is space.take a look at this screen. so i think there's kind of a fundamental problemwith this screen in that it's lacking visual hierarchy, visual structure.there's kind of just floating elements out in this massive space that don't really haveany sort of hierarchy. so one way in which we can fix this is to introduce dividers.so these dividers are basically just that, they divide different sections of the screen.it's really kind of using the minimal amount
of pixels possible to introduce hierarchyrather than using boxes and borders and things. to implement these dividers it's fairly simple.you simply set the show dividers attribute on a linear layout to middle to draw thesedividers in between the different children of the linear layout, and then you providethe drawable to draw in that space. and as you can see here we provide -- thesystem provides a standard drawable for that space.it's also, you know, worth noting that in addition to using dividers to introduce hierarchyyou should still be using the standard 16 dp margins and the standard 48 dp visual rhythmthat we talk about in the design guide, and that will really help establish a structureand kind of like a rhythm to your screens.
so another thing i wanted to talk about withdividers is divider padding. so if you provide the divider padding attribute here, it's eightdp's, it will actually draw some space above and below or to the left and right of thedivider, and this really helps introduce further hierarchy.so in this case imagine that we didn't set the divider padding on the dividers betweenthe text and the delete icon. it would just look like a table. it would just look likea grid of things and it wouldn't be clear what the real hierarchy was. but as soon aswe introduce the padding you can immediately see that these are a set of list items andwithin each list item there are two separate touch targets.so going along with this theme of refocusing
on content rather than chrome, we want to,you know, also do that for buttons. we don't want to keep drawing borders and boxes aroundbuttons because we can do that in a different way.so this borderless button style, which is very commonly used with dividers, it reallyhelps kind of simplify your ui. it really helps focus on the content over the chrome.so one thing to note is that it is borderless so you do need dividers to set its kind ofboundaries, but when you touch the button, you -- it does light up to indicate that thisis the touch region. this is the thing you're acting on.so to use them you simply create an image button or a button and you set its style tothe borderlessbuttonstyle theme attribute.
this gives it to you all for free.another type of -- another variation on borderless buttons is a button bar, so if at the bottomof a dialogue or bottom of a screen you have two actions, you can use this button bar styleon your linear layout and it will automatically create the dividers and apply the weightscorrectly. actually, it doesn't apply the weights. nevermind. so it automatically adds these dividers, andwhen using button bars, make sure that you do the order of the buttons correctly. thepreferred button should always be on the right, so save versus discard or delete versus cancel.even if it's a negative action, like delete, the preferred item should really be on theright. it's very important as of android 4.0
and above.so use that button bar style and then each of the buttons in that -- i've been sayingthe word button way too much. >>nick butcher: it's lost all meaning.>>roman nurik: yes. each of those buttons needs the buttonbarbuttonstyle to apply -- somebodyneeds to count how many times i just said the word button. it's like 20.anyway, it's very straightforward. again, this is very little code. you're not reallydoing much. you're just setting styles. >>nick butcher: lean on the framework, leanon the framework. >>roman nurik: yes, take it away. again, ithas that touch highlight. another thing to think about is how do youprovide this touch feedback on things that
aren't buttons, things that may have kindof layout or a view hierarchy within them. reto touched on this in his session earlythis morning. i'm not going to cover it in detail, but really using selectableitembackground,which is a drawable, it resolves to a drawable, using that as the foreground or backgroundon a view is really kind of a great way to do that.also, if you're using a list you can use the list selector attribute to provide the rightdrawable to use there. >>nick butcher: i can't stress how importantthis touch feedback really is. as you kind of pare back on the crutches andthe chrome, you need to communicate to the user what is interactive and what does something.anything that is interactive really needs
to react visually react whenever you touchit. so using things like this can really communicate that.it also will communicate the bounds which you can interact with. so as you use the borderlessbuttons, without using the bounding boxes, touching it will highlight the entire interactivebounds so the next time the user comes back to the element they have already this modelof where they can interact and where they can't.>>roman nurik: exactly. so another important visual element in the holo visual languageis list headings. so list headings are basically the things that separate different groupsof list items, and they should really be 14sp, bold, all caps, just like action bar tabs,for example, and they should have a 2 dp separator
below them.so you don't really have to figure all this stuff out, you can actually just use a listseparatortextviewstyle,set that on the textview and you automatically get the styling.if you do end up customizing this with your brand's accent colors, then by all means usethose values. this is kind of a great tool to use for releasing, i guess, the space tothe list, the content itself in the list. so we've been talking about space a lot. iwant to take a brief moment to talk about typography, which is incredibly importantin the holo visual language, so as of android 4.1 we've given you this really robust typographicpalette, i guess, for use in your apps. so you can use new weights and variance of robototo really help to communicate structure.
rather than using text sizes to communicatestructure and hierarchy, using weights is kind of a nice way to do that.so a couple of quick notes don't use thin for really small text. it's best for largeheadings. also, light is best for headings as well.and condensed can work really well for like news article headings.light does work well in body text, but you do need to be aware of kind of the minimumsizes that you should be using. >>nick butcher: as a rule you probably wantto be sticking to regular or light on slightly larger type sizes and reserve thin and maybelarger light for things you want to stand out essentially by having larger size, butlighter type looks really, really good.
>>roman nurik: so quick note, this is android4.1 and above. if you want to use this in earlier versions of the platform you can downloadthese fonts at google fonts and you can import them into your project.one last quick note, another important part of the holo visual language is again thatfull-bleed images using as much space as you can dedicated to content.one of the things you run into sometimes is not all photos come in the same aspect ratioso what you can do is you can use an image view. you can use an image view with a consistentaspect ratio and drop in an image, set the scale type on the image view to center cropto actually make sure that the image fits nicely in the image view and doesn't kindof mess with your layout.
so one thing to note here is that this doesend up cropping things in some cases. you know, that's really good for -- it's finefor things like bacon photos or meat or like landscapes. not so good for like photos ofpeople where their eyes may be cut off. it's kind of creepy.so definitely the center crop technique is very good for making sure that your uis staynicely aligned and fit. when using these full-bleed images, it's bestto kind of introduce separators between them. very light separators, maybe one dp or so,to really make sure that colors of different images don't bleed into each other.so before -- that was a lot of stuff to cover and obviously there's a lot more. we can'tcover everything, but the last thing i want
to cover is producing holo assets.so, you know, as we showed, you can use xml and some minor styling stuff to really providea lot of the assets for your apps; however, you do end up still needing things like iconsand -- and png files and so on, and there are three really good tools for that.the first is the android asset studio which will generate icons for action bars and notificationicons. it will apply the right sizing, coloring and opacity and so on.the second is the action bar style generator that assuming your theming your app with yourbrand's accent colors, which you should be doing, you simply drop in those accent colorsinto this tool and it will generate automatically all the different assets that you need forthe action bar, tab indicators, as well as
the selectable item background stuff. it willautomatically create these kind of like accented, pressed and focused states.>>nick butcher: and the right hierarchy so you just drop into your project. super simple.>>roman nurik: right. and lastly there's the android holo colors tool, which does the sameexact thing for like check boxes and buttons and things like that.now, i really want to mention that jeff and jerome who wrote these two tools are in thedeveloper sandbox, so if you have bugs to report, go harass them.they're really awesome guys. if you want a demo, a live demo of what this looks like,definitely check them out. >>nick butcher: they're great tools. justuse them.
>>roman nurik: there are no bugs remarkably.i think that's it for our talk. thank you once again for coming.i want to do a quick shoutout that we can't take questions right now, but nick and i bothwill be in the android platform office hours where we'll be able to take questions.i also want to mention that we have an android design in action live design lab. what isit, tomorrow at 2:00 p.m.? so if you want to come and learn how to design an app fromscratch without using computer tools, we're just going to be sketching and wire framing,definitely go check it out at 2:00 p.m. tomorrow. >>nick butcher: and for those of you remotewatching on the live stream and so forth, then we're actually quite active on google+,so follow us on google+ or join the android
designers community. the developers communityis also good. and join in the conversation on the hash tag #adia and the #androiddesigntag. and tune in to android design in action every week.thanks very much. [ applause ]
Tidak ada komentar:
Posting Komentar