What’s new with ConstraintLayout and Android Studio design tools (Google I/O ’18)
Articles Blog

What’s new with ConstraintLayout and Android Studio design tools (Google I/O ’18)

September 6, 2019


[MUSIC PLAYING] NICOLAS ROARD: All right. So good afternoon, everyone. I’m Nicolas. I’m the tech lead for
Android Studio Design tools and the
ConstraintLayout library. And that’s what we’re
going to talk about today. So you might have noticed,
we released a really cool navigation editor. We are not going to
talk about that today. But there was a
session this morning. It’s on YouTube. Check it out. There’s code labs. It’s really cool. So we are going to
talk about the layout editor, the work
we’ve been working on, the entire team this past
year, the improvements we made. Specifically we will focus on
sample data, which is something really cool we shipped in 3.2. And we’ll also talk about
ConstraintLayout 2.0 and what’s coming up
with these libraries. For first, for the section
on the layout editor, Vadim and Diego are
going to present you. VADIM CAEN: Thank you. Hi, everyone. So, to start with, we’re
going to talk about the layout editor. Most of you are probably
quite familiar with the tool. So it’s a graphical
tool that enables you to build your layout
without having to write any XML. And it’s supposed to
make you more productive. So what is nice with
the layout editor is that it also works
with your custom views. So if in your code,
you have a custom view, it will render in
the layout editor. And the nice thing is that any
custom view from your project will appear in the palette. So our goal is really to
make you more productive. So we’ve added some nice
features this year to do so. The first one I want to talk
about is the conversion. So if you right
click on a view, you will see the Convert View option
that will make this pop up appear. And you will be able to select
one of the pre-set components, or you can use
the edit text just to pick any view
from your project. And this view is contextual. So if you right click on a
view which is not a view group, we will show some pre-set
of non-view group views. The next thing I
want to talk about is a navigation between include
layout and their parent. So in the component
tree or in the preview, if you double click on a
component on an include tag, it will jump automatically
to the children. And if you click on the arrow on
the top of the component tree, it will jump back to the parent. This is quite handy to go
fast between two layouts. The layout editor
is really powerful used with ConstraintLayout. And ConstraintLayout
is a great layout because it’s very powerful. But it’s very verbose, right? So you might not want to
write all your XML by hand. So what you should
do instead is take advantage of all the menus
we have in the layout editor to generate this XML for you. So again, right click on a view. And then you can use the align– any of the top option
to choose your option. And we have many of them. So feel free to check
them after this session. And really it’s going to
make you more productive. But most of you are probably
populating your layout at runtime. You have data from the internet
and you want to pre-play them. So they are not rendering
in the layout editor all. So to solve this
issue, Diego is going to come here and talk
about the sample data. DIEGO PEREZ: Thanks, Vadim. So before we talk about sample
data, let’s talk about tools attributes. So the tools attributes
are the XML attributes. Now, you actually used to
give additional information to the Android studio
under the layout editor. You are probably familiar
with many of them. We are not going to
talk about all of them. Let’s cover one example
just to be clear on this. So you probably have seen this. So in your strings file,
you get a lead warning saying that you haven’t
translated a particular string. Usually what you want to
do is to fix this error, you translate it. That’s it. The error is gone. But there might be
valid reasons why you don’t want to translate
actually this string. It could be, that is the
name of the application and you don’t want to translate
it in every single language. Only in certain languages. So what you can do
here is you basically can tell Android Studio,
look, I know about this error. But I don’t want you to tell
me about it because it’s fine. So that is one example. There are many others. But what we want
to talk about now is actually design
time attributes. This is just a
subset of the tools attributes that I talked about. They are giving additional
information and context to the layout editor. So let’s see with one example. So in this case, what we have
is, we created our toolbar. We had to keep the
lay out on its own. So we use ConstraintLayout. We created it. And this is how it will
look in the layout editor. So what you can see is the
toolbar without any context. So you can see the
layout, but you don’t know how
it’s going to look at runtime in your application. So there is something
that we can do. You can again tell
the layout editor, this layout is going to be
included in this other layout that I’m hinting here. So using these
attribute tools showing, we are letting the
layout editor know that we want to embed this
heather into the main layout. And that way, we can
see it in context. So now when we are editing,
we know if the colors match. We can actually tweak our
design and see how every change impacts our layout. And the best thing is,
again, you can do it. You can edit it right there. You don’t have to sit
with a blank space or anything like that. So let’s see another interesting
use of design time attributes. When you have a text view,
this is usually what you get. So you have hello world. And that’s it. But you can tell to
the layout editor that you know that this text
view is going to look slightly different at runtime. And you do that by again
using the tools namespace. So in this case,
what we are doing is we are replacing both the
text and the text color. And we are telling the
layout editor, at runtime, this is going to look different. And we are about to see
how this is very useful. Let’s go with a slightly
more complicated example. When you have a
recycler view, this is what you get by default.
It takes the space. You can see how the recycler
view is going to be laid out. But it’s not very useful. It doesn’t help you
to actually come up with a good design for it. It’s just a list of elements
with a lot of empty space. So again, we can use the tools
attributes to basically let the layout editor know,
this is that the layout that I’m going to use. So you have probably seen
already list item many times. Very simple. You just say it. But we can do other things. We can tell the
layout editor, OK, how is this going to
look with five elements? All these things, you usually
cannot do them in the layout editor, because these are
things that happen at runtime. So usually the source of
information for our recycler view is an adapter. So the adapter might depend
on network, on database, on many things that we don’t
have available at design time. So doing this, you
give us context. And then the layout editor
will render correctly, similar to what you
have at runtime. So let’s now go
into sample data. So sample data is a feature
that we introduced in 3.0. And what it does is it helps
you to actually populate data that is not
available at design time. So in this case,
what we are doing is telling the
layout editor that I want to use the tint property. And I want to get the data
from this data source, which we call
@sample/material_colors. And that data source is
simply a file, a plain file, with a list of colors
that you see there. So what happens at design
time is the layout editor will get a different
color for every item. So that looks better. But we can do more. So let’s see how you
create that file. You got to your project,
new, sample data directory. And that is how we create
the directory where we are going to put every
data source that we have. In our case, we want to
create material colors. So new file. And then we name
it material_colors. And we put the list of colors. And that’s it. It’s that simple. Now you can use it
in any property. In this case, tint. So this is one of the
types of data sources that you can use in sample data. So it’s basically
a list of colors. You can have lists
of any kind that you want, like regular text. And you just replace
it in your text field. But you can have other
things more interesting. Like you can have dimensions. So if you have dimensions,
using the tools attributes, you can tell the layout editor,
I want to use this dimension. And I want it to be
different for every item. And you can do that
using sample data. We also have other
types of data sources. You can have images. You create them in
a very similar way. What you do is, you
create, instead of a file, you create a directory. And then you drop all
your images in there. And then recycler view
will get a different image for every item. So it’s very simple. And the last type that I
want to tell you about this is JSON files. So JSON files is a
similar way to the list that we have before. But it allows you to do
something that you cannot do with lists. You can have all your data
together in one place. You can add, maybe,
context about why a particular item is like that. Or you can even get a
sample from your dead API and put it into the sample data. In this case, what we
have is a list of notes. So what you can see is we have
a title and we have [INAUDIBLE] And the way that you
use this in sample data, is you can reference any
of those leaf elements. Let’s see how to do that. So in this case, what we are
telling the layout editor is, I want you to replace
text at design time. And I want you to do it with
@sample/ the name of the JSON file, and then the note
that we saw before. So in this case, we are doing
it with title and author. Remember that this
will change depending on the name of the JSON file. It doesn’t even need
to be called JSON. If you don’t want to provide
your own data sources, Android Studio
will also provide. It already comes with a
set of predefined ones. So you don’t have
to create your own. We give you a set of them. We give you names. We give you lorem
ipsum, obviously. And we also give
you a set of images. For example, you
can use avatars. And you don’t even
need to create images. You can just use the
ones that we give you. And again, how to use
that is very similar. The only difference
that you can see here is we added tools as the
namespace of the data source. So instead of being @sample,
now it’s @tools:sample. So using syntax completion, you
can see all the different data sources that we have. But in 3.2., we added
new features in order to help you to use this. So everything that we saw
was already available in 3.0. And in 3.2 we are
adding a few things that Vadim is going
to tell you about, to help you using sample data. VADIM CAEN: Sample
data is a great tool. But we love tools. And so we decided to
put a UI on top of it. So what does it look like? I’m sure most of you
already did that. So you have an image view. You’re taking it
from the palette. And the resource
picker will pop up. And since you’ve just
started your project, you have only the
launcher icon available. So you use it. And your preview doesn’t
look really great. So what you can do instead
now, in the resource picker, you have the simple
data category, and you can pick
any resource data from your project or
the pre-defined one. So now our image
view looks better. And we can see every instance
of it in our recycler view. But if you want to make some
change to this sample data? What if I just want to use
one single image from my set? So we’ve introduced in Android
Studio 3.2, the new design time helper that you can access
by clicking the wrench icon right below the image view. So here, I’m going to
uncheck view as a set. And this will give
me the ability to select only one
image from my set. And I can try it out with
any image from the set. But now, let’s say that we do
want to give it another look. And we want to pick images
from another data set. So we can just use
the drop down button and select another data set. And here we go. Our recycler view
has a brand new look. So it’s very nice
to preview what it would look like with
different kinds of images. So you can always jump
back to the resource picker and have the full
set of resources available by clicking the browse
button on the bottom of the pop up. And the same options
are available. And also I wanted to mention
that if you select a sample data on the resource
picker, it will populate the design time attributes. It will be removed at runtime. We have the same design
time helper for text view. So here for example, I’m just
selecting a different set for each text view. And as you can see
on the recycler view, each item is taking one instance
of its own set for each item. And finally, we’ve also added
this feature for recycler view. And this is quite nice. You can browse between all the
templates we provide for you. And the file will be
automatically created. So you can just jump
back to the credit file and preview your changes. And all the design
time attributes are automatically populated. So you don’t have to do
anything to preview it and take full advantage of sample data. But the layout editor
is even more powerful if you use it with
ConstraintLayout. So Nicolas is going
to come on stage and do a deep dive
into ConstraintLayout. NICOLAS ROARD: We released
ConstraintLayout officially from the stable
version last year. We announced it a
couple of years ago. So if you don’t
know about it, it’s a library that allows you to
easily create user interfaces. And we tried to
encourage you to use flat hierarchies, which come
in very handy for animations. It’s a support library. It’s compatible
essentially everywhere. It’s small. And you’re in full
control on when you ship with a specific versoin or not. It comes with a great UI builder
that we have in Android Studio. And essentially,
please try to use it. It’s something we’re
working really hard on to make your life easier. So we released
ConstraintLayout 1.0 last year with a bunch of capabilities. You can set up
your UI by creating relations between elements. There is a lot of
capabilities here– related positioning, center,
et cetera, et cetera. And there is some helper
objects like guidelines to help you set up your screen. So it’s already a very
full set of features But a month ago, we released
ConstraintLayout 1.1, which added a lot of
bug fixes, performance improvements, new features, new
ways of expressing your layout. And I’m just going to
highlight one that you actually see on the slides,
the barrier, which allows you to
position an element relative to a set of elements. So whatever the position and
dimension of those elements, that element on the right is
going to position correctly. So essentially, with
ConstraintLayout 1.1, we have a really
flexible layout, something that
should essentially let you express any UI. And you can just add
it to your project by using normal
gradual dependency. We are now shipping
on Maven so it should be very easy
for you to use it in your build server, et cetera. But I think a lot
of you here are in this room to hear me talk
about ConstraintLayout 2.0. So with ConstraintLayout
2.0, we are starting with ConstraintLayout 1. And ConstraintLayout
1 is a great base. As I said, it gives
the entire flexibility that you need to create your UI. And it comes with
the UI builder. And one of the concepts
that we introduced in ConstraintLayout 1 was the
concept of helper objects– objects that, even though
you can manipulate them in the UI builder, they do
not appear on your screen when you run the application,
but essentially they help you create your UI. So one of them is
the guideline object. You know, if your
designer typically specifies a UI with
horizontal lines, et cetera, well, you can simply
replicate those in your UI. So it’s a lot easier for
you to set up your screen. Similarly, with 1.1, we have
the barrier I just talked about. And what’s nice with
those helper objects, is that we do have some support
for them in the UI builder. So you can simply manipulate
them and add the elements to those helper objects
in the component tree by dragging elements into them. Something you might not realize
is that those objects are not view groups. They only keep a
reference to the views. So we still keep the
entire view tree very flat. But because they
are just references, we can have one object being
referenced in multiple helpers. And that’s starting to be
very interesting for us. And you can think
about the helpers as a way of keeping a
reference to a bunch of views. You can still get
a flat hierarchy. And the way we think about
it is that a helper gives you a way of encapsulating
a behavior. In 2.0, we are going to expose
those helpers as a constraint [INAUDIBLE] class. So you would be able to
create your own helpers. And if you have your own
helpers in your project, similar to what we
have with custom views, they will be present
in Android Studio. So you’ll be able to
manipulate your own objects. We kind of highlighted
three broad categories for the helpers in 2.0. One category is layout
manipulation– helpers that are going to help
you create a layout. Another one is helpers
that will apply something after the layout has been done. So kind of post-layout. And finally, we
have some helpers– because helpers are views,
can be views as well– helpers that we can use to
do some specific rendering, specific display. For the virtual layouts,
this is one of the concepts that we are really keen on. The idea is that
the helper is going to set the constraints for you. The simplest example I can
think of is a linear helper. You know, if you created a chain
in ConstraintLayout 1, well, that will allow you to do
exactly the same thing. But you will manipulate it a
little bit like linear lay out, for instance. The only difference is that
you have all the features that chain provides you. And the way you use
them, it’s very easy. It’s a normal view. You can constrain
that view itself. But the only thing you need to
care here is that list of IDs that you reference. We have another virtual
layout that we launched with 2.0, which essentially
implements the FlexboxLayout semantics. So those objects
are pretty useful. But at the same time, I
think, pretty expected. But while we were
developing those helpers we came up with
additional use cases. So one example of a post layout
object is a flying object. Let’s say that you want your
objects on the first layout to fly in. Well, you could simply reference
this object with the flying decorator and that’s all. So no code. It’s purely declarative. You just add that to your XML
file, reference that object, and it will animate
on first launch. We have another object
that’s very powerful. Layers allows you
essentially a lot of things. It kind of allows you to
consider a set of views and apply operation to them. So there’s a bunch of graphical
operation that you can apply. And we will do the
math behind the scenes to apply them correctly. You can also set
it up so that it takes by default the bounds of
the views that it references. And you can use it to set
up a background very easily in that way. And those are use
cases that we will expose is, you could use the
layer a little bit like you would use layers in
graphical photo editors to have a bunch of layers
to specify your elements. And when you are OK with
those elements’ constraints, you could lock that
layer and be sure to not inadvertently modify them. So it’s a very powerful helper. Here’s a quick example
on how it would look like by drawing a
background around a bunch of buttons being referenced. And without having to set
up the constraints manually, I can easily surround those
objects with a background. And just to prove you that
we are still with a flat view tree, we can apply
this operation that I’m talking about and
everything will just follow. But the background
will stay where it is. So it’s a silly example. It’s just to show you the
potential of those objects. Another useful decorator
is a circular reveal. And it actually
does what it says. And it’s the typical
effect that you’ve been familiar with
with material design. And if I press the
button that’s better. The interesting thing
here is that you’ll notice that it only applies
to the element referenced. So we have this row of buttons
that are not referenced. And so the circular reveal
did not apply to them. And if you played
with circular reveal, you’d see that it’s actually
a bit tricky to do that. The interesting
thing here as well is that we are not creating
our own circular reveal. We are just using the
normal circular reveal. But essentially, we
package it in a way that makes it a lot easier
for you to play with and use in your layouts. So on that same idea,
we have decorators that are helpers that
are here to draw things. And same things with
reference views. And you can draw
something with it. So that’s probably
a little confusing in terms of what type of
effect you can get with that. So let me show you. So you may want an
effect like that. You know, kind of
a lava lamp effect with those blobs moving around. And what you’ll see is that
the result of that effect will depend on the
position of those blobs. But the final rendering has to
take in account all of them. And that would normally
be a very difficult effect to achieve. So the way it
works with helpers, so that you can think
about it that way– you have a canvas, right,
like what you paint on. You’ll have,
actually, some image views that are essentially
sitting on top of that. And they are normal image views. So you lose nothing here. They are normal views. Normal widgets. You can apply the usual things. But we put their background
to be transparent. And then we use a decorator
to draw the background. And you can easily get
an effect like that. You know, for instance. A little slower. There you go. And just to show you
the bounds are correct, we still have our image views. Another type of decorator that
you can use in your project is the bottom panel decorator. So let’s say that you have
a layout like that you may have created by using a chain. Very easy. But if you’d like to set a
background on those objects, and maybe change the colors. So you can simply
apply this decorator, reference those elements, and
we’ll do the rest of the work. And because, well, we can do a
little more interesting stuff here, I can show you what
it may look like when you click on those buttons. So just to give you an
idea of the type of effects you can get with decorators. So I’m clicking on this. My menu comes in. I can press that. Some other menu comes in. I press it. And there’s a circular reveal. It’s of course a very silly UI. But it’s just to give you
an idea of what you can do. What’s very interesting here
is that if you look at it in studio, and you know, if
I zoom on the component tree, you’ll notice that actually,
we mostly have just views. And just a bunch of helpers. There’s actually no code here. So I think it’s really a
useful addition to your toolset as a programmer to
try to really separate the fill with the actual
data and your actual behavior on your application. So to summarize
with the helpers, you can tag your own views
with those, essentially. You can encapsulate
and reuse the behavior, and it’s all declarative. Let me talk briefly
about layout management. So you’ve been probably
playing with constraint sets on the ConstraintLayout 1.1,
which is a way of encapsulating an entire state for a layout. And if you switch between
two of those states, you can animate them. So that’s very nice. But you know, initializing those
things is a little cumbersome. You have to create your layout,
load those layouts manually, et cetera. So in 2.0, we’ll have
a separate XML file that lets you specify states. Because essentially
that’s what they are. I have a layout. That layout has different
representations, different states. And you can associate that
with different layouts. So the way you would
use them is simply by coding [INAUDIBLE]
description and we’ll do the
rest of the job. You can then switch
states simply by coding set states
with the state ID. And that’s it. One nice thing is that
you can specify a region on when a specific constraint
set is going to be applied. And by plugging that into
onConfigurationChanged– and I’m showing that
on a Chromebook– you’ll see that
automatically, depending on the size of the window,
we’ll switch layouts. So it’s a very easy
way for you to have different behavior for layouts. If you want a little
more fancy, you can, on the preLayoutChange,
plug a TransitionManager, and then we will animate
the layout transition. So I think with devices
like Chromebooks, that’s the type of
use case that’s going to be more and more useful. And that’s essentially
Layout Management. So to quickly recap on
ConstraintLayout 2 so far, we have the helpers API. We have those virtual
layouts and decorators. We have the resize API. We also have other stuff
I haven’t talked about, like a new [INAUDIBLE]
API for manipulating the constraints directly. And we have motion layouts. And to talk about
motion layouts, I’m really happy
to introduce John. JOHN HOFORD: Thanks. [APPLAUSE] Now, I’m really excited to
show you guys MotionLayout. It’s a brand new layout
that we’re introducing with ConstraintLayout 2.2. So let’s kind of get into it. It starts off with a
subclass of ConstraintLayout called MotionLayout. It’s a layout. It has all the properties
of ConstraintLayout. But the whole trick
with animating between two constraint sets– that will be done for
you by MotionLayout. So if you have two
constraint sets, it will switch between them and
animate between them by itself. But you’ll notice, because
it’s a ConstraintLayout, you can actually use the
helpers that were shown there. But it also provides
you with the ability to edit the custom
attributes of the system. So you’ll notice the
blue light there. It’s changing because it’s a
custom attribute in the system. So constrained sets now can
handle custom attributes. It allows you to
animate anything. One of the other
things that it does is it allows you to
control on touch directly. So it’ll manage
your touch events by tracking your
velocity of your finger and matching it to the velocity
of views in the system, and naturally give you a
smooth transition between them via touch. We also support helpers because
it’s just a ConstraintLayout. So the helpers
Nicolas just showed– they’re there too. And they can work
together and apart. Now let’s change the
transition a little bit. We want to move the i into
the middle of the screen. But if we look closely, there’s
a bit of a problem here. You see the arrow
clashes with the i. We’ll have to fix that. And the way we do that is a
feature we call keyframes. Essentially, if we have a
beginning and an end of a path, we can distort the path
by adding a keyframe. And once we add the
keyframe, it will avoid the path, which is pretty cool. So now we have a motion scene. It has constraint sets. It has on touch keyframes,
custom attributes. With a little flag
on your device, you can see the path of all
the objects you’ve set in it. So you can understand
what all your views are doing on the device. So one of the nice things
that we’ve supported in it is nesting of constrained
sets of MotionLayouts. So in this particular
example, we have two views being
animated by a third view. They’re both constraint
MotionLayouts. Layouts. And they’re both being driven
by a third MotionLayout. The top view is just
doing a fade to black. But you’ll notice something
else in that view. This is an animated view that
was custom written by Nicolas that is being driven by
MotionLayout because it implements an
on-progress method. So you can drive your own
custom animations directly from MotionLayout. So one of the things
it’s really good at is synchronizing motions. Anything that’s very complex,
sequences of many things moving on the screen, it
will handle it, and will also allow you to
interact with the touch. So we added one more
thing to the system, something we call cycles. This is the ability to build
into the keyframes oscillatory behaviors. It can vibrate and
shake in various ways. And you might wonder, OK, what
do we do with these KeyCycles? So in this particular
example, first, let me just unfold them
with a staggered effect. But now I can take
one and have it roll because it’s oscillated. Or I can do a different effect. I could have it sort of
bounce along the edge. I got bored and I just had
that one flying around. Another typical
example, is you put it like doing a little
shake at the end. So now one of the cool
things is, we build editors. So we’re building an
editor for that thing. And we call it
the Motion Editor. It’s part of the design surface. But now, you’ll be able
to do those edits directly in the design surface. So kind of, to take
you through how you would do that in
the design surface, based on
ConstraintLayout, you just create your constraints for
your first constraint set, switch to the second,
edit the constraints for the second constraint set. And then once you do
that, if you hit play, it will show you the animation
between those two constraint sets. There’s a checkbox to
enable showing you the path. So now you could see the path. But how would you
add a KeyFrame? Well, you just position the
cursor where you want it. You add the type of KeyFrame
that you want to add. And you can just
distort the position by selecting the KeyFrame and
moving it around on the screen. And let’s just do that one
more time so you can see it. Just select a position–
any position– create a KeyFrame. And then we just move it. So here is much more
complex motions. They’re all being animated. This one has quite a
few KeyFrames in it, just designed to allow
you to set transparency on some things, change
the size of other things, move them around. But it all works in the IDE. Thank you. [APPLAUSE] NICOLAS ROARD: So
one last thing. You probably are eager
to try all those things. So, a lot of that
is actually in 3.2. All the sample data
we have showed you, are the current integration
with ConstraintLayout 1.1. Go, download 3.2. Try it out. We release the [INAUDIBLE]
13 this Tuesday. So please give it a try. ConstraintLayout 2, the
library with MotionLayout– we are talking about releasing
it in a few days, hopefully. And Motion Editor–
it’s an ongoing work. But we are really
excited about it. So think about it. There are code labs for
the navigation editor as well, for the Chrome
resize API we showed you. We also want to hear
from you in general. We are easily reachable,
the four of us. But for this particular
session, there is a feedback you can fill. We also are going to
have an office hour this afternoon
after this session. So please come see us. And that completes our talk. Thank you very much. [APPLAUSE] [MUSIC PLAYING]

Only registered users can comment.

  1. Awesome tools! What about performance improvement on Android Studio? Its performance on macOS or Windows is garbage, I have to restart the AS at least 4 times a day.

  2. Constraint layout was causing me too laggy scrolling when I was using it as a layout of item of recycler view some time ago, how about now, is it fixed?

  3. Now Android Studio begins on the path of Visual Studio with these features like Handling motions, Adding Keyframes & Path editing 🙂

  4. Common CL team👌CL team never share the tech talks code like you always do! I tired of of searching all the 2017 CL talks codes hopefully it doesn't continues to 2018!😢 #talkswithoutcodeshare

  5. Awesome motion layout editor! Is there any plan to have an editor to create all the animation in Android?

  6. We left many items that doesn't mean we don't know that. We left because we try to shortcut layout. We will add some items in the middle but that will not cause any harm to the base layout.
    We also left lot of things unexplained, it is because people may asked us for an explanation. We have explanations. We are not depending on anyone for anything for sure.
    Submit your own solution, so that other may judge us when we complete.
    AND,
    If you want to resists us, welcome. For sure we will handle you even if it worse for you.
    And, We assure you, "HUMANITY FIRST" is my philosophy.

  7. MS Powerpoint 2003 called, wants its animations back. Why are these guys so lazy, every animation demo in this google IO is an eye and brain soar. Loved the new features though.

  8. How can I set a "tools:image" or "tools:backgroud" to a normal Layout or view (not recyclerView)?
    In our app, these are also dynamic and setted by databinding.

  9. this year's I/O was incredible, however non-native English speakers as spokespersons makes it far less enjoyable.

  10. https://github.com/ibhavikmakwana/Constraint-Layout-Animations

    Check out my GitHub repo on ConstraintLayout Animations.

  11. Does it finally work? No, I won't try myself…..pretty disgusted with this, 2 years and still not stable…

  12. Thanks for making android more faster..& Less versatile….With no user experience…. ANDROID Oreo cheater….you don't need to optimize things…like the world is doing….You need expand….To get the full effecieny of hardware…No more android fan

  13. I wonder if this will work with transitions. Like viewpager transitions and fragment and activity transitions.

  14. com/google/example/games/basegameutils/BaseGameActivity.java error: method does not override or implement a method from a supertype error: cannot find symbol method onCreate(Bundle) error: method does not override or implement a method from a supertype error: cannot find symbol method onStart() error: method does not override or implement a method from a supertype error: method does not override or implement a method from a supertype com/google/example/games/basegameutils/GameHelper.java error: cannot find symbol method getApplicationContext() error: cannot find symbol method getApplicationContext() error: cannot find symbol variable RESULT_CANCELED error: incompatible types: Activity cannot be converted to Context error: incompatible types: Activity cannot be converted to Context error: incompatible types: Activity cannot be converted to Context com/google/example/games/basegameutils/BaseGameUtils.java error: cannot find symbol method getPackageName() error: cannot find symbol method getString(int) error: cannot find symbol method getString(int) error: cannot find symbol method getString(int) error: incompatible types: Activity cannot be converted to Context com/google/example/games/basegameutils/GameHelperUtils.java error: cannot find symbol variable RESULT_CANCELED

  15. Had any one face this bug in ConstraintLayout? https://stackoverflow.com/questions/45879287/layout-messed-up-when-dialog-opens . Also if any of the speaker look into this and confirm if this is a bug or am i doing something wrong?

  16. Great video! But, can You provide some GitHub examples? On 26:00 You show All Together app, may be there is a similar example on GitHub? Or example of Lava Decorator? Thanks!

  17. Wow, after 27 version of API, they finally realize that a layout with relative dimension can be useful with multiple sceen size. That Android SDK is a joke.

  18. Notes from this presentation:
    1. ConstraintLayout now works with custom views
    2. Convert Views straight from right-click context menu. Suggestions offered are contextual; intelligently offered based on the type of View selected.
    3. Navigate to and from`included` layout via siongle click in the Component tree
    4. Improved menu options to aid to View position. This avoid writing too much XML by hand
    5. Tools attribute give additional info to the layout editor. Useful especially in contexts where data is remote or unavailable any design time e.g for RecyclerViews, ImageViews
    6. Sample Data: provide data, that is normally not available at design time: @sample/<some_data>. Can use both built-in data or create data In files in a sample data folder at the root directory of the project.Sample data can be complex JSON too: album.json/title, album.json/artists/lead
    7. Design Time Helper: “wrench” icon in the Bottom-Left of a View in Design View. Helps select Sample data
    8. Helper objects — barriers , guidelines. These are not view groups, hence, the ConstraintLayout remains flat. A single View can be referenced in multiple Helpers
    Layout Manipulation: e.g Linear, Flow
    Post-layout Manipulation:
    Rendering/Decorating
    Layers:
    9. Declare ConstraintSets via XML as <State /> with a <ConstraintLayoutStates /> . Use setLayoutDescription() in code to apply them. Switch states by calling setState(state_id)
    10. MotionLayout
    – Takes animation among ConstraintSet to another level
    – KeyFrames: distort animation paths
    – KeyCycles
    – Motion Editor : Create, Edit animation in Design View

  19. It is so frustrating not being able to use all this preview tools just because constant issues with Android Studio not being able to display layout preview.

  20. Problem i have with the layout editor ive had a chance to use is it will often just set fixed dp sizes that i then have to fix manually.. maybe thats the old one i dunno. But its annoying.

Leave a Reply

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