We'll come back.
Let's go ahead and create a new project, because we are going to create this seven minute workout and
this whole chapter and of course, we need a new project for that.
I'm going to use an empty activity here and I'm going to call this one seven minute workout.
And yeah, we can leave the rest as it is minimum STK, I'm going to use API 21, which is going to
be fine for most users.
It says 85 percent of devices, but that's really yeah.
Also, considering all of the hard core old school devices which are still used and I think this should
still be fine.
So let's use API 21 here.
And once the project is loaded, let's have a look at what we want to build.
So we're going to build parts of that.
So this image here at the top, the start button, and that's it for now.
But the start button is going to be a custom button that we create.
So it's not going to be an actual button, but it will be a linear layout, which we make a button for
which we use in order to create a button.
So you'll see how to create custom buttons in this video.
And therefore, what we will need is.
We need to start off with our general activity, main XML file, because here I don't need this whole
world to text you.
I'm going to get rid of that.
But inside of my constraint layout, I will go ahead and add some more stuff to it.
So here I'm going to.
Close things up and add something inside of our constrained layout.
All right, so I'm going to start with a linear layout and it will match its parents and within that
linear layout, I want to have some other stuff in there.
All right.
So I want to have the image you, for example, and it will look like this, so.
Image view.
Now, this image of you will contain a layout and actually let's do it like this image of you.
The width should be to match parents and the height should be 220 density pixels for now and then I
want to have a constant description, content description, which I'm just going to call image for now.
And then as the source, I want to use an image from my drawable folder.
Now, the thing is, I have not implemented that image yet, so we need to drag it into our project.
You will find it in the file that is attached to this video.
So I'm just going to drag it into my troubles folder here.
Image, main page.
So call it and let's just.
Added to our project, now we can use this adorable and let's see here, image, main page.
All right.
And of course, we need to close our image of you.
And I'm going to do it with a slash and closing bracket here.
Now, that is just the image, and if we look at our activity, you can see that this image of you is
in there.
The constraints aren't there yet.
So it's not super happy.
And well, it's not complaining here, but we might need to add some more constraints just to be sure.
So I'm just going to add, for example, the gravity.
To my linear layout here, and I'm going to say that it's going to be vertical, so the orientation
should be vertical and then we can add a little bit of padding to our layout, because if we look at
our image here, you can see it's very close to the border here in the right hand side as well.
So maybe if we added a little padding, it's going to look a little better.
So let's say we have padding here, padding of five density pixels.
Now, of course, we can use it like that where we coach our values into our XML file here, activity
in XML.
But we can also create a new values XML file, which I'm just going to call Dimensions or DeMetz, which
stands for Dimensions.
All right.
And in here, I want to add all of my dimensions.
And we have several dimensions.
For example, the height.
So everything where we assigned a fixed value, for example, here, the density pixel for our layout
height, then for our padding.
And we will have some more, for example, the height of the button that we want to create.
So I'm just going to create those in here.
And instead of typing everything in manually, I'm just going to drag it in there or paste it in there.
So you're not super bored with this.
So you can see we have this main screen image height, which is 220 pixels.
Then we have the main screen main layout pairing with the start button size, which should be one on
fifty density pixels, then a little margin towards the top.
So there is a distance between our button and our image and then the text size of that button is also
defined in here.
So now what we can do is instead of having a hard coded value in here, we can use at dimensions it
I men and this one will be the padding.
So the layout putting.
Then instead of having the image view to 28 pixels, I'm going to say.
Main screen image height.
All right, so this is the image for you, but below that, we want to have the bottom.
Now, of course, we could go ahead and create a button, but I want to do it manually.
I want to create my own type of button.
Therefore, I create a linear layout in here, and it needs a width, which should be at Dimensions
Start button.
Size and the height should also be dimension start button size.
All right, now, this linear layout will need to have an element inside of it, so I'm going to add
a little text view inside of my linear layout.
So text view.
Now, this one will need a width as well, and this time we're going to use Øvrebø content because it
should only take as much space as it really requires.
Right then there's linear layout that we created here, needs a little more information.
So just having the height and with is not going to be enough.
I also want to have a little distance towards the top, which is this margin that I was talking about
earlier on.
Right.
So margin top should be my add dimension and that we had here a margin top.
So start button, margin, top dimension.
If we look at the dimensions, that's the one that we have here.
So start putting margin top.
All right.
The next thing is the gravity.
I want to center this image.
So I'm going to say gravity should be center.
And it will need a background.
So we will need to create a background for it, for our linear layout, but we will do that later on.
For now, what I want to add is, of course, an ID, because in the end, this is going to be our button.
So it's going to be a replacement for a button.
And I'm just going to call this one start, which stands for Linear Layout Start.
Now we can design our TextView and our TextView needs a little text.
And here we can, of course, go ahead and create a text or we can.
Yeah, we cannot call it in here or we can go ahead and added to our strength.
So now if we go to our strengths, we can add a bunch of resources in here.
So I'm going to create a new string with the name of image.
Which should just say image.
Then another string with the name of Astar Underscore Start, which should just start with a capital.
Better or with a bunch of capital letters, so now we actually can use this description that we had
before where we manually entered this kind of description for our imagery, where we entered image,
and now we can replace this with that string image.
The idea behind this is that if somebody taps on it or if the app is read by, for example, for blind
people, then it will say that this is an image or we could, of course, add more details.
We could call this one like seven minute workouts, profile image or something like that, whatever
you want to name it.
But that's what is going to be read by your phone for disabled people.
All right.
All right, the next thing we have a linear layout and this TextView, it should say, start, so we
have this string called Astar Start.
You can, of course, go ahead and replace this name with, for example, something like.
The name for start in another language, so we could use this later on in order to make this multilingual,
lingual or stuff like that.
All right.
But that's generally why it's useful to not hardcoded inside of our activity in XML or in our layouts,
but really use our values here with, for example, the strings, dimensions and all of those kind of
things.
All right, next, I want to set the text color.
And now, of course, I could go ahead and create a new color, but I'm just going to use the primary
color, primary color of our app, which we can, of course, define as well.
So it should be something green, for example.
But for now, it's just going to be this purple, as you can see.
Let's go to our colors.
And changed the color primary.
To something like.
This value here, all right, and then primary dark is going to be this color and color X and it's going
to be this color.
So as you can see, I'm using black, grayish and green.
So it's different colors than what the default values for our app was.
So you can use the colors that I've entered here if you want to have the same type of style.
And then I have two more colors which we will need later on.
And instead of typing them, I'm just going to paste them in here.
So I'm going to have the color highlighted and color white.
So this color highlighted is a slight gray color, as you can see here, or light gray.
And then we have this color what which is basically a white color.
So now we can use those colors, of course, as well.
But in our activity, Maine, we have this color Prime Marietje for now and we can now set its text
size.
So, Texas, that we have a dimension start button size we had.
Start button margin and start putting label textiles.
That's the one.
All right, that by itself is cool.
Now, the problem is that it's not looking great.
So if we close a project, you can see that we have this square button here, which has a size of 150
times 150.
But I would like it to be rounded.
So I would like it to be more like what we can see here.
And what's even more important if I click on it, you can see we have this little effect and we also
have this functionality that it's not a square button, but it's actually just the size.
If I well, it is actually square one, but at least it's.
When we click on it, it's not displaying that it's a square button.
All right, so that's something that we can do manually as well, and we will.
So we need to design this by creating new XML files.
So I'm just going to create a new XML file in here.
You drawable resource.
And the first one that I'm going to create is going to be my.
Item on the score, Cirque du lur color, x and border.
And it should be a shape, so I'm just going to say, OK, this should be a shape.
Now, you can, of course, change that later on as well.
So I'm just going to use to open up this XML file, as you can see, just shows me this image and it's
an empty screen so you can hover over to decode part by clicking on this button here and will open up
this code.
So I want to have a shape and in order to define the shape.
I can just say shape should be oval, so I want to have an oval shape and I want to have a stroke in
there.
All right, so let's create a little stroke.
Which will have a whiff of, let's say, five density pixels and a color, which will be color, except,
of course, you could go ahead and replace these five density pixels again with a dimension that you
create and so forth.
But I'm just going to keep it simple for this example.
But, you know, you understand the principles, right?
That's what it's all about.
And then I want to have a solid shape as well, which should be a solid white color.
So color white, that's color that we created earlier on.
All right, so these are the two colors, this green and this white color, now, that's only one step
of it.
We will need something else as well.
We need another XML file.
And this time it's going to be a ripple effect.
So I want to add a little ripple effect.
So item color, accent, border ripple background.
Holy smokes, what a long name.
But it's just going to create a ripple effect and at the root element should be a ripple.
All right.
Now, Ripple needs a color attribute, so let's create that.
Let's add a little color attribute here.
Color, you see, it's required.
So I'm going to use color highlighted as the ripple color, which is this.
Gray light, gray color, and then in here, I will create a new item, which will be a mask, so I'm
going to use.
The name mosque for it, this will be the I.D., so just a mosque for our overall shape then, and the
shape should also be oval and I want to have a solid line in there as well, so.
Let's add a solid element, which is a solid color, and here I'm just going to use black, of course,
again, I could go ahead and.
Creates.
A color for this.
So here, create a black color.
I'm going to keep it simple for now, so that by itself is already great.
But now what we need to do is we need to implement the item that we created early on, which is the
exact protocol item.
And I'm just going to say I want to use this drawable calls and year item circular.
Colour accent, that's the one.
Extend the border.
All right, so here we need to close it as well.
And then we have this item, as you can see, this is how it's going to look like, so this is the item
that we create and use here.
Now we can go ahead and use this item, color, accent, border, REPL background, XML file as the
background image of our button.
And that's what we use this for, for this little button here.
So let's go in there and finally assign it as the background of our linear layout here.
All right.
So.
Go ahead and create a new property or assign a property background, which will be item circular.
Is it circular item color x this so item?
Except this one here.
All right, and now if you look at it, we can see we have this circle around our start button.
All right, now we can test this on our Android device.
And we can see this is how it's looking like, but for now it's not responding, so there's no click
event, it's not responding like a button.
So what we can do is we can add a little event once we click on that.
How do we do that?
Well, it's in our main activity.
And here, I'm just going to.
Set the on Click Listener to our linear layout start.
All right, so set on Click Listener.
And here is the one where it says.
View, so the second one in my case.
So once you have her here, you can see only view on Click Listener and here it also has this.
Expression, and they're so used to second one, and here I want to create a toast.
And I'm going to say write a text or make a text which has this clause as its context and as the text
it should have here, we will start the exercise.
And then we need to say for how long and should display, and I'm just going to say length.
Short.
All right.
Now, let's reformat this a little bit, of course, we need to show this.
So in order to do that, I'm just going to say that.
Show.
All right, now let's test this.
So let's go ahead and test is on our device.
So that we are in now, let's press the star partners, you can see we will start the exercise comes
up and the cool thing is you could see how this button reacts.
So it looks pretty good.
It has a functionality like a button or it works like a button.
Even though it's just a linear layout.
All right, so this was the start of the project.
It was a rather lengthy one, but that's really just set up for our app.
As you can see, we created our own button style button type and now you can see how you can do that.
We used one shape, but of course there are other ones, though it doesn't have to be, for example,
the oval shape.
You could use other shapes in here as well.
You can just check which ones are available, line rectangle rings.
So all of the different types.
Now, if you want to make it a little thicker, you can go ahead and make it thicker like that, of
course.
I can see you have a much thicker.
Stroke around here.
All right, OK, cool.
So I'd say let's check out the next video.
We're going to, of course, add a little more functionality.
So see you there.