>>Tor Norbye: All right. Next to the rendering target, we have a locale chooser.
So here is the layout where I have a bunch of different translations, so I can switch
to another language. And this is project wide, so once you have chosen the project you want
to work with I can go to other layouts and it's going to show me that new language.
And below the language chooser, we have a line with a number of different configurations
that are per layout. So the first thing we can do is we can change the theme. So the
theme chooser shows me all the themes that are referenced from the manifest, all the
themes available in this version of the SDK, and any themes that are in this project.
So you can see that I can, for example, switch to the welcome theme for this layout. Or if
I switch to a default theme, you can recognize the progress bar in the center; right?
So that's the theme chooser. And over on the left we have a screen size
selector. So obviously this is a ten inch tablet size. That's why you see the Honeycomb
buttons on the bottom here. If I switch to a phone layout, you can see
this is a 3.2 inch size screen. Now, I can choose that I want to actually
render this as a tablet size instead, and it automatically scales -- or it zooms out
so I can see the whole layout but if you look at the zooms control here I can to 100 percent
so it is rendering my layout the way it would look on a tablet.
And next to the screen size, we have the orientation toggle. So I can, for example, test my layout
in both orientations, back and forth here. So let's say that I want to make the landscape
version of my layout different. The way you do that is through the configuration chooser.
There's a button up on the top right here, create. So when I click that, I get this dialogue
which asks me what qualifiers I want to create a special configuration for.
So I am going to choose landscape and add it to the list on the right. And you can see
it tells me here that it's going to create a new file in the landscape folder.
So when I press okay, it duplicates the default layout and we are now in the landscape orientation.
So if I open the package explorer, you can see it created a new file here.
So we now have a landscape layout we can edit that's not going to affect, for example, the
portrait mode. So let me go ahead and drop in an image here
and when I drop that I get this resource chooser. We use this resource chooser in a number of
places in the tool when you need to input some resource. So here is a quick tip for
you. This one accepts wild cards. So I am looking for a logo. I can't remember what
it's called, but I can put a star and then logo, and this is going to find all the matching
resources for me. So that's my logo. Let's use the layout actions
bar to center it, and let's also add some padding, some margins. And here's another
tip. You can drag to move things around, but if you hold the modifier key, you can actually
duplicate. So if you want to, for example, quickly put out a lot of buttons you can quickly
do it with the modifier key. So I am going drag this over on the left here so we get
a symmetric look. So now we have the landscape orientation layout,
and if I switch back to portrait you can see indeed we have different layouts now for the
two orientations. So that's all well and good. But if you look
at the header in this layout, and it contains a bunch of stuff, a bunch of buttons and everything,
and this has now been duplicated between the two layouts, and that's probably not fun for
maintenance; right? If you were asked to change the header, you have to go into each one of
your layouts. You don't want to did that. And if you look in my outline, you can see
there actually is a color strip above it, and that's just an include. So Android has
a mechanism to avoid this kind of duplication, and that's the include mechanism.
And we're already using it for this color strip. You can see it's a separate layout
that's just included everywhere. So what I want to do is do the same thing
to the header. I want to have a separate header layout that we include everywhere. And we
have a new feature to help you with this if you have already gone ahead and done this
duplication. And that is this visual refactorring called extract include.
So I select the portion of the layout that I want to refactor out into its own layout,
and in the context, there's this extract include menu item.
So when I choose that, it brings up this refactorring wizard dialogue. It's asking me for the name
of the new layout but notice it also has a check box which asks me whether I not only
want to extract the fragments from this layout but also look in all the other layouts and
find duplication elsewhere as well. So I am going to press preview and we get
this dialogue here and can you can see it is ripping out a bunch of XML from the layout
and it's createing a new file here that's the same XML plus some name space stuff.
But look at this. It's also found the same header in a bunch of other files. And it's
cleaning all that up for me and replacing it with an include.
So when I press OK, it shows me my new header layout. You can see it's just the header,
and I can go ahead and edit this if I want. So when I press okay, it shows me my new header
layout. You can see it's just a header and I can go ahead and edit this if I want. And
if I go back to the layout we were editing, and I select this header, you can see it's
now just an include. Using this --
[ Applause ] >>Tor Norbyte: Thank you.
And using this layout is also very easy. I'm just going to open our form layout again.
I go to the layout category. I can drag in an include tag, and I'm going to drop it right
here. Here's the resource chooser again. We're going to point it to our header. You can see
there's our included layout. We have one more feature to help with this.
So if I go back to my layout here, if I need to edit this header, I can obviously open
the header file -- header file, this is not a C header file -- but I can open this header
layout, and I can obviously edit it. But what if I want to see it as I'm editing it in context?
I can head back to this and DoubleClick on this include and look carefully at the layout
as I'm doing that. Do you see what happened? It grayed out everything. I can no longer
select anything except the header. And if you look carefully, I'm actually not editing
the outer layout anymore. It opened the inner included layout as you can see in the outline.
But it's rendering it to me the way it looks within another layout.
And so if I, for example, go to another layout that was also cleaned up, this one, and I
DoubleClick here, you can see it's now letting me edit this header in line the way it's viewed
from this other layout. And, in fact, I can right-click on this layout. There's this "show
included in" menu. And we know all the places this layout is included in the project. You
can switch and view it the way it's appearing in any of these.
That's a feature I hope will really help you work with includes.
[ Applause ] >>Tor Norbyte: Thank you.
So that's a feature to help you avoid layout duplication. There's another kind of duplication
that's really bad as well. And that is in-lining styles. So I'm going to DoubleClick on this
button. What that does in our tool is jump to the corresponding view in the XML. And
I'm going to show you that for this button, we've in-lined a bunch of styles, some text
size, font style. This is not good. And, in fact, we've done it on all the buttons.
What we want to do is use a similar feature to create a logical style for this and put
that in a separate file so there's one place to update.
So I'm going to switch back to the graphical view, and I want to select all the buttons.
And quick tip, we have a special select menu that lets me select all the widgets of the
same type. That's quicker, since this is not a contiguous selection. Here's all my buttons.
And I can now invoke this other visual refactoring extract style.
So now I get another wizard dialogue. If you look in the center of this, what the tool
has done is look at all the attributes defined by all the selected elements, count and sort
them based on what their values are. So it's telling me, for example, that five out of
the six elements set the foreground color -- the text color to foreground one and one
of them set it to foreground two. In fact, that wasn't even intentional. That's one of
the things you want to use style so that you don't end up with things that aren't fully
up to date. So I am going to name a new style here, home
button style. I can also choose to unify the styles with this check box. It's going to
rip out any values that are different. Let's press preview. And you can see it now creates
a new style in my styles file. And in the layout, it's going to strip out, you know,
all the inline styles and replace them with style definitions. When I do that, we're back
to our layout. And if I DoubleClick again, you can see we now have a much simpler definition.
And we can go to one place to update the styles. [ Applause ]
>>Tor Norbyte: All right. Another thing that we've improved a lot is support for list views.
So list views have been very tricky for us in the tool. We used to render this. Basically,
nothing. And the reason for that is that list views, they're contents and even the ListView
item layout is all configured from Java code, and not a custom view, from your activities
and adapters. And we do run your custom views, but we do not run your activities. So that
was tricky. But we have a solution now that works pretty well. And what we're doing is
we're picking a default layout to show you. You can then go in and say I actually want
you to show me the list using one of these builtin layouts. Or more likely, you have
a custom layout for your ListView items that you want to see. And so you can invoke this
choose layout here, which gives you the resource chooser again. And in this project, have a
particular list item session layout that was intended for this ListView. When you choose
this, we preview your list using exactly your layout.
So we're planning to support something similar to what I showed you with includes. We would
love to let you inline edit these ListView item layouts. We don't do that yet, but I
think that's next on our plate. >>Xavier Ducrohet: And also, that feature
did not make it -- it's inside the next version of ADT, but it's not in the 3.1 rendering
library. So we're going to finish that, and then we'll release an update version of the
3.1 SDK component that will have a new version of the library that will do that.
>>Tor Norbyte: Let me show you a couple more visual refactorings.
First of all, we can let you change widget type. So, for example, I can take this text
field, it's showing me some other likely candidates, or I can pick any view type that I want really.
But we're going to convert it to a spinner. And the reason you want to do that is, if
you were to just delete the old text flow and insert a new spinner, then your layout
attachments would disappear, your ID attachments and so forth. This let you preserve things
in place. Let's say I want to drag in a progress indicator next to this spinner here. If I
put in the table view, it creates a new column which I do not want. What I really want is
for this cell to be able to have siblings. To do that, I can use the wrap in parent visual
refactoring. This is going to insert a new parent in the middle of the hierarchy. So
I'm going to choose a horizontal linear layout here. I'll call it parent. And I now have,
if you look in the outline, you can see we have a new linear layout inserted in the middle.
And I can now proceed to go and drag, for example, this progress indicator and then
I don't get a new cell. And we also have a change layout refactoring
which attempts to make some conversions from one layout to another. And we're still trying
to improve this. But we have the basics in place.
And that brings me to relative layout. So show of hands, who here has worked with relative
layout? A lot of you.
So then you know that relative layout is a very powerful layout. But it could be a bit
tricky to work with. I hope that you will like this next part of the demo.
Log in to save your progress and obtain a certificate in Alison’s free Fundamentals of Google Android Development online course
Sign up to save your progress and obtain a certificate in Alison’s free Fundamentals of Google Android Development online course
Please enter you email address and we will mail you a link to reset your password.