What’s New in Android Design Tools – New Features for Rapid UI Development (Google I/O ’17)

[MUSIC PLAYING] JOHN HOFORD: Hi. I’m John Hoford, and
this is Nicolas Roard. We both work on
ConstraintLayout, and the Android
Studio Design surface. Nicolas will give us
a little introduction to the whole thing. NICOLAS ROARD: So hi, everyone. So we’re going to
talk a little bit about Android Studio in
general and a little more as well about ConstraintLayout. So quick summary about
what’s our goal here, right, as far as Google Developers– what we want is, really,
to make your life much, much better, right? And we want to
listen to what you have to say, any feedback,
any ideas, requests. But anything, we really
are looking into that. And we try to move
fast, you know? Since last year
at I/O, we release the stabler version
Android Studio 2.2, 2.3, and we are now working on 3.0. And I strongly encourage
you to test 3.0. There is a lot of
improvements in the reality detail on the tablet. And specifically for
the reality detail for the visual designer
in Android Studio, our goals are relatively simple. Basic one, we want you to be
able to visualize your layout. I know, it’s called
a visual designer. We want you to be able to create
those layouts very easily. And all of that being efficient. We don’t want you to lose
your time for no reason. And on that note, John? JOHN HOFORD: OK, so we
want to just give you a brief overview, the lay
of the land of the designer to give you a idea of how
it all comes together. So one of the things you
can do is, in Darcula Mode– I’m sure a lot of people
like Darcula Mode. And we could go back
to the other one. Now, we have on the left-hand
side, the Palette that’s basically where you can just
drag and drop your widgets onto your design surface. Then the component tree,
then comes the Inspector– and we’ll have much
more about that later. Then the core design surface,
and there’s a toolbar. We also have a right-click menu. So a lot of people kind
of forget that there’s a right-click menu. If you select an object,
you can click on it, and right-click, you’ll get
useful actions associated with what you’ve selected. The other thing that you can
switch to is Blueprint Mode. You could also switch
to two screens at once. The Blueprint Mode is
kind of a blueprint. It’s a rough outline,
a sketch of your UI. The design surface
is actually being rendered in layout LIM, which is
a sort of emulator of Android. So one of the things
that we also can do is, use the designer
in the XML Editor Mode. So if you are in the XML editor
and you press the Preview, you get, essentially, a full
design mode right there. Notice if you select,
it’ll actually navigate you to the
right element in the XML. You can switch to see
design or blueprint. You can also expand it a little
bit, pull out the palette, and you can actually just
drag an element right there on the screen. Notice it actually created
the XML at the bottom. And in fact, if
you edit the XML– in this case, I’ll
just delete the XML– it goes from the design
surface instantly. So you get a real time
feedback in both directions, simply like that. NICOLAS ROARD: So that was
just brief introduction just to give you some
of the concepts, some of the vocabulary we
are going to use in the talk. And hopefully you have been
already familiar with this UI. If not, again, give it a
try, specifically with 3.0. Let me cover
ConstraintLayout now. So ConstraintLayout is a
library we announced last year at I/O in this very room. And the general idea
is to provide something that gives you all the
flexibility and the power to create any type
of layout that you want with a strong emphasis
on having flat layouts. If you have flat layout–
meaning you don’t have a nested hierarchy of view in order
to create that layout– there’s a lot of advantages. One often repeated
advantage is performance. Indeed, with nested layouts, you
could have [? corner ?] cases where there’s an explosion
of computation necessary. So if everything is flat, you
tend to win in performance. So that’s one reason. The other reason, which I think
is actually more interesting, is you got a lot
more flexibility. It’s much better if you
want to limit contents. It’s much better if you
want to modify the contents, upgrade it, modify, et cetera. The other big thing
with ConstraintLayout is, it’s the same
team that works on ConstraintLayout
and on the Layout Editor in Android Studio. So it’s deeply integrated
from the very beginning, which mean that we have some features
in ConstraintLayout that helps creating a great UI
designer, and vice versa. We have some features
in Studio that allows you to create much
better, and much more efficient layouts with ConstraintLayout. It’s also an unbundled
library, which means we can push
any version any time. And in fact, we just
pushed a new version, like, five minutes ago. And it’s compatible with
basically every device. So quick recap on the 1.0. Last year, when
we announced 1.0, we did a long series of alpha
releases, beta releases. And basically 17
releases since last year. When I told you we are trying to
move fast and iterate quickly, that’s what we do. We did the final release
of 1.0 in February. Lots of performance increases,
particularly if you only try what ConstraintLayout
was last year, definitely give it a go. A bunch of new features
as well that we’ll cover. And it’s the default layout
now in Android Studio. So when you create a
new screen, by default, we put ConstraintLayout
where before we used to put RelativeLayout. And of course, Studio
is very flexible. If you want to
change that, you can. But we really believe
that it’s a great layout to start your screen with. And that’s what we want
to encourage you to do. And all of that
really should not have been possible without the
involvement of the community. There has been a flurry
of articles, talks, video on YouTube leading
to widespread adoption of the library. There’s also a new
community-based ConstraintLayout website
that is launching this week, and you should check it out. So 1.0, what did we have
in terms of feature? What did we show you last year? Well, and what did we
add in the meantime? So we had the original idea of
having relative positioning. You can set up your
layout so that one button is going to be positioned
relative to another element. Very similar to
RelativeLayout with a couple of interesting tweaks. We also added a
center positioning. So if you create constraints
in between two targets, your elements will be centered. And you can actually
modify that. It’s not just center,
you can apply a bias. So think about it as being able
to build much more flexible, reactive UI that will
position themself not simply in terms of an exact dimension. We also introduced the
concept of helpers object, like guidelines. And the idea with
guidelines is that it lets you create a UI in a
much, much more natural way. Particularly if you come
from a design background, or if you are working
with designers, they always think and create
their layout in terms of– they call it many names–
guidelines, keyline, redlines. Basically vertical
and horizontal lines to make sure that everything
is aligned correctly. Well, guidelines
in ConstraintLayout is just a first class concept
that you can use and create your layout with, but
ultimately on the device, it just results in the right
settings for the layout. We also introduced
chains, and that’s a relatively late edition
in the 1.0 release cycle. Think about it as being able
to position a group of widgets as a group. So to, for example,
spread them apart. The interesting thing compared
to previous layouts on Android is that it only
works in one axis. So the other axis is not
constrained by a chain. Finally, we introduced ratio. I’m sure a lot of you had to
re-implement a custom view just to implement a ratio. Well, we just added
it in ConstraintLayout from the get-go. And last but not least, we
introduced ConstraintSet. The idea with ConstraintSet
is that now we have a layout that is flat. There is no hierarchy necessary
to create your layout. In a sense, you
end up with a bunch of widgets at the same level. And we apply that to
create the layout, to get the result that you want,
we apply those constraints. So ConstraintSet,
the idea is simply that we gather all
those constraints, and put them into that object,
into a ConstraintSet object. So you can create
a constraint set that embed all the
constraints of your layout. You can embed– you can
create it from a layout file, from a live view hierarchy. And the fact that
you can do that is actually really,
really powerful. Because– and just give
you a simple example, you can simply just toggle
one set of constraints with another one. So it’s very easy to
tweak your UI at runtime. And even more, you can specify
and create your layouts in the comfort of the
layout editor, graphically. And at runtime in
your program, you can decide which
layout you want. So this is a very
powerful concept, and we’ll come back to that. And finally, today, we
just released 1.1, beta 1. And it’s available on Maven. So should be very easy for you
to integrate in your workflow. So what did we add in 1.1? We added, first, the
concept of barriers. And barrier, in
a sense, is a way to, say, just take,
on a set of widgets, takes the maximum or
the minimum of an edge. And that allows you
to create a lot of UI that previously, with
ConstraintLayout 1.0, would have been tricky to do. We also added another
[? hyperclass ?] that’s called a group, which,
for now, is relatively limited. But we have some ideas
on how to improve it. But the concept
is basically, you can have a set of widgets that
are stored into that group, and you can set, for example,
the visibility of the group. So you don’t have anymore
to maintain yourself a list of widgets just
so that you can toggle their visibility in one go. You can just
specify that in XML, and any visibility
state on the group will basically be applied
to the element in the group. We also have a new concept,
the placeholder concept. And we’ll cover that
in more details later. But I think you’ll like it. And finally, we added
a couple of tweaks in the way we deal with
constraints and dimensions. So if you ever wanted to
create a view whose width was 30% of the screen,
you could do that, but it was a little
complex with guidelines– because guidelines doesn’t
allow percent positioning. But now you can just do it
simply directly on the widget. And now we’re going to cover
a little bit of new features the Android Studio itself. JOHN HOFORD: Yeah. So essentially,
to give you a kind of more detail inside
of Android Studios, we have a set of tools. Some of them we will talk a
little bit more about later. But we have a series of them
that are alignment-type tools, and arrangement-type tools. And we have some stuff
to add guidelines. And we’ll see more on those. Here’s also the
right-click menu, which is actually– a lot
of them are existing tools. Now, here’s a little example of
what you can do with the tools. So in this particular
example, I create a chain, I center align all
of them, and then I use the Inference to
automatically connect them. So in three clicks, I have just
essentially made a top layer layout. Now, one of the other things
that we’ve done a lot of work on is the Inspector. Those little pluses you
see I’m clicking on, they automatically
cast a ray, and connect to the adjacent surface. So it’s a quick, handy way of
just making the connections without actually having
to drag out little lines. It can really speed up
a lot of connections. And then I’m playing with
all the other features of the Inspector. I can change the bias. I can then go and kill
connections all over again. And they both work together. So I just move it back over, and
the loop starts all over again. The Inference– you saw me do
a little bit of the Inference before. It’s essentially based on
a probabilistic model where we try to estimate what is
the most likely thing it would want to connect to. If they’re lined
above each other, it’s more likely it’s
aligned that way. If it’s directly on the
center, as the little icon is, it will want to connect it. One of the cool
things about it is that you’ll notice I can
make connections, and then use Inference to finish it off
and essentially complete my UI. So the ones that I care about
a lot, I can do by hand. And Inference does
not currently create chains or some of the new
widgets that we talk about. They don’t operate properly
with some of the newer design features. But as those features
become stable, I will work on putting them
into the Inference engine. So here is an example. It inferred. And as you can see, it
detected that it was centered, and it attached there. It changes some things
from wrap content to zero DP, things like that. It just tries to fix it. Now one of the other
things to remember here is, it’s not a beautifier. It is not going to align
things for you, and arrange. It tries very hard to keep
exactly where you put things. So I’ve seen a few cases
where people just sloppy put things on the UI
and then hit Inference, and they get bad results
because it’s not organized. So just remember to do that
when you’re thinking about it. One of the things that we like
and we use is the Inspector. You just saw me use it. There’s another mode
that you can get. If you hit the little
arrow at the top, which is this, which
is all the constraints. That’s kind of a pain
to use, quite frankly. So we’ve been
working on something to try and make that a
little easier, and how you would use it, and how
you would interact with it. And we call it– internally, we call it Slice. So imagine, whenever
you have a layout, you will actually have– associated with
the layout, you’ll have a dimensions, a
strings file, a few files. And the information
you’re trying to work with is mapped across all of
these different files. So it becomes this sort of
hopping around game where you’re trying to figure out,
oh, I’ve got to go and adjust the dimensions here. I’ve got to go and set
the string in this file, and I got to– and I have no easy,
simple navigation. So if we can take the
selected object in the layout, the percents, the dimensions
that uses, the strings it uses, and all the other things
it’s referring to, and we sort of combine them
into one user interface. It appears on the right. And we gave it a look that
is kind of like an XML file. So if you’re used to the XML,
you can understand what it does and how it works. You can sort of see the
files that are coming from all the other parameters. For example, the drawable
is a picture of me. The values is some number. And in fact, you can
go edit, and even create new elements directly
in that user interface. So it’s a quick, fast way
to work within the designer, and do all the other
little things you would like to do typically. NICOLAS ROARD: So I want to talk
a little bit about the tools attributes. So the idea with
showing you all of this is also that you could, of
course, use all those layout in XML, right? I mean, they are
normal Android layouts. You can use the old layouts,
you can use ConstraintLayout. Everything is perfectly
usable in XML. But the idea– and this
is what we strongly believe– is that
with the designer, we’ve got a great opportunity
to really make your life easier. I think you could see
with some of those tools that we presented, doing the
same thing in XML line by line is certainly doable,
but I think you’ll be much faster by
using those tools. So the tools attributes, it’s
something you may know already, right? See, the general
problem is that we have something in
the editor that’s not executing your code directly. So sometimes what we
show you in the layout editor is not going to be
exactly the same as what you have on your device. So because, for
example, some of it is just determined
by your program. It’s things
completed at runtime. So we have this idea of
having tools attributes where you can specify behavior
that would only be applied in the layout editor. So those attributes
are not going to be there when you publish
your application, when you push it on a device. They are just stripped out. But in the designer, that allows
you quite a lot of flexibility in how you want
to render things. So we got– showIn, for
instance, is pretty useful. Listitem to set up something
in a recycled view, and things like that. So that’s just a
generic problem, right, of how do you want to show
layout when we don’t really want to execute the code? And if you try to drag a
recycle view, all these view, in the layout editor, that’s
probably what you saw. Because we automatically
generate a default adapter that is pretty limited, you know? And by default,
that’s what you see. This is probably not how
your application looks like. So if you have some contents–
let’s say I created a row– you can specify
it, and you’ll be able to see that
being replicated. Better, but clearly not
what your application is going to look like, right? Of course, you’re going
to have different data. And that’s where our
sample data comes in. You could specify
new attributes– and this is going to
be available in 3.0– where, by default,
we have pre-baked attribute, like, for example,
names or phone numbers. And you’ll be able
to reference that instead of other attribute. And that will be
replicated in the designer. So think about it as a
way to very quickly see how your layout is going
to look like without having to program anything. We actually do more
than just that. We have a new sample data
folder in the project that you’ll be able to create. You could specify
things like colors– and that’s trivial. Just create a text file,
put the colors on each line, and that’s it. Every time that you
reference that element, we will pull the next
color, and we’ll just loop. So you can very quickly
get something like that. And you have more sample
data capabilities. You can display Lorem Ipsum,
dates in the specific formats, colors. You can even specify
an entire JSON file if you want to use
more structured data. So we got baked-in data types. Oh, sorry, the clicker. Baked-in data type. The JSON files,
as I said, if you want to have more structure. And if you have any resources
into that sample folder, you can reference it,
and we’ll pick them. So if you want a
collection of image, for instance, you put
them into a folder, and you reference that folder,
we’ll pick the next one. And let’s go on some
more advanced examples on ConstraintLayouts. So you may have seen in your
practice a program like that. I have some text on
the left of my button, and I want that text
to grow, but no more than what the button allows. And I want everything
to be centered left. So the way you would do
it in ConstraintLayouts– and it’s a little– it can be a little tricky,
but fundamentally, we create a chain, make the
text being resizeable, and it will automatically
apply the constraint. So it won’t go further. And so that’s just
a quick example of how you can use chain. It’s not just, oh, I want
to spread widgets apart. You can do much more complex
and powerful combinations. So there’s another example as
well about the gone behavior. So by default, when you
set a widget to gone, we resolve it as a point. So in that case,
my center button gets collapsed basically
as a single point. And that behavior
looks fine to me. That’s probably what I want. Sometimes it’s not going
to work the same way. If I do that on the first
element, everything collapse to zero again, the
margin included, and then the rest of my
buttons are moving. So that we have
another attributes that you can specify when the
object you connect to is gone. And in that case, we’ll use
those values for the margin. So the second button,
the original margin on the top of 0, and
now has a margin of 32, only if the first element
is marked as gone. And let’s talk a little
about Placeholder, which is a new addition
in ConstraintLayout 1.1. JOHN HOFORD: Yeah, so
this is new to 1.1. Essentially, what it is you
can create a virtual view, and set its content to another
view within the constraint layout. So in this simple example,
it’s grabbing whichever one you clicked on, whichever
view you clicked on, and warping it up to
the top of the screen. If you look at the text, it
might look a little strange if you’re not
familiar with Kotlin. Check out Kotlin tomorrow. That’s the total length of the
code inside of the Kotlin file. So the animation you’re
seeing on the right is completely being generated
by the code you see on the left. Nothing else is being
used in an XML file. So as you can see, it’s
randomly switching. But the fact that
you can actually have a placeholder, a place
where you can move a widget, may seem like, OK, what
else can you do with that? Well, if I design a
placeholder-based UI with a merge tag, essentially
I’ve defined– and in ConstraintLayout,
make sure to use the parent tag if you want to see the
UI while you’re doing it. It essentially gives you a
fixed layout which you can then use in another file. So in this case, I’ve decided
to have one placeholder that’s going to be my top image,
a big image and then a second placeholder that’s
going to be my action button. But I can actually make
a second placeholder with now using for
landscape mode. And this one, I arranged
it a little bit different. I use a slightly different
set of constraints. And now in the main layout,
I just declare the two UI elements and include
the template. Essentially, it
produces a template that decides on how
you do your layout. And because there are, in fact,
two of these templates, one in different ones, when
I rotate the screen, it would actually take
the other template. So now I can lay out my
views and separate out the layout from it. But I can actually do
more than just that. One of the things that you
can do with this structure is, what if instead of
the second image button, I could decide to
put an entire include file with something else in it? So in this particular
case, I have– oh, I don’t know why that–
in this particular case, I have an entire include with
a bunch of different layout elements. And it’s actually being
warped into that space. So it’s a ConstraintLayout
within a ConstraintLayout, so it’s nested in that context. But this is a very simple,
and almost stupid example, but you could imagine
where you decide how you want the
top and the bottom and the left and the
right, and behaviors, and lay them out, and
design them as templates. And then, when you’re ready
to produce your main stuff, you just go and do it in a
completely separate file. You can have designers
help you design templates, things like that. One of the things that we wanted
to do with ConstraintSet– and I’ll talk a little bit about
how you use constraint sets– is, you can separate
the views completely from how you do the layouts. So essentially, another
way of doing things is to encapsulate
your entire layout as a separate ConstraintSet, and
then you apply it to a layout. So you might kind of
wonder, what would you want to do with that? Well, you can use– you
can switch between two ConstraintSets on the fly. No views get reloaded. It’s not like
switching a layout. You’re actually just
moving the widgets around by applying different
sets of constraints. So in this example, I
create two ConstraintSets. And I grab a ConstraintSet
from a layout file, and I put another layout on
the screen with setContentView. Then I actually get that one,
and grab its ConstraintSet and this ConstraintSet too. Now, to switch between the
two ConstraintSets, all I have to do is call
the ConstraintSet, and apply to the
ConstraintLayout. And that will
allow me to switch. So I can produce lots of
clever animations that way. So one simple example
is, if I have a dialog– and this is a
normal ConstraintSet with my picture on it, and I
can do another one in landscape. Now, instead of creating
two separate layouts and inflating them
when you rotate, you can take over the
rotation yourself, and you can perform the
ConstraintSet switch yourself. And that way, you have a lot
less going on during rotation. So if you have an app that
likes to rotate a lot, you can do it that way,
and save some speed. NICOLAS ROARD: Well,
the other thing that’s important to keep in mind
with a ConstraintSet is, the– and this example of
rotation is interesting. Of course, you can use the
normal system on Android, and let the resource
being loaded at runtime. The thing with ConstraintSet
is that you actually in complete control of when
you create the ConstraintSet. so often in mobile, it’s
not so much about trying to not do the work
that you need to do, because you need to do it. So sometimes of
the work is costly, you still have to do it. It’s more a matter of trying
to find the right time on when to do it. And to me, that’s what
ConstraintSet allows you to do. You can basically pre-bake
all those constraints, and load them before,
and so you don’t have to incur a stutter
or anything like that because suddenly
you have to pull your entire set of resources. So ConstraintSet is
also pretty useful when we want to do
motion in general. So one advantage
of ConstraintLayout and this focus on trying
to keep a flat hierarchy is that there’s no
clipping issues. You can think about it as
a scene graph, you know? It’s You just have all
the different objects you want to show on screen– your buttons, your
images, and et cetera. And you can think
about ConstraintSet in some ways as a keyframe. And the way you would
do that, if you remember that slide that we just saw,
you only need to add one line, and that’s all. And that’s simply using the
Android transition framework that also is available
on [? industry.lib. ?] And that will
automatically animate any type of layout changes. That also would apply even on
the individual view, right? So in that example, I have a– sorry, clicker is not happy. In that example,
we have a layout that’s set with the
normal ConstraintLayout, but I can’t change
the parameters of an individual view. The layout will automatically
resize accordingly to the constraints I set. And TransitionManager
will animate all of that. So you can do kind of complex
behavior like that very, very easily. And the code itself
is really trivial. You could do a lot further
than that, you know? And that’s another example. You could create one
state of your screen in one layout, change– create a second state,
basically, and load that from ConstraintSet. Apply that at runtime, and
the transition framework will just do the rest. What’s really cool is that
you do that graphically. You don’t have to try to figure
out how much you need to do, what’s the dimension. No, you have the
immediate result on screen without having to do a
round trip to your device. And that was purely
in ConstraintLayout. But ConstraintLayout
can to be also used by leveraging the
existing framework, and the existing widgets
in the framework. So here, this is
just a [? new view ?] of the ones used
in the draw layout. But I can simply reuse it
into a ConstraintLayout here. So here, this is a simple
subclass, that’s apply that. What’s nice is– and
you know, I encourage you to think about
it in the link to the concept of
placeholders, is that you could basically
define a set of generic rules on how your UI behave. And so ConstraintLayout
become something a lot more than simply I just
want to position my buttons, and how do they interact
with each other. It can become more about, oh,
the entire UI moves around. And of course, you can apply
that with your custom widget if you want. That’s as simple. So here’s another example
of whole ConstraintSet slash transition animation. So we defined two states,
like the previous examples, and you see the shadows are
applied, the elevation changes. And all of that is
done graphically. The only problem
with this animation is that it’s a little stale. I mean, it doesn’t
do anything special. There’s no movement. But we could do a
lot more than that. And with custom transitions,
you could simply define whatever you want. So recently, there was a
physics library being released. You could easily create
your own custom transition, plug them into the system,
and do whatever you want. I would not encourage you to
replicate this particular UI. This is a test example. But just to give you
the type of flexibility this approach can give you. And on that note, I
think we are done. We have a few minutes
for Q&A. And please do file bugs, feature requests. You can contact
us pretty easily. The documentation
of ConstraintLayout is available online as well. And as I said, we
just released 1.1. Please give it a try. [MUSIC PLAYING]

25 thoughts on “What’s New in Android Design Tools – New Features for Rapid UI Development (Google I/O ’17)

  1. Roard & Hoford, Thanks for your work on constraint layout. Great work! You definitely made building layouts a fun activity. I was initially skeptical about the layout editor since WYSWYG hardly worked well in most IDEs. Android Studio's layout editor for constraint layout is an happy exception to this norm. I find myself coming to layout editor more often even when I would just want to build a mock up which I earlier used to do in vector drawing program like Inkscape, mainly thanks to constraint layout. It is so convenient for rapid mock ups.

  2. Was hoping to see a better explanation of new features in the constraint layout. Also, Google should stop forcing that poor guy to give talks. Not every engineer is a public speaker.

  3. are there examples code on how to use placeholders?
    is there a reason you didn't show us an animation on the device rotation in the rate speaker example?

  4. If you don't get what they are saying don't leave video and turn on the subtitles. Many great things you can learn.

  5. random questions on constraint layout:
    1) sometimes when there are view overlapping is difficult to select the one and connect it to something else, any suggestions?
    2) you can drag a view somewhere and it will be given a tools x/y position. is there a way of automatically remove all those tools attributes when you are done with the constraints?
    3) i found it difficult to emulate the match parent within the constraint layout (like having an image taking all the width or height or expanding as much as possible in the constraints I give. is there some hint you can give on that?

    thanks for the good work

  6. Are groups usable in this version? You guys briefly mentioned it, but I can't seem to find anything on the dev site about "constraint.Group"

  7. Splitting up the View layout from the View declarations by using a ConstraintSet sounds fantastic!
    I can't wait to see more animated layout transitions 🙂

  8. I think that constraintLayout is heavy and complex for standard environment. Also the UI 2D animation could be something by default and not for development.

Leave a Reply

Your email address will not be published. Required fields are marked *