Mastering Android Jetpack Compose: NavigationBarItem with State Deep Dive

hi everyone hope you're doing well so in this video we will create a bottom navigation bar so if you see at the bottom we have this image and text label now we can see how we can create this UI in the compose if you follow my channel so you are aware that we are creating this UI where we have this toolbar content so now we will add a bottom navigation bar to add a bottom navigation bar we need to use Bottom bar and here we need to pass a Content now in the navigation bar need to add a navigation bar items so we will add navigation bar items so here we need to define the state like if it is selected or not so we will keep it empty for now and what will happen on the click so we can remove the studio and for Icon we can add an icon here so just add icon and it will be a vector resource so we will use image Vector so first one we can say home content description will be home now Mark it false so this will be your first navigation bar item now let's say you want to add a label here so we can do the same just on this navigation bar item add one more property here label now in the label Define the text our text will be home so if you see here we can see our home icon and we can see the label as well so if you want to see how it look when the item is selected just mark it as true so if you see when the item got selected then we will have this background we will add more items so just copy and duplicate the line press command D to duplicate now this element will not be selected and this will also be not selected now we can change the icon for this one let's say we can add this profile profile and text Will profile or we can change it to setting call it settings and this will also be settings currently we are just selecting as a buan variable so instead of this bu variable we can pick the value from the state okay so now in the state Define here where selected item by remember we can make it as integer type mutable in state of default will be zero okay now here we will add a condition if selected item equals to zero then it will be selected and for this one selected item if this is one and when this is two now whenever we click on this navigation bar item we need to update its value to zero and for this one we need to update its value by one and for this one we have to update its value by two okay now let's see okay now you can see by default the form is selected because we have added a condition if selected is zero and default value for selection is zero so it appears as a selected now I click on profiles so now profile got selected and home got unselected similar way for settings okay now let's say you want to change the background of this bar okay so we will just go to this navigation bar and we can change the color from here so container color so you can pick any color so I will just pick a value random value from here let's say will be black so we can just verify here so if you see uh the container color is changed to Black now let's say you want to change navigation bar item color okay so we will go navigation bar and here we can define a color so if you see this color should be navigation bar item colors okay so we will just pick a default value here navigation bar item defaults dot we need to use a color property we do colors now in this colors attribute we need to define the selected color and unselected color okay so we will say selected icon color will be color do red so if you see the color got changed similar way we can set selected text color is equal to color do red so you can notice the color also got change and if you want to change the indicator color also we can change indicator color as well indicator color and we can mark it as color do white okay so now you can see the integrated color got changed so this will happen whenever the state got changed so instead of defining this color here uh we can move it outside and save it into variable navigation item colors this one and we can directly use this attribute to this one similar way for this one and similar for this one now you see profile got change and I click on setting the setting C change if you want to define the UN selected color so we can defend unselected color as well let's say unselected icon color is equal to color dot green and unselected text color isal to color do green just reload now you can see unselected color have a green color selected color are red okay so this way we can create our navigation item colors so that much for this video in the next video we will see Bottom bar which is something similar to navigation bar stay tuned for further updates

Channel: Let's Finish this APP - Kotlin and Swift Tutorials

Views: 58

Keywords: JetpackCompose, AndroidUI, LazyVerticalGrid, LazyStaggeredGrid, AndroidDev, UIDevelopment, CodeTutorial, AndroidDevelopment, TechTalk, MobileAppDevelopment, Programming, CodeOptimization, GridLayout, ComposableFunctions, DeveloperCommunity, TechExplained, CodingTips, AndroidStudio, KotlinProgramming, UIUX, LearnProgramming, OpenSource, TechInnovation, navigationbar, navigationbaritem, android, fresher

Id: gBxFdJyhAm4

Length: 7min 49sec (469 seconds)

Published: Mon Jan 22 2024