Welcome back.
Before running our application we need to specify those variables.
The car features and the validation errors.
Scroll up.
And here inside the Variables and state management section.
Let's start by var validation errors by.
Remember I'm using the delegation here and it's mutable state of empty list of string.
Plus enter to import the mutable state.
I'll press enter to import by and press enter to import.
Remember mutable state of.
Here we can specify it's a list of strings and it's an empty list.
Okay, now let's use the default car features variable car features by.
Remember it's a mutable state of.
And here we need to start by card features.
Alt plus enter to import the Car Features class.
And here we go.
So we have two variables validation errors.
It's a list of strings that contains all the errors.
If we have any errors and the car features, which is an instance of this data class.
So inside this car features variable, we're going to store all those features that we need to pass
for our model.
Scroll down or errors are solved.
Let me call this composable car mileage predictor screen into our main activity.
So main activity here.
Remove those composables and set content.
Remove this theme and call the car mileage predictor screen.
We need to pass the context.
Pass this Alt+ enter to import it, and let's run our application.
And congratulations guys.
This is our car mileage predictor screen.
You see there are uh placeholders.
You see the placeholders cylinders, displacement, horsepower, weight, acceleration, model year.
And you see guys, the origin cards, the origin chip, European, American, Japanese and so on.
And this is our button for prediction.
Okay.
Let me add some background and make some layout touches.
Let's go to Car Mileage Predictor screen and scroll down to the surface.
And here inside the modifier we're gonna create another one like background.
And we need to set the background before setting it.
We need to set the color to transparent.
So color dot transparent in order to apply the background colors.
Let's start with this background.
And inside the background we need to specify the color shape.
And we can specify something called brush.
Brush equals to brush dot linear gradient you can use Linear gradient, horizontal gradient, radial
gradient, vertical gradient and so on.
I need to use linear gradient and here set colors equals.
List of list of and.
Set the start and the end.
Here you can specify the colors of your gradient.
So for example let me specify the first color.
Those are two colors the electric green and cyan.
You can also um click on those buttons.
Select the new values, new colors, and select the gradient you love.
For example like this.
And for this yarn like this.
And so on.
Okay so let me choose those and set the start to zero f and set the offset to float dot positive infinity.
Okay.
This is for um this is for diagonal gradient.
Okay.
Don't miss to add the color, the color, the transparent.
And let's run our application and here we go.
This is our, uh, lovely background.
You can modify the colors.
So if you if you see that it is very, very obvious, you can change the colors to, to set the contrast,
to change the background and to change the colors.
Okay.
Also you can add another color in in the middle.
For example, let me show you this is the blue.
And you see guys we have a gradient of three colors and you can add as much you need okay.
So let me change this color to make it like this.
And here we go okay now let's change the card mileage predictor.
And this is the text.
Set the text color to white.
Run it again.
Here we go.
Now let's add some paddings to the bottom.
So here the modifier dot padding.
Adding set the padding to 24 dpi from top.
Run it again and congratulations guys!
This is our lovely UI.
Also you can add for the surface the some some paddings.
So let me add here padding from top for example 24 dpi.
It's good.
And run it again.
You see this uh, white space?
I don't love it.
So you can remove it and keep it like this.
You can set for the text and the column.
So padding uh, for the column, like, uh, let me set for the top equals to 24 dpi.
And for the start 16 dpi and end 16 dpi.
Run it again and here we go.
This is our lovely application okay.
So now let's add the functions to connect this UI to the TensorFlow Lite.