Welcome back and this video, we are going to add features that we see here, or at least this element
that we can see here, which consists of two rings and one circle, and they are custom made.
So the idea is that the inner ring will be filled depending on how much time has passed in the timer.
So if the time was 10 seconds, then a tenth of the ring will be passing every second or it will be
unfiled, so to speak, every second.
And that's something that I want to achieve.
And in order to do so, we will need to create a bunch of custom UI elements.
So, for example, we have this item, circular custom color that we can reuse.
Because it looks very similar, so the circle that we have there looks very similar to the one that
we have here.
So we can at least reduce the shapes and stuff.
So what I'm going to start with is to create a new drawable resource file, which I'm going to call
item underscore circular color, accent, background.
And The Selecter will be a shape.
Now, the shape that I want to use is oval, so I'm just going to create the shape property here, setting
it to oval, and then I want to have a solid background color, which will be my color.
Accent and then I'll need two more drawable here, one of them will be circular.
Underscore progress on CORBA and the root element will be a loyalest, so Flavorist is used if you want
to layer multiple XML files on top of each other or multiple drawable on top of each other, because
the idea is that we have a great ring, which is in the background and in the foreground we have our
green ring and once the timer runs, the green ring will be reduced, but the gray ring will still be
in the background.
So it will create this kind of effect where we talk, where it seems that the green is losing its color
and turning into gray.
So a little additional feature that looks pretty cool and really allows us to customize the whole thing
to our liking.
And I'm just going to create an item in here which will again be a shape.
So I want to have a shape which has an inner radius.
Well, if it gives me the shape directly, I want to have a ring, so that's the shape of it, then
the inner radius ratio should be two point seven.
So that's just the inner radius of the radius of the inner part of the ring, then we have a thickness
ratio so you can assign the thickness and I want to have a thickness ratio of 50 and use a level.
I'm going to set that to Drew.
So that's going to be my shape, but in my shape, I want to also have a background color, which will
be my great color.
So here I'm going to use color again.
Well, this is the progress bar.
So this should not be the great color, but this should be the exact color, which is green.
But then we should have another circular progress bar, which will be the background to what, a gray
bar.
Then we will have to set the color to be gray there.
If you want to know more about all of the different parameters that I'm using, you can, of course,
check out the documentation.
You can see trouble, resource use level a boolean.
True, if this is used as a level Straubel, the should normally be false or may not appear well.
In our case, it will still appear.
And you can check out more about Level al-Istrabadi also in the documentation with the couple in version
here.
For example, if you don't want to look at the Java version.
All right.
So these are the properties that we have here.
Next, we can create another drawable, which will be a circular.
Progress, and I'm just going to call this one Grey, so it should be a progress bar, Gray, you can
call it how you want, and this one should also have an legalist.
And it's going to be pretty much the same as our progress bar, so I'm just going to copy this item
and put it in here and the only difference will be the color.
So I'm just going to have a hardcoded color here, which will be DeFore de seven, which is a great
color.
So this light gray here, of course, you can export that created in a colors XML, create a new color
for it and so forth.
But I'm just going to keep it simple for now.
But you know what the best practice is, right, to go ahead and create the color externally already.
Now that we have all of that prepared, it's time to actually show it.
And where do we show it?
Well, in the activity exercise.
So that's where we should display all of those troubles that we created.
But also, we just want to have a linear layout which is going to do everything around it.
Right.
So which is going to keep everything tidy.
So the linear layout should match the parent in both directions.
And I'm going to give it an ID.
Which will be out of rest view.
So this is outstanding for linear layout.
I want this layout to be just underneath the toolbar exercise activity, so underneath this toolbar
here, and if I want to make this sure, I can use this below layout, below property.
And I could just say, OK, it should be underneath the toolbar exercise activity, then the gravity
will be centered.
So I want this literally to be centered, vertically oriented.
So orientation vertical and it should be visible.
So I'm setting this visibility property to visible because I want to have two linear layouts, one of
them being active when we are in the rest of you and the other one being active when we are in the exercise
view.
So the idea behind this is that we don't have to create separate activities and it's going to jump between
those activities.
But just that the one activity that we have will have both the rescue and also the exercise view.
All right.
So this is going to be the rest of you in there.
I want to have a TextView and in there a frame layout with a bunch of stuff.
So what I'm going to do is I'm going to paste it in here from my prepared code.
Why is that?
Well, because I don't want to bore you with all of that entering all of the properties here.
So I'm going to go through them real quick because otherwise you're going to fall off your chair.
Probably.
So we have a TextView in here, which is just going to say get ready for and then the exercise that
should come up.
I use the color X here, which is the green color for the text, has a 22 ESPE and it should wrap its
contents.
So it should only be as wide and high as it requires for the text to appear correctly.
Then the text should be bold.
But then we have a frame layout in there, which should be 100 times 100 pixels, and we have a little
margin towards the top of ten density pixels.
And here the background should be our item.
Circular color.
Excellent.
And if you paste it in, then it sometimes doesn't work correctly.
So I'm just going to use here the one that I had in my travels here items circular.
Color, background, accent, color, background, so this one here, then we have a progress bar,
so a progress bar is a bar which can have a certain progress and is indicating how far we are within
a certain process.
So let's say there is a five step process, then you would have five steps in the progress bar and each
time you finish a step, 20 percent would be filled.
Now, in our case, let's say we have 10 seconds, then each second the progress bar should go down
by one.
Now the progress bar is going to have its own ID because we want to access it and we want to give it
the current progress, then it needs to have a certain style.
And we are going to use the progress bar style horizontal here and then the width.
And how should be 100 density pixels to gravity should be centered and the background should be our
circle of progress.
Great that we created.
So our XML file, which we just created.
All right.
So this one here which has the shape of a ring.
All right.
So we want the background to be the shape of a ring.
And let's go back to our personnel file here then, and maybe I can do it like this, then we set the
indeterminate to false.
Why is that?
Well, let's look at it in determinate mode for progress bar or use it when you do not know how long
an operation will take.
All right.
But we know how long the process will take.
It will either take 10 seconds or 30 seconds when we can define it directly.
We want to see the difference between the two.
You can always check out progress and activity here.
Well, I think the documentation is great in this regard.
So you can always check out the documentation if you want to know more about it.
So then what I'm doing is I set the maximum value to.
So we have ten steps, so to speak.
Then we have the progress to be 100.
So it's full 100 percent.
So to say and to progress drawable should be our progress bar, which is our progress bar that we created
here, which is also a ring and it has a certain thickness and the radius and so forth.
So this is pretty much just the.
Progress indicator as a ring, that will make a lot more sense once the timer is running.
So let's go back to this and you can see I'm rotating this by minus 90 degrees in order to just look
the way I wanted, because usually it would start at another point.
But I want to rotate it by 90 degrees so that it starts at the top and goes towards the left.
So counterclockwise.
All right.
So it's like a clock, but it's going to go counterclockwise.
That's the idea.
That's why I have all of these values.
Then we have a linear layout with a certain with height and so forth.
And then I have a circle in the middle, which is just this green circle that we have here.
OK.
And there we have a little text you, which I want to access via TV timer, and that will then shows
no.
So it will show, OK, ten, nine, eight and so forth.
So we set the text to ten in this case.
And that's it.
So, of course, it has a certain color and I'm going to use white.
There's a certain text size and style, but everything else should be rather clearer, I say.
And now that we have that, we can see if this is appearing correctly.
So if it's going to display in our app and going to look good.
So there we are.
Let's press the start key and you could see get ready for and we have this green circle so far.
All right.
So it's not perfect yet.
Let's see how we can fix it.
And, well, for now, I'm just going to make this white so we can just go to the relative layout to
the highest level and make the background of it white.
Then we will have a white background there and color.
And I'm just going to use color white here.
And if you run it, the skin.
And we click on Start, we can see that now we have this white background, but we don't have the rings
yet as they are here.
So let's look into this.
And one of the steps could be that I said use level two true for our progress.
Great.
So the progress bar should be true, but the progress great should be false.
All right.
So so we want the background to the youth level set to falls.
So this year, progress great.
Set us falls.
And if you run this, we already see a slight difference here.
So we see this little outline.
You can barely see it probably on the screen, but it's there.
And funnily enough, it has to be, of course, this frame layout that we're talking about.
So we have this layered with layered high margin top and then this background.
And here, uh, there was something in there that I manually changed.
But then we have multiple names here.
And the problem is they are super long, so you can play around with them.
You could see here we have background and we have excellent border and I need to the border one.
So we need to use the border one for our frame layout because that should be the background of it.
If we look at it, that's our exit border, which has a stroke and not just a solid, so excellent border.
You can see here we have a stroke in there, which is this line that we want to have.
So if we run this again, then we should see that we have a wide background with a green stroke, which
has the shape of an oval, which means of a ring.
So we should be able to see it starts and we are so we can see we have two rings in the middle.
We have a circle.
And now, of course, we want to have a timer that will run, and that's what we will implement in the
next video.
So see you there.