Hi, so let's keep working on the main page of our app.
So the user enters some quotes and as you
know, this label here, the display, it's not optimized.
So what we need to do is, as you see, we need
to wrap the text inside the borders of the app, so that
if the device where the app is running is like that, the
text will show normally as it shows right now.
But if the mobile, if the device is
mobile phone, it will look like this.
And so you want to wrap the text inside this area
here, so that the user can see the entire quote.
[No Audio]
So we are in this Login screen success page
and we are talking about the text_size attribute.
So let's change the text_size to
self.width and self.height.
What is self.width and what is self.height?
self.width, self refers to the current widget.
So self is actually the Label and
width, is the width of the Label.
Height is the height of the Label.
So the text will get the width and
the height of the label where it resides,
which means let me save the kivy file.
[No Audio]
So every widget here, has a size and so Label
is one of the five widgets Label, you have Button,
you have TextInput Label and you have this RelativeLayout
and the Label is taking 20% here.
It's invisible, but if it had a background
like this button, it would look like the
TextInput size and this Button size.
So it's somewhere in here.
[No Audio]
So that's the width and that's the
height, more or less of the Label.
So if I, say sad, let's try to get a long quote.
And, so this is what we get now.
So it's looking better.
[No Audio]
If we squeeze, you see the text is
wrapping inside the Label height and Label width.
So you can see that,
now when, I squeeze the window, I resize it.
The Label is dynamically resized and so
is the Button and the TextInput.
And so the text size will also reflect the size
of the Label, as you can see in here.
But this is not yet enough.
So how about giving the text
more area, to stretch vertically.
If you want to do that, you want to set,
[Author Typing]
the text_size height to None. So you
don't want it to be related to the Label.
So if you save that, try the code,
[Author Typing]
you see now the height of the text, is
greater than the height of the Label.
The Label is somewhere here.
So let me resize it again.
So the Label height is this high, so it's somewhere here
and the text height is greater than the Label height.
So this is better, but we can see the text, but obviously the text
is overlying, it's on top of other widgets.
So that's not ideal yet, of course.
So what can we do here?
Well, what I'm thinking is, we need to find
a way to change the height of the Label,
to match the height of the text.
So in this case, that would be like having
more of this black area here of the Label.
So having the Label up to here and
having the other widgets, squeezed above the Label.
So let's change the height of the Label,
to fit the height of the text.
How can we do that?
Well, first of all, we need the label y.
So the height of the label, we need
that to ignore the size_hinting, which means,
let me show you, what that means.
[Author Typing]
Let me try another quote.
So what that means is that, the Label height, it's
not anymore 20% of the GridLayout, but it has
a fixed size of 100 pixels, by default.
So by default, the height of
the label now is 100 pixels.
And, so that's the same as height 100.
If I run this now, we're going to get the
same exact output, but if you change this to 400,
so the height of the Label, this is the height
attribute of the Label, not of the text.
So if you see now,
[No Audio]
the label is quite bigger,
[No Audio]
let's say sad.
So now the text has a lot of space,
[No Audio]
so you squeeze it and you can see the text.
But this is not what we want.
We said we want the height to be dynamic, we want
the height to be reflecting the height of the text.
So that when we have the window stretched like
this, we want these buttons to be down here
and we want the Label to be smaller.
So the way to do that is, instead of having a fixed
size for the height, we want to use self.texture_size.
And we get the second element
of that texture_size tuple.
So texture_size is a tuple, which contains two items.
The first item is the width of the text.
So it's a dynamic value.
It's going to change when you resize the window.
And so the first value is the
width and the second is the height.
So with this index, we access
the second element of the tuple.
If we wanted the first element, we would use zero here.
We want the second, which is the height,
so save that.
[No Audio]
So you see now,
[No Audio]
the Label is dynamic.
So it's changing its size, depending on the size of the text.
And we can see the entire text.
And when we stretch the window like that,
we don't have any excessive blank area here,
which would be the Label body.
[No Audio]
However, this is not ideal, of course.
And there's one more thing left.
What we can do here, what we need to do is,
[No Audio]
to have some space for the ScrollView widget and the Label,
together with its attributes.
I have to indent it with tab, to have
it as a child of the ScrollView.
So, ScrollView now, is at the same level with the other widgets
button TextInput, the other Label and so on.
So save that kivy file now, execute
[No Audio]
happy and, so you can see a scroller there.
[No Audio]
sad, Enlighten me.
So it's working with every kind of text.
[No Audio]
When the text is short, there is no scrolling and
when the text is longer, there is a scrolling automatically,
so you can go to the end of the text.
And so that is how you build a ScrollView,
which has a Label and Label has some text inside.
I hope you enjoyed it and I'll
see you in the next video.