Welcome back in this video, we're going to prepared this custom UI that you see here, and this will
be used for the timer because I want the circles to behave like a timer where they are like a clock
basically getting less and less filled, and therefore we will need to use a bunch of custom UI elements.
OK, so we're going to build them and we've seen how to build those before, right?
It's oval shaped items, so we can really reuse a bunch of that stuff.
You can try to build this yourself.
It will be a little tricky, but I will just show you how it's done, OK?
So we have this little text here and then we have the circle.
And by the way, I decided to then in the end, not use a relative layout for the screen because otherwise
where you're going to run into and not super efficient user interface.
So we're going to use a constraint layout instead for this activity.
So let's go over to activity exercise and to make sure that we are using a constraint layout here.
So constraint and layout like so OK, according accordingly, the toolbar, of course, we'll need to
know where it is positioned, relatively speaking.
So let's add the constraints and it just needs one constraint and that is top to top off.
OK, so top to top of the parents, OK, so the toolbar will be at the top, at the very top.
And then what I'm going to add is also going to be a text you.
OK, so this text you will just say get ready for it should wrap its content in both directions.
OK, I'm going to give it an ID.
I'm going to give it the idea of text view title.
And then the text itself should be set to get ready for, and you could, of course, go ahead and create
a text item out of it inside of your text example, then the text size.
I'm going to use 22 again, and this is the default button text size that I'm using here.
So it's not really that button, but you could use the same dimension or you could just enter 22 S.P.
here.
That's fine as well.
Then the color should be excellent.
So the text color to be precise.
Accent color, which is our green.
The screen here.
The style should be bold.
And I mean, of course, the textile, so textile should be built.
OK, so now of course, we need to add the constraints and the constraints that we're going to need
are going to be towards the left and right.
So I want this to be positioned accordingly to the left and right of the parent.
And then this item, so this text you if you look at it, should be to the top of this other item.
So let's create this other item, and this will be a frame layout which will contain a bunch of individual
items.
So progress bar a linear layout with the text you.
OK, so let's go ahead and create that here.
Frame layout will have 100 dpi and its width and 100 dpi and its height.
I'm going to add a little bit of margin towards the top so that it has a distance of 10 density pixels
towards the top.
And as the background, I'm going to create a new drobo.
So adorable.
I'm going to use it.
Well, actually, I think we have this one already.
So the circular color accent border, we can actually use this one, which is this circle.
You see, it's the same circle as we had here.
Only that it looks thicker in comparison, but it is the same thickness, it's five deep.
And then we need to add the constraints, so the bottom to bottom of the parent.
And then the start and end of to parent as well.
So similar to what we had here.
But then what's important is the top to bottom of the toolbar exercise.
OK.
Now, this piece here, this text, you, however, should be on top of the frame layout.
So what we can do is we can add a top to bottom of this frame layout here, so the frame layout will,
then you need an ID, of course.
So I'm going to call this wonderful progress bar, OK, AFL setting for Frimley, our progress bar.
So here it will be the Pro Progress Bar.
OK, so this frame layout, as you know, frame layouts are used for items that have items on top of
each other.
So what I'm going to use here is going to be a progress bar and then a linear layout with a text.
You?
OK, so that's quite a mouthful, but let's just get started with it.
So first of all, let's use the progress bar.
OK, here, progress bar, it needs a whiff, of course, and I'm going to use 100 dpi and the height
of one or two dpi as well.
Then I'm going to give it an ID, so it will be progress bar.
The style I'm going to use a style that is already predefined, so in the Android folder, so here I
accidentally ran it.
So here in Android Colon attribute, there is a progress bar style horizontal.
That's the one that I want to use.
It's just a style for a progress bar.
And the Progress Bar shows your progress, right?
And then it should have a lay out gravity of center so that they should be centered in the background.
Well, therefore we're going to need to create an extra circle.
I'm going to set the maximum value of this progress bar to 10 and to progress to 100 percent.
And then I want to have a rotation of minus 90 degrees.
And why is that?
Well, that's because usually a progress bar starts like it here, for example, on the right hand side
and it goes like this, OK, so it would go all the way in a circle.
But I wanted to start at the top.
OK, I wanted to start here at the top, so I need to turn it by 90 degrees or by a quarter to start
at the top.
That's what this rotation minus 90 will do for me.
And I will need a couple more settings for this progress bar, but for them to be available, I need
to create a couple of more troubles here.
OK, so first of all, let me create a new draw bill called Circular Progress on the score bar and it
will use a loyalist.
OK.
So let me set that up.
The later list of multiple items, OK, so the first item will be a shape.
And this shape will have an inner radius ratio of two point seven.
It will have the shape of a ring, so not just an oval, but an actual ring.
I wanted to have a thickness ratio of 50 percent and the use level value will be set to true.
OK, and now if you want to know about any of this stuff, you should check out the documentation.
So here we are inside of a durable resource, right?
And here you can find what a lay list, for example, is you can see the syntax, the elements with
each element does.
So item defines a drawback to place in the large rubble in a position defined by its attributes must
be a child of a lay list.
Element accepts child bitmap elements so you can use bitmaps in there.
But what we are interested in is in particular the, for example, the use level.
All right.
So here you search for use level.
And you see what it does, so a boolean true, if this is used as a level less trouble.
This should normally be false or U-shaped may not appear.
And then if this is used as a level, let's draw Bill.
OK, what is the level the strobl?
Well, you can read through the details.
And Russo says managers a number of ultimate troubles, each assigned to maximum numeric value and so
forth.
So we're going to work with values and numbers, and we're going to make a a timer, so to speak.
That's the idea behind it.
Right inside of here, I want to display a number, and that's why I need all of this stuff.
You can also see what the inner radius ratio is, what the thickness ratio is, what the thickness is
and so forth, because these are the values that I am using in my project here, right?
So thickness ratio of 50 percent, if you look at it, it says the thickness of the ring expresses as
a ratio of the rings with, for instance, the thickness ratio to then the thickness equals to the rings
with divided by two.
OK.
And then you have the inner radius ratio, the radius for the inner part of the ring expresses the ratio
of the rooms where, for instance, a radio show of five then in a radius equals the rinks with divided
by five.
And now what I want to use inside of this shape is going to be a solid.
Color, accent, background, so our colour, accent, background, like so.
All right.
And this is our secret of progress bar.
This will just show the progress.
So how far we are in the progress?
At least that's the you I want to use for it.
And now let's go ahead and create a circle of progress bar gray.
So I'm just going to copy that and call it gray, like so my great example.
And now the difference here will just be that we're going to use a different color.
So I'm just going to use a gray like gray color.
I believe it was so here at color.
Well, the thing is, the I.D. doesn't help me here, so I'm just going to hard code the value in here,
the 47.
OK, so that's the rest is pretty much the same.
We still have a little list with an item in the shape, we're currently not using it, however, and
then we just need to have the accent back front.
OK, so we have the X and border and rebel background, but we need to have the accent background as
well, and we'll see once we are implementing it how all of this comes together.
So item circular color accent background.
So I'm going to call this one.
And this will just be a shape.
So let's replace this with shape and the shape will be a circle.
So let's use Oval once again here.
So Shape Oval as well as a solid background color, so solid Android color, which will be to accept
color and here accent like so.
OK, so this will create this solid background color, which we have in the center.
OK, so we have the center, we have the progress bar and we have another circle.
And now let me set up the rest of our exercise example file.
So activity exercise, so we have the progress bar here, but we will also need to have the text view
in the middle.
OK, so in order to set it up, I'm going to add a linear layout here and let me add the linear layout.
The linear layout will have a width of 60 density pixels and height of 60 density pixels, and then
I wanted to have a layer of gravity towards the center, so this should also be in the center of the
screen.
As the background, I'm going to use the item circular accent, background and as the gravity itself,
I want to use center as well.
So the layout and side of it inside of it should be centered.
But linear layout itself should also be centered.
And then I'm going to use a text view in here, which will then display the actual time that is running.
So here of rap content was both directions, and I need to have an ID, which I'm going to call text
view timer because I'm going to have to overwrite this value constantly.
So what else do we need in here?
Well, I'm just going to use a white color, a bold textile, a size of 25.
This text of 10 as the tools text so that we can see how this is going to look like.
And now we don't have a background for our progress bar yet.
So let's add that.
So I'm going to set the background to be our circular progress grey that we had set up.
And then the progress roll bill.
This one will be.
The Progress Bar.
OK, so the circular progress bar and then there is a setting that I'm going to have to set and that
is to in in determinate.
And I'm going to set that to false.
And that is because we know the duration of our progress bar, so use in determinate mode for the Progress
Bar when you do not know how long an operation will take.
Well, in our case, we know how long an operation will take.
It will either take 10 seconds or 30 seconds, which is why we set to terminate setting to false.
OK.
So indeterminate setting to false says what I mean.
All right, we're setting it false because we know how long it's going to take.
And now, if we look at this design, we can see that we get this design here.
So let me run this real quick.
And we see we don't have the exact same design because to get ready for text is underneath.
So that's definitely something that we can set up here for our text view.
So top to bottom of a progress bar.
And if we set that to bottom to.
Top of progress bar.
We'll see that now it will be on top of it.
OK, so that's pretty much it for this video, it was quite an effort, as you see, to set up this
custom UI, but that's just how it is.
Sometimes if a designer comes to you and says, I want this to look exactly like this, well, then
you will work on it and try to make it look exactly like they wanted it to.
And that's basically one way of creating this double circle behavior.
And later on, you will see how the time will pass inside of it.
OK.
And that's it for this video.
See you in the next one.