WEBVTT 00:00.080 --> 00:01.040 Welcome back. 00:01.080 --> 00:08.640 In this video we're going to create the custom prediction item for every item inside this prediction 00:08.640 --> 00:09.320 list. 00:09.360 --> 00:14.800 At first let me solve this problem by hovering mouse import extension function. 00:14.800 --> 00:18.440 Lazy list items to solve it okay. 00:18.480 --> 00:21.760 Sometimes the items function creates error. 00:21.840 --> 00:32.000 Now we need for every prediction item, create an instance of the prediction item composable that we're 00:32.000 --> 00:34.080 going to create in this video. 00:34.240 --> 00:41.880 Okay, so scroll down at the end and let me create here a new composable. 00:41.880 --> 00:53.400 Or you can create an a new file, Kotlin file, name it as prediction item and start with composable 00:53.400 --> 00:56.280 function prediction item. 00:56.400 --> 00:57.560 It's of type. 00:57.560 --> 01:01.840 Composable takes two parameters the prediction. 01:01.840 --> 01:11.400 It's of type O to complete prediction alt+ enter to import it, and on item click which is which takes 01:11.440 --> 01:14.400 nothing and returns nothing. 01:14.720 --> 01:20.520 Okay, so this is the prediction item composable inside it. 01:20.520 --> 01:22.480 Let's start creating the UI. 01:22.720 --> 01:32.470 Let's start with a card and specify some parameters like modifier dot fill, maximum width clickable. 01:32.670 --> 01:33.870 Pass on item. 01:33.870 --> 01:37.830 Click and set the padding to eight dpi. 01:37.990 --> 01:48.270 Alt+ enter import it and here clickable on click on item click or onClick equals on item click. 01:48.310 --> 01:52.710 Change it to this and remove this parenthesis. 01:52.710 --> 01:55.550 Then open the scope for this card. 01:55.550 --> 02:06.790 And let's start designing the layout inside this card and set a new column having the modifier dot padding 02:06.830 --> 02:13.550 16 dpi and inside this column create a new text. 02:13.590 --> 02:16.590 Text equals to prediction dot. 02:16.630 --> 02:23.110 Get primary text null and dot to string. 02:23.270 --> 02:30.630 Style equals to material theme dot typography dot body small. 02:30.630 --> 02:32.870 Then create a new text. 02:32.910 --> 02:40.630 Text equals to prediction dot get secondary text null dot to string. 02:40.910 --> 02:44.230 Set the style body small and color. 02:44.390 --> 02:48.710 Make it as gray or you can use the color scheme. 02:48.830 --> 02:53.110 Okay, this is our custom prediction item.