WEBVTT 00:01.730 --> 00:09.980 Scrollable columns and rows are great when you have static content, like in the previous examples. 00:09.980 --> 00:15.980 However, they aren't a good idea for data collections that are dynamic. 00:16.010 --> 00:23.450 That's because scrollable composables compose and render all the elements inside eagerly, which can 00:23.450 --> 00:28.700 be a heavy operation when you have a large number of elements to display. 00:28.730 --> 00:36.230 In such cases, as you know from the traditional view system, you'd use a recycler view to optimize 00:36.230 --> 00:40.160 the loading and rendering of the visible elements on the screen. 00:40.160 --> 00:44.810 But how does Jetpack Compose deal with this issue? 00:44.840 --> 00:47.120 Let's find out in this video. 00:47.390 --> 00:53.690 To display a large collection of elements in Android, you use the recycler view. 00:53.720 --> 01:03.530 The only elements Recycler View renders are the ones visible on the screen only after the user begins 01:03.530 --> 01:04.440 to scroll. 01:04.470 --> 01:10.470 Does it render the new elements and display them on the screen? 01:10.500 --> 01:19.500 It then recycles the elements that go off the screen into a pool of view holders. 01:19.500 --> 01:26.190 When you scroll back to see the previous elements, it renders them from the pool. 01:26.190 --> 01:35.730 Thanks to this behavior, Rerendering is so quick that it's almost as if the elements were never removed 01:35.730 --> 01:38.430 from the screen in the first place. 01:38.430 --> 01:44.760 This optimization mechanisms gives recycler view its name. 01:44.760 --> 01:54.120 Loading data only when it's needed is called lazy loading, and Jetpack Compose doubles down on this 01:54.120 --> 01:56.220 method to handle lists. 01:56.220 --> 02:04.830 The main two components you use for lazy lists in compose are the lazy Column and Lazy Row. 02:04.860 --> 02:13.240 Recycler view You uses a layout manager to set its own orientation, but Jetpack Compose doesn't have 02:13.240 --> 02:14.560 layout managers. 02:14.560 --> 02:20.890 Instead, you use two different composable functions to change the orientation. 02:20.890 --> 02:28.690 The composables work in almost the same way as the recycler view, but without needing to recycle. 02:28.690 --> 02:31.810 So here I create a new composable. 02:31.840 --> 02:34.510 I'll name it as my lazycolumn. 02:34.510 --> 02:44.890 And inside this composable function I create lazy column, and inside it I'll create items, items, 02:44.890 --> 02:50.290 list, and for every item go and create a text composable. 02:50.320 --> 02:51.130 Like this. 02:51.130 --> 02:53.410 Don't worry, we'll clarify everything. 02:53.440 --> 02:58.990 Create a val items list equals to list of. 03:01.570 --> 03:10.340 And here I will create a list of strings displaying the name of my applications on Play Store. 03:10.370 --> 03:13.070 Start with master coding app. 03:21.350 --> 03:28.970 Here we created a list called items List of Type string and we passed four items. 03:28.970 --> 03:31.610 Then we used the Lazycolumn. 03:31.640 --> 03:39.350 If we go to the declaration of this composable control and left mouse, we can see the Lazycolumn contains 03:39.350 --> 03:45.080 many parameters like the modifier state, content, padding, reverse layout, vertical arrangement, 03:45.110 --> 03:50.780 horizontal alignment, flange behavior, user scroll, and enabled and content. 03:50.780 --> 03:57.800 So the lazycolumn is a composable function that efficiently displays a vertical list of items. 03:57.800 --> 04:06.710 Unlike traditional column, Lazycolumn only composes and lays out visible items, which significantly 04:06.710 --> 04:13.230 improves performance especially for large data sets and to create a lazy column. 04:13.230 --> 04:14.400 It's very simple. 04:14.400 --> 04:23.130 We need to specify the items you want to display using the items or item blocks, so we use the items 04:23.130 --> 04:23.970 items. 04:23.970 --> 04:33.660 This function is part of the Lazy Collins DSL domain specific language items list is the data source, 04:33.660 --> 04:36.750 which is a list of items to be displayed. 04:36.750 --> 04:45.120 This list can be any type of list, such as list of string, list of custom data, and etc. so items 04:45.120 --> 04:50.160 is a function that takes a list and a lambda to render each item. 04:50.160 --> 04:58.830 We can use item if you have specific single item, but here we have many items. 04:58.830 --> 05:03.810 We use the items function inside the trailing lambda. 05:03.810 --> 05:06.600 For each item parameter. 05:06.600 --> 05:15.240 Inside the list of items, you create a new text composable, and this lambda represents the function 05:15.240 --> 05:21.830 to transform each of the objects within the items to a composable element. 05:21.830 --> 05:28.910 Again, guys, I want from you to focus with me inside this trailing function Lambda expression. 05:28.910 --> 05:37.340 This is a lambda function that defines how each item in the list should be rendered. 05:37.370 --> 05:43.340 Item is a parameter representing the current item in the iteration. 05:43.340 --> 05:45.500 The text inside the lambda. 05:45.530 --> 05:48.650 You specify the UI for each item. 05:48.650 --> 05:58.370 Here, each item for the items list is passed to the text composable, which renders the item as a text. 05:58.370 --> 06:03.260 Let's call this function in the Setcontent and run our application. 06:03.260 --> 06:04.670 And here we go. 06:04.700 --> 06:06.590 This is our list. 06:06.590 --> 06:09.200 This is our lazy column. 06:09.200 --> 06:16.550 In the next video, we'll deep dive into lazy columns and make our customized lazy columns.