chris banes: hi,i'm chris, and i work at the developerrelations team at google. how would you like toimprove the look of your app using the new materialstyler in android l? i'm going to show you how to dothis, along with my banesy top
Android TV logo, tips. but first, here'san introduction to the new materialdesign principles. they've been created towork across all devices,
from android to the web. and they're our comprehensiveguide for the visual, motion, and interaction design for apps. now, to go on this journey,we need a sample app. we'll be using xyzreader, which you may remember from the show,android design action. now this app alreadyutilizes some of things which you associatewith a good android app. things like brandingfor color on the action
bar, responsive touch feedback,the use of standard type sizes, prominent use of imagery,both on the list, and the detail uis. now, our goal is tomake it look like this. so let's get started. now, the first stepis to change its theme to inherit from one ofthe new material themes available in android l.there are equivalent material themes for the majorityof the holo themes
which your apps are using. our sample app usesdarkactionbar as its base theme, so here we willcreate a new styles xml file in the values v21folder, redefining our existing theme.bacon themeto inherit from the material version of thedarkactionbar theme. and after we've donethat, we'll have something that looks like this. now, there are a number ofthings you may notice here.
the action bar is nowmore colorful by default, and this ties inwith the encouraged use of color in your uis. clickable items now receivethe new infill touch feedback. and overall, themetrics have changed, as space is nowtreated differently. so we haven't yet customizedthe material theme, so let's go ahead and addour branding color back into the app.
but before we do that, let'stake a step back, and see what we need to dowith holo to achieve this color customization. here is a small sectionof our styles file. we're only customizingthe action bar, and you can already see that themain theme is pretty complex. if you also start customizingany of the standard widgets-- such as button or anytext, your styles file can easily becomehundreds of lines long.
now, there are obviousdownsides to this. the fact that it's hardto maintain and update, but you also needto bundle colorized drawables in yourapp, such as these, which adds unnecessary bloat. now luckily, there are toolssuch as action bar style generator, andandroid holo colors, which can make this pretty easy. but wouldn't it be niceif it could do this
without having to putso much work into it? now, the good news is thatthe new theming functionality in android l allowsyou to accomplish this without needing to bundle thosedrawables or style definitions. this new functionality allowsyou to declare your color scheme in your main style. and this is done by setting newattributes, the most important two being colorprimaryand colorprimarydark. colorprimary is yourapp's main branding color,
and is used by the app bar,scrolling edge effects, and other built-in widgets. colorprimarydark, asthe name suggests, is a darker variantof colorprimary, and is used to colorthe contextual action bar, amongst other things. so back to our sampleapp, our styles file becomes the following,with colorprimary and colorprimarydarkset to two colors
from resources-- baconand crispy bacon. and after that, our sampleapp looks like this. you can see that theaction bar and edge effects have changed color tofit our color scheme. male speaker: banesy's top tip. [bang] chris banes: internally,a lot of this is allowed for the newdrawable tinting functionality. this is a greatnew feature, which
allows you to easily recolordrawables at run time. here's a drawable defined xml,which specifies a red tint, using another drawableas the source. there's also the settintmethod on drawable, to achieve the same thing. now, the next step is to lookat the layout of the app. the material designprinciples introduce a new way to think about thespace in your app, using baseline grids andkeylines to promote consistency
across the system as a whole. a level down fromthat, we will now also provide detailedguides about space, padding, and overall metrics. the most commonly usedcontainers and elements, things such as lists,grids, and buttons. now it's important to notethat for the most part, these metrics are notprovided by the framework, meaning that youneed to implement
them yourselves in your layouts. we also now have a setof standard type styles and scales. each one of thesehas been chosen to balance content density withreading comfort for the user. combined with thenew roboto font, used in android l-- whichis rounder and wider-- these styles should give yourtext content greater clarity. so back to our sample app.
we're going to convert ourlist into a grid, which will allow our imageryto be more prominent and add quick visualcomprehension. to do that, we're going totake the grid container guide, and apply it toour list of meats. each containerguide tends to have a number of differentvariants, to allow flexibility for the type of contentyou're trying to show. here, we are going to usethe two long variants.
there are other variants inthe grid component guide, which differ on thenumber lines of text or graphics each item displays. so let's look more indepth at the guide. each item displaysa square image, along with two lines oftext, which can either overlay the image, or be inline. it specifies the typeof fonts and sizes, along with your four divspacing for all items.
in this variant, we havetwo options for text sizes. you have a 16 sp for the firstline, and 12 for the second, or 14 sp for both. now, which one you use dependson the relative importance of your text. and after doing that, thisis what it will look like. each item is issued apass for the increased size of the imagery, and we'veminimized the amount of text which needs to be displayed.
now obviously, we have onlygone through one screen here, and most apps willhave more than this. you will need to readthrough the design guide, applying all of the appropriatelayout guides to your app's ui. chris banes: you are going tobe using the standard keylines a lot in your apps, so insteadof hard coding the values in your layouts, make sureyou are declaring them in your dimension resources. here are three toget you started,
but there are many morewhich can be added here. and now we move on to imagery. now, imagery is one of the keyprinciples in the new design language. it should be used to showrelevance, convey information, and generally delight the user. now, for thissection, we're going to focus on the detailscreen of the app. the current layoutought to use imagery
of its full bleed banner image. but we're goingto improve things by making it more immersive. the way we'regoing to do that is by using the translucentstatus bar functionality, which was added in android kitkat. now, doing this allows us tomake the app bar translucent when the content is scrolledall the way to the top. and this allows theimagery to bleed
into the outer [inaudible]. we then bring the appbar back into view when the image and titlehave scrolled out of view. now, this techniqueis not reliant on any new functionalityin android l, so you can use iton past versions. and indeed, many apps ingoogle play already do this, you may have seen it inthe google play music app. we have also brought thetitle and subtitle into view,
or move them out of the image,and into their own contrasting layout, again, usingthe app's primary color to emphasize our brand. and finally, thebody text has been tweaked to matchthe body topographic style from the design guide. so finally, here'sour end result again. as a quick recap, ourbranding color is now used throughout theapp, both of the screens
are using the new basegrids and keylines, and we have emphasized ourimagery on the detail ui chris banes: areyou wondering how to implement a fade-in actionbar with translucent status bar? well, roman nurik posted agreat android developers protip on exactly this recently. as part of that, he wrotethe drawinsetsframelayout, which makes it really easy.
you can grab the codefrom his github gist. but the fun doesn'tstop there, so to help your appreach the sky, here are some more things wehave added for this release. activity scenetransitions, which allows you to use thescene and transitions api when you're transitioningfrom activity to activity. recyclerview is our nextgeneration adaptive view, intended to replacelistview and gridview.
recyclerview hasbeen designed so that the logic for layingout items is pluggable, meaning that you now havecomplete control over how your items are laid out. android has gone 3d, withelevation and translation z. so as well as being to moveviews in the x- and y-axis, you can now move in the z-axis. and this allows your viewsto come away from the screen, casting a real time shadowto create depth to uis.
and finally, floatingaction buttons are a new type of buttonwhich are reserved
for your most important actions. they're recognizableas a circular icon which floats above your ui. so thanks for watching, nowshow us what you can do.
