[MUSIC PLAYING]
Hello, and welcome to Dev.Bytes.
My name is Jan-Felix Schmakeit, and I'm from the
Android Developer Relations team.
In this episode, we are looking at the Hierarchy
Viewer and how you can use that tool to help you optimize
your layouts and views in your application.
And we are going to be using the BaconReader sample
application again that you've seen in one of the other
Dev.Bytes before.
Let's have a look at our Hierarchy Viewer again,
because I noticed there's something strange going on in
one of our layouts.
So we have our main article view, where we have some text,
we have a title, and we have a background picture, and then
we have our main body of text here, so it's what's happening
here at the top of the current view.
And our hierarchy looks very, very complicated.
We have RelativeLayout and then we have FrameLayout.
And then we have the ImageView and then we have
TextView down here.
So we can definitely simplify that.
And each of these steps in our layout adds extra time that's
needed to measure and draw everything to the screen.
So if you go to our layout here, so this is where we're
defining what the image and what the title looks like.
So this is very, very confusing, we have a
RelativeLayout here, FrameLayout, LinearLayout.
Let's simplify this.
So the way this is structured is that we have an ImageView
that has our main-- the big picture that we have in the
background.
And then we have this gradient on top of that.
And then we have our title.
And then we have a smaller subtitle as well, a
subheading.
Let's simplify this a lot.
What we can do is we can simply have the ImageView, the
big picture.
And then we can just use one simple view on top, we can use
a TextView on top.
In the TextView, we can specify the background as the
gradient that we have.
We can set the gravity of our text here to bottom, which
means that the text that we've put inside the title is drawn
at the bottom of the image.
This is all we have down here, so we can have a place.
All of this.
The RelativeLayout, you lay everything out.
The simple FrameLayout, if you have an ImageView, and you
have a TextView on top.
And the TextView contains the background
and the entire text.
But you're saying, look, this title, this headline actually
contains two different or three different
types of text styles.
We have our main headline, and then some
smaller text down below.
To do that, we have to use TextAppearance Spannables.
And we have one simple TextView, but you can style
different parts of your TextView differently.
So here we have these TextAppearanceSpan objects.
And you're loading each of them in with a different
TextAppearance style that we have to find in XML.
That's just a normal style.
We're loading this in.
And then when we set up the views, if we set the title,
this is where we are loading the text here.
So we are using a SpannableString to do this.
And a SpannableString allows you to set a text, and then
you can apply different spannables
for parts of a text.
So in our case here, the first thing we do is we compile our
text we want to display, including the [INAUDIBLE]
characters.
And then we apply each of the different texts appearances to
a part of this string.
In this case, here we have the title appearance, we have the
[? by-text ?]
underneath that, and then we have the
AuthorAppearance as well.
We basically just specify the start and end characters.
It's a normal character count.
So once we've done that, we basically set the
SpannableString to our TextView using the
SpannableBuffer type, so that it gets applied properly.
We keep our setMovementMethod, and we can remove our old way
of setting the title.
And if you start our application again, you will
see that it basically looks exactly the same, but we have
much, much fewer views than what we had before, simply by
using TextAppearance spannables and combining them
together into one single TextView.
So let's see what it looks like here.
And as you can see, it looks basically identical to what we
had before.
But our layout hierarchy is much, much simpler.
So I really hope you're going to try HierarchyView in your
own application and see what it looks like and how you can
optimize your application to make it
perform much, much better.