WEBVTT 00:00.080 --> 00:01.000 Welcome back. 00:01.000 --> 00:05.400 Before running our application we need to specify those variables. 00:05.440 --> 00:07.840 The car features and the validation errors. 00:07.880 --> 00:08.840 Scroll up. 00:08.840 --> 00:12.880 And here inside the Variables and state management section. 00:13.120 --> 00:18.360 Let's start by var validation errors by. 00:18.680 --> 00:26.720 Remember I'm using the delegation here and it's mutable state of empty list of string. 00:26.840 --> 00:29.640 Plus enter to import the mutable state. 00:29.920 --> 00:34.040 I'll press enter to import by and press enter to import. 00:34.040 --> 00:36.520 Remember mutable state of. 00:36.680 --> 00:43.680 Here we can specify it's a list of strings and it's an empty list. 00:43.720 --> 00:51.480 Okay, now let's use the default car features variable car features by. 00:51.480 --> 00:54.600 Remember it's a mutable state of. 00:54.840 --> 00:59.120 And here we need to start by card features. 00:59.160 --> 01:03.560 Alt plus enter to import the Car Features class. 01:03.560 --> 01:04.480 And here we go. 01:04.520 --> 01:07.480 So we have two variables validation errors. 01:07.480 --> 01:11.480 It's a list of strings that contains all the errors. 01:11.480 --> 01:18.640 If we have any errors and the car features, which is an instance of this data class. 01:18.640 --> 01:26.520 So inside this car features variable, we're going to store all those features that we need to pass 01:26.560 --> 01:27.920 for our model. 01:27.960 --> 01:31.160 Scroll down or errors are solved. 01:31.200 --> 01:39.200 Let me call this composable car mileage predictor screen into our main activity. 01:39.240 --> 01:40.920 So main activity here. 01:40.920 --> 01:44.760 Remove those composables and set content. 01:44.760 --> 01:50.520 Remove this theme and call the car mileage predictor screen. 01:50.520 --> 01:52.440 We need to pass the context. 01:52.480 --> 01:58.360 Pass this Alt+ enter to import it, and let's run our application. 01:58.360 --> 02:00.320 And congratulations guys. 02:00.320 --> 02:03.440 This is our car mileage predictor screen. 02:03.440 --> 02:07.320 You see there are uh placeholders. 02:07.320 --> 02:14.320 You see the placeholders cylinders, displacement, horsepower, weight, acceleration, model year. 02:14.440 --> 02:22.400 And you see guys, the origin cards, the origin chip, European, American, Japanese and so on. 02:22.600 --> 02:25.320 And this is our button for prediction. 02:25.520 --> 02:26.000 Okay. 02:26.240 --> 02:32.360 Let me add some background and make some layout touches. 02:32.360 --> 02:38.080 Let's go to Car Mileage Predictor screen and scroll down to the surface. 02:38.120 --> 02:47.120 And here inside the modifier we're gonna create another one like background. 02:47.360 --> 02:51.120 And we need to set the background before setting it. 02:51.160 --> 02:55.320 We need to set the color to transparent. 02:55.320 --> 03:01.480 So color dot transparent in order to apply the background colors. 03:01.480 --> 03:04.800 Let's start with this background. 03:04.800 --> 03:10.440 And inside the background we need to specify the color shape. 03:10.800 --> 03:15.000 And we can specify something called brush. 03:15.160 --> 03:22.800 Brush equals to brush dot linear gradient you can use Linear gradient, horizontal gradient, radial 03:22.840 --> 03:25.240 gradient, vertical gradient and so on. 03:25.280 --> 03:30.480 I need to use linear gradient and here set colors equals. 03:30.520 --> 03:33.640 List of list of and. 03:33.760 --> 03:35.440 Set the start and the end. 03:35.480 --> 03:41.040 Here you can specify the colors of your gradient. 03:41.240 --> 03:45.840 So for example let me specify the first color. 03:46.000 --> 03:49.840 Those are two colors the electric green and cyan. 03:50.040 --> 03:55.760 You can also um click on those buttons. 03:55.880 --> 04:02.120 Select the new values, new colors, and select the gradient you love. 04:02.160 --> 04:03.480 For example like this. 04:03.640 --> 04:06.320 And for this yarn like this. 04:06.440 --> 04:07.200 And so on. 04:07.240 --> 04:18.520 Okay so let me choose those and set the start to zero f and set the offset to float dot positive infinity. 04:18.560 --> 04:18.880 Okay. 04:18.920 --> 04:23.120 This is for um this is for diagonal gradient. 04:23.160 --> 04:23.680 Okay. 04:23.840 --> 04:28.310 Don't miss to add the color, the color, the transparent. 04:28.310 --> 04:32.030 And let's run our application and here we go. 04:32.070 --> 04:35.110 This is our, uh, lovely background. 04:35.110 --> 04:37.350 You can modify the colors. 04:37.350 --> 04:46.670 So if you if you see that it is very, very obvious, you can change the colors to, to set the contrast, 04:46.710 --> 04:49.830 to change the background and to change the colors. 04:49.870 --> 04:50.310 Okay. 04:50.470 --> 04:55.390 Also you can add another color in in the middle. 04:55.390 --> 04:58.310 For example, let me show you this is the blue. 04:58.430 --> 05:07.910 And you see guys we have a gradient of three colors and you can add as much you need okay. 05:08.110 --> 05:12.390 So let me change this color to make it like this. 05:12.590 --> 05:17.270 And here we go okay now let's change the card mileage predictor. 05:17.270 --> 05:20.030 And this is the text. 05:20.070 --> 05:23.630 Set the text color to white. 05:23.670 --> 05:24.670 Run it again. 05:24.710 --> 05:25.430 Here we go. 05:25.590 --> 05:28.630 Now let's add some paddings to the bottom. 05:28.630 --> 05:32.110 So here the modifier dot padding. 05:32.110 --> 05:36.270 Adding set the padding to 24 dpi from top. 05:36.270 --> 05:39.190 Run it again and congratulations guys! 05:39.550 --> 05:42.350 This is our lovely UI. 05:42.470 --> 05:48.870 Also you can add for the surface the some some paddings. 05:48.870 --> 05:55.870 So let me add here padding from top for example 24 dpi. 05:55.910 --> 05:56.750 It's good. 05:56.910 --> 05:58.630 And run it again. 05:58.670 --> 06:01.590 You see this uh, white space? 06:01.590 --> 06:02.710 I don't love it. 06:02.710 --> 06:06.270 So you can remove it and keep it like this. 06:06.550 --> 06:09.990 You can set for the text and the column. 06:09.990 --> 06:19.230 So padding uh, for the column, like, uh, let me set for the top equals to 24 dpi. 06:19.390 --> 06:23.910 And for the start 16 dpi and end 16 dpi. 06:24.110 --> 06:26.790 Run it again and here we go. 06:26.830 --> 06:29.910 This is our lovely application okay. 06:30.110 --> 06:38.390 So now let's add the functions to connect this UI to the TensorFlow Lite.