1 00:00:01,140 --> 00:00:06,330 Bottom navigation in Android is used to show key actions at the bottom of the screen so users can move 2 00:00:06,330 --> 00:00:08,100 between primary destinations. 3 00:00:08,790 --> 00:00:15,120 So let's look at a basic setup for a bottom navigation to add a bottom bar to a compose app, you need 4 00:00:15,120 --> 00:00:22,440 a scaffold layout scaffold, provide slots for common components and screen elements, and the scaffold. 5 00:00:22,440 --> 00:00:29,610 We reference the bottom bar parameter and assign the bottom navigation composable to it, which is already 6 00:00:29,610 --> 00:00:34,530 pre-built, so we don't have to define this ourself in the bottom navigation. 7 00:00:34,530 --> 00:00:38,610 We and pass the bottom navigation item for displaying each of the options on the bar. 8 00:00:38,880 --> 00:00:41,730 Each option will require a label and an icon. 9 00:00:42,000 --> 00:00:49,200 We will need a list for the number of items that we want to show on the bar to manage these items. 10 00:00:49,230 --> 00:00:54,540 It's advised to create a class with fields for the icon and label and then make a list out of it. 11 00:00:54,900 --> 00:00:55,830 So let's look at that. 12 00:00:56,280 --> 00:00:59,760 For this, we first create a model for each item. 13 00:01:00,330 --> 00:01:07,110 You will also notice we have an extra field called root, which will provide a specific destination 14 00:01:07,110 --> 00:01:10,530 key for each screen and help manage the navigation. 15 00:01:10,830 --> 00:01:13,680 And we need to seal this class is the common practice here. 16 00:01:14,310 --> 00:01:21,630 Then we make a list of required items out of the model and set each one as a bottom navigation item. 17 00:01:21,870 --> 00:01:30,120 It has various properties where the label icon on click and the selected and on selected content colors 18 00:01:30,450 --> 00:01:31,260 are defined. 19 00:01:31,800 --> 00:01:37,770 So here you can, for example, define which color should be set when the content is selected and for 20 00:01:37,770 --> 00:01:41,500 the text and the icon, for example, and what should be the color? 21 00:01:41,520 --> 00:01:42,450 One is unselected. 22 00:01:42,840 --> 00:01:45,030 You can define whether it's selected by default. 23 00:01:45,030 --> 00:01:48,270 In this case, you see it's on selected because selected the set defaults. 24 00:01:48,720 --> 00:01:55,230 And then we also have the on click event that we can define here, which you see in this case is not 25 00:01:55,230 --> 00:01:55,920 implemented. 26 00:01:56,640 --> 00:01:59,670 And then at the bottom, you set the icon that you want to use. 27 00:01:59,850 --> 00:02:05,700 OK, so you define the icon, which we get directly from our list. 28 00:02:06,450 --> 00:02:12,000 So here you see the different icons that we're using, as well as the texts and the three options that 29 00:02:12,000 --> 00:02:18,180 we have in our bottom app bar, which are the three menu items that we added. 30 00:02:19,470 --> 00:02:25,300 So let's see how we can attach screens to each item and then we get between them when clicked on. 31 00:02:26,130 --> 00:02:31,680 So therefore, we need to use net host and controller, which work together to enable navigation. 32 00:02:32,130 --> 00:02:38,340 Now, post is a container for the composable screens, while NAV Controller contains API used to manage 33 00:02:38,340 --> 00:02:46,590 the navigation between screens and the code snippet above, we add a nav host and pass in a nav hosted 34 00:02:46,590 --> 00:02:49,710 controller with a start destination route. 35 00:02:50,190 --> 00:02:53,300 This way, the host knows the first screen to show. 36 00:02:54,090 --> 00:03:00,210 So in our default settings, the top news will be the first screen that we want to display. 37 00:03:00,900 --> 00:03:05,400 Then, within the NAF host block, we add the composable screens for each item. 38 00:03:05,820 --> 00:03:10,920 So in our case, the top news is the composable screen that we're going to start with where we also 39 00:03:10,920 --> 00:03:15,570 passing the nav controller, but we're going to see how all of that works in an actual example. 40 00:03:16,050 --> 00:03:21,920 So to get a particular screen shown when an item is clicked, we have to add an action to the on click 41 00:03:21,930 --> 00:03:22,320 block. 42 00:03:22,630 --> 00:03:27,420 Available in the bottom navigation item, and that is how we can handle the item selection. 43 00:03:28,140 --> 00:03:34,770 So here all we need is to get an instance of the controller and navigate to the selected routes when 44 00:03:34,770 --> 00:03:35,790 an item is clicked. 45 00:03:36,480 --> 00:03:41,440 Remember, each item has a route that serves as a key with this route. 46 00:03:41,460 --> 00:03:45,630 Each screen can be identified by the nav controller when an item is clicked. 47 00:03:45,990 --> 00:03:50,550 We will understand navigation in detail in the coming lectures when we are actually going to implement 48 00:03:50,550 --> 00:03:53,220 this code that you just saw into our project. 49 00:03:53,340 --> 00:03:57,540 Then you can reuse that for your own projects in the future. 50 00:03:58,590 --> 00:04:02,040 OK, so let's get started with that in the next video.