WEBVTT 00:00.080 --> 00:01.000 Welcome back. 00:01.040 --> 00:06.160 We've added our model to ML package inside Android Studio. 00:06.320 --> 00:12.640 Now let's create a new package named as screens and inside it. 00:12.640 --> 00:15.840 Let's start creating our user interface. 00:16.080 --> 00:24.680 Select new Kotlin file and name it as Car Mileage Predictor Screen. 00:24.720 --> 00:33.320 Inside this file, create a new composable and let's name it as Car Mileage Predictor screen. 00:33.360 --> 00:38.160 It takes a context object as a parameter. 00:38.160 --> 00:44.400 And inside this composable, let's start designing our user interface. 00:44.440 --> 00:51.600 We need to create a section for variables that later we're going to add some variables here for state 00:51.600 --> 00:52.400 management. 00:52.440 --> 00:54.160 Start with surface. 00:54.200 --> 01:04.800 Inside this surface set the modifier equals to fill maximum size color material theme color schema background 01:04.840 --> 01:05.440 Alt+. 01:05.440 --> 01:08.960 Enter to import the material theme. 01:09.040 --> 01:14.760 And here inside this surface we need to create other Composables. 01:14.800 --> 01:17.480 Let's start with column column. 01:17.520 --> 01:21.640 Let's add those that DP import extension. 01:21.640 --> 01:24.730 Remember scroll state and alignment. 01:24.730 --> 01:31.490 Inside this column, define the text for the title Car Mileage predictor. 01:31.610 --> 01:35.530 Okay, this is our text, the car mileage predictor. 01:35.570 --> 01:38.610 Now let's add the input form. 01:38.690 --> 01:43.490 So here the input form I'll skip it for now. 01:43.650 --> 01:46.090 In the next videos we're gonna talk about it. 01:46.090 --> 01:51.450 And we have the predict button button and click. 01:51.490 --> 01:53.770 We need to configure it later on. 01:53.930 --> 01:54.370 Okay. 01:54.530 --> 01:56.650 This is for later configuration. 01:56.690 --> 01:58.610 The on click event. 01:58.650 --> 02:04.010 Let's add some other settings modifier 16 dpi. 02:04.210 --> 02:11.890 Or you can make it like um modifier dot fill maximum width enable. 02:12.050 --> 02:14.370 Also we're going to configure it. 02:14.410 --> 02:16.170 Let me make it true for now. 02:16.370 --> 02:17.370 And here we go. 02:17.410 --> 02:21.450 This is actually the basics of our user interface. 02:21.690 --> 02:29.930 We need to uh to add the input form the the form that allows us to enter the nine parameters that you 02:29.930 --> 02:36.450 remember, the number of cylinders, the displacement, weight, horsepower, origin, and so on. 02:36.490 --> 02:39.210 This is the input form that we're gonna create. 02:39.250 --> 02:42.370 Allow the user to enter all those information.