Welcome back in this video, we're going to built this part of the user interface for our seven minute
workout app and the difficult part here by will be to create this start button.
And the idea behind this is that if a designer comes to you and says, OK, this is how I want the application
to look like it, it's not always easy to convert that into an application, just using the standard
user interface that you have available.
And therefore, we are going to see how we can build unique buttons or very customized buttons, such
as this one that are treated like a button.
But at the same time, you can see once I click on it, it is only highlighting the part that is inside
of it.
So it really is treating it like a button, but only has the appearance before decides that we want
it.
It's still a squared button.
So if I click here, you see it's still going to be a square button, but at least the user interface
will be really representing exactly what we want.
So let's get started.
Therefore, let's go ahead and create a new project, and I'm going to use an empty activity here.
Going to call it this one seven minute workout.
And everything else can stay the same package name is fine, the language and the minimum SDK is great,
so let's get started.
All right, so let's get started with the main XML file here, activity main XML.
Currently, we only have this text in there, and what we're going to require is going to be this image
view here at the top.
And then this one will be a text which will be on top of a button.
OK, so if we have things which are layered on top of each other, what do we need to use?
Well, I hope you'll recall from the last chapter where we need to use a frame layout.
All right, so let's go ahead and build this user interface.
I'm going to start with an image view here, which will contain the image.
OK, so I'm going to match the parent in terms of width and height.
I'm going to define as 220 dead pixels.
OK, so then as we are inside of a constraint layout, we need to add the constraints.
So I'm going to add top to top of the parent.
OK, so it should be at the top of the parent or its top.
The image view should be really like, you see, it's at the top of it and then to the bottom of it,
I want to have a frame layout.
OK, so here I'm going to add a bottom to top off bottom to top off I.D. and I'm going to call it one
f and start, OK, if L stands for frame layout.
So let's go ahead and create a frame layout, which will have a width of 150 density pixels and a height
of one and 50 density pixels.
And then I will need to accordingly add to constraints.
So constraint, I see this is not the layout margin that I want, but constraint.
Or let's call it top to top of this one will be parent.
Then.
And then let's add the constraints to this frame layout as well.
So it will need an ID, so let's give it the idea of a false start.
Then this error will disappear and then this frame layout can go to the bottom of our image view.
So the top to bottom of the image view and we can give it an ID, I.D., I.D. My image view.
OK, so it will be to the bottom of my image.
You like so.
OK, so this frame layout, of course, needs to have content as well.
It also needs to know whether it's going to be to the what's going to be to the left and right.
So I'm going to add start to start of parent and end to end of parent.
So it should be constrained to the sites.
You can see that here now.
It has connected directly to the image view, but then it has constraints to the site.
OK, inside of this frame layout, I want to have a text view, OK, so let me add a texture here with
content and content.
So it should only take as much space as it really needs.
And then I'm going to add a couple of settings here.
So the text, the color, text size and the text style, OK, and the color should be color primary,
and it's just going to use the default color primary for now, even though we can use this moment to
go over to our.
Values here and then create a colored primary in here.
OK, so here let's go ahead and use those colors, so I'm going to use those three colors here.
Color, primary, color, primary, dark in color, excellent.
OK, so this will be the values you can just copy them and use them for your own application.
As a chic colored primary, dark, I'm basically using the same as the colored primary, and then we
can use this color primary here.
I just created, which will be this great color, so that will be the color that I want to use for that
text.
And now what I also would like to add is a padding between the image or any content and the edge of
my screen.
And this should be consistent throughout the application.
And if you want to have a consistent user interface where, for example, you say, OK, I want to have
a specific text size for all buttons, I want to have a specific padding for all screens and so forth.
What you can do is you can go ahead and use a Diamond's file, so let's go ahead and create a new values
resource file.
I'm going to call it DeMent's, which stands for dimensions.
OK, it's the shortcut version.
And in here, we can now go ahead and create the dimensions for our application.
And what I'm going to do is here, I'm going to say that's the dimension will have the name of main
screen main layout adding, OK, this is a very specific name, but it really specifies what we're talking
about.
And you could also just call it screen layout padding.
And then you would always use that dimension.
So how can we now use this dimension?
Well, let's go over to our main activity here, and I'm going to add this padding at the very top level.
I'm going to add it to the constraint layout here at the top.
OK, so let's set the padding to be and we had the main screen main layout padding they mentioned that
we created.
So now it's going to use this dimension file and it's going to use this particular dimension that we
just created.
So it's called diamond, which is the dimension that we can now use throughout our application.
This helps you to stay consistent with your UI.
OK, now you could go ahead and of course, replace all of the hard coded values here.
OK, so here.
Text size 22 aspe you could go ahead and add to them.
Mention here Diemen with the name, uh, default text size.
Buttons, power button, text size, maybe you could button Texas button.
Text size.
OK, and then you just say, OK, it should be 22 ESP, and now here you replace it with Damon and here
default button, text us.
And if you want to jump directly to this file, you can hold the control key.
Click into it and it will directly jump to Diamond's file with the dimension and the name that you clicked
on.
All right, so now let's take care of this button here, OK, because I want to have this button.
And in order to get this button, we will need to create extra draw for that.
OK, so let me create a new draw bill.
Right click Draw a resource file and it will be called Item Circular Color.
Excellent border.
OK, so this will be specifically the border and the root element will be a shape because it should
be a shape.
All right, so what do I want to have in here?
Well, basically, the shape should be an oval shape.
OK.
Therefore, we can just add that in here saying.
Shape Oval.
All right, we saw that before what we used to shape rectangular and so forth.
And then don't want to have a green stroke around it with a white background.
So we say the width of the stroke should be five dpi, for example, and the color should be our accent
color.
So color accent, which is this green color that we defined earlier?
And then I want to have a solid background.
So just add solid in here with the color of white.
OK, so yeah, I'm just going to use white.
And now you see that this is basically the oval item that we get now, you could of course say what
kind of size you want to have here specifically, but you can also just assign it to a button and then
it will take the floor to even not just a button, but in our particular case to a frame layout, and
it will take its dimensions then to fit perfectly.
OK, so this was our item circular color and border.
But then I also want to have another one, which is going to have a report background.
So once we click on the button, you see it creates this ripple effect or this grayish effect.
So let's go ahead and create another draw bill here, and I'm going to call this one item color, accent
border ripple.
Background Super long name, but basically, that's what it is.
And the root element here will be a ripple.
All right.
So let's use Ripple.
And now the ripple needs settings, otherwise it doesn't work.
So let's, first of all, add a color and I'm going to use a white light gray.
OK, so here it will be.
C for C for C for.
OK.
And now we can, of course, go ahead and take this color and edit in here as well as a color.
And we can call it color.
Name a light gray like so and use this value and burn accordingly.
Use it here.
OK, so here color light gray.
Is this one?
OK, that's how you can create it.
Of course, you could have articulated it from here as well.
And now what I need to have here is the same solid backgrounds with the circular item that we just created
earlier.
So let me show you how that works.
So an item with an I.D. and with an I.D. of.
At Android I.D. and I'm going to call this one mask.
OK, and then I want to assign a shape to it, which will be shape oval.
So we get again this oval effect.
And a solid background, so I'm going to use white again here as the background.
And then I add another item in here, which we'll just use to draw all that we just created, which
was our circular color.
Exit border like so.
OK, so what we're basically creating now is this as the background and then when we click on it, it
will create this ripple effect, which will make it great.
Now we can also go into our XML file and for every image view, for example, there is something called
content description, right?
And you can add that in order to make it more descriptive what this image is about, so we could call
this one starred image, for example, so starred image.
And if you want to, you can create a string resource from it.
OK, I'm going to call it while this one here.
Just image and I'm just going to call it image, right?
So this will be the start.
Well, whenever I'm using image as the ID for the resource, it's going to just read out started image
for visually impaired people.
So people who cannot read they will be allowed or able to read this content description.
So describes what this image is about.
OK, you can, of course, be more descriptive here.
So now this image, of course, needs a actual image, so an image resource.
So an S.R. See, that's how we can assign an image resource.
And what I'm going to do here is I'm just going to reuse my main image or image main page.
This one here you can download the project and then just use the same image, or you can use your own
image if you feel like it.
OK, and now let's actually justice.
And here IMG Main Page is now made available.
And now, if you look at our design discovery, the design we have, we have this frame layout that
has this size here and we have the start text inside of it.
So what I want to do instead now is I want to assign the XML files that we just created.
So in my particular case?
I'm going to use the Ripple color, so here background.
And the ripple.
One that created such item, Color X and Porter Ripl background.
OK, this is the trouble that I want to use now and.
It will create this effect that you see here, so we have this button with the start text in there.
And while it's not really a button, but it's going to be treated like a button because it has an idea,
we can add another listener to it and then we can press start.
So we have basically created a button like behavior with a surrounded circle, and now once we click
on it, it will behave as we just saw here in our prepared applications.
So let's now let's go ahead and actually implemented the code so that we can try it out in our project.
Therefore, we need to go to our main activity because so far we have not implemented any code, so
any functionality would just add at the user interface.
So your main activity smell?
I'm going to, first of all, create an access point for my start button, which is a frame layout.
OK, it's not really a button, so we need to have this import to friendly widget, and I'm going to
find it via its ID, find few by ideas that I'd ever start.
And now we can go ahead and use this button to set an on click listener.
This one here in particular, I'm just going to use a toast to say, here we will start the exercise.
So very simple toast.
Nothing too complicated, okay.
At this point.
Let's go ahead and test this application.
And you see, once I hold press on it, you see it generates this great effect where we have this great
background, which is pretty cool.
So it's only as you see in the size of the actual user interface, it's not outside.
So even though this frame layout is a square, it's still only creating this background.
This could take effect for the actual circle.
So for the actual UI item, even though, of course, as I stated, you can click it outside here because
as I said, this is going to be a square.
OK, so that's the starting point of our little application.
You can, of course, see that we are using a constraint layout, so we need to be aware of what is
on top of what.
So for example, the frame layout is at the left and at the right going towards the parents.
So it's going to have the constraints towards the sides here you see towards the right and left, and
that is connected directly to this seven minute workout app thingy where we say top to bottom of image
view, which is this image you?
All right.
So that's it for this video.
See you in the next one.