Welcome back.
The second step is to design our UI.
So after adding the TensorFlow library we need to design our UI.
Create a new Kotlin file inside this package and name it as House price screen.
Inside this file we need to create a composable function.
And let's start with function house price prediction.
And inside this screen we need to create some variables.
The input by remember mutable state of import function.
Import the mutable state of and import by.
We can um, make it like a size input, uh, or other in order to distinguish it.
And in order to know what we're going to, to put as an input and what we need to get as an output.
So here the price output by remember mutable state of empty string.
We need to design our composable hierarchy and layout.
So let me start with colon modifier fill.
Maximum size I'm going to use the Gemini, which is an act which is active in Android Studio that suggested
the codes.
So Alt plus enter to import those and here fill maximum size.
Set some Paddings to 20 dpi from all sides.
Vertical arrangement arrangement center alignment center horizontally.
And let me start adding some composables inside this column.
Here we have the text TensorFlow Lite House Price Predictor and make the style headline small.
Okay, this is that text.
Make a spacer 24 dpi.
And let me add the outlined text field for getting the out the input from the user outlined text field.
Set the value the input size on value.
Change the size equals to it.
Label house size in square feet.
Keyboard options just allow the numbers so keyboard options in order to prevent any error.
So maybe the user enters um, string letters or or any special character in the field of numbers.
And this will crash your app.
Then we're going to use the modifier equals to modifier dot fill maximum size another spacer and a button.
So inside this button we need to configure the on click event.
So val x equals to input size, dot to float or null if x doesn't equal to null.
We need to predict the price using the TensorFlow model.
I'll skip this step for later use.
I'll continue with this else statement inference error or enter a valid number here.
Okay so this is our on click event.
Set a text for the button predict house price.
Nothing to lecture I'm just creating our UI our user interface.
We've already done a lot of things like this.
Now let's call our screen inside this theme.
So house price house price screen.
House price not screen prediction I'm calling this composable run.
Our application to solve this error could not find TensorFlow Lite 2.20.0.
Let me go back and here with the latest versions 2.20.0.
But maybe this is for the Lite RT.
And the latest stable version that doesn't support RT is 17.0 sink.
Now run the application and everything is working fine.
And here we go.
This is our application.
But I missed I, I made this full size outline text.
This is not good.
Fill maximum width.
Run again.
And here we go.
This is our application TensorFlow Lite house prediction or house price predictor okay so congratulations
we created our UI.