Welcome back.
Till now we have the title, the text fields and the button.
We need to display the results here in a card.
So inside the screens package, create a new Kotlin file.
Name it as prediction result card.
Start with composable prediction result card.
And this card takes an MPEG.
It's of type float as a parameter.
Let me hide this window.
And here let's start with the card composable.
Specify some parameters.
Modifier fill maximum width and the card defaults.
Import card defaults and import the fill maximum width card elevation for DP which is good, and inside
this card start with a new column modifier padding 24 DP horizontal alignment alignment dot center horizontal.
Let's create a new column inside it.
Or another composable text composable.
And here we need to set like a predicted mileage.
So a title it represents a typo for the predicted mileage style equals to material theme typography
dot title media.
This is the first composable.
Inside this column, create another text and the MPG float that it is passed here.
Create a spacer between them ADP copy and paste it here.
Okay.
The last thing we need to display is the ratio or fuel efficiency rating.
So here efficiency rating we need to display it in a text.
So text a fuel efficiency rating.
Also you can replace it with rating.
So here let me show you like this.
Create a new variable.
Efficiency equals to when.
This is the logic here.
If mpg less than 15 or greater than 15.
Let me make it greater than 15.
It's average.
So average.
If mpg greater than 20 it's good.
If mpg greater than 25 it's excellent.
Otherwise display it is low or poor okay.
Okay.
This is the logic.
We need to see the MPG.
If it is greater than 20, go and display.
Good greater than 25.
Excellent.
Greater than 15.
Average and else display poor.
Here set the text to the efficiency variable material theme title medium.
Okay, this is the prediction result card and this is used to display the result under the button here.