Top App Bar in Jetpack Compose using Kotlin | Android Studio

hey everyone welcome back to my channel in this video we will create a top appar or you can say action bar or custom toolbar in Jetpack compose this is where the name of the app will be present and also here you can assign navigation menu or search action it's very easy as compared to XML so let's create it open Android Studio create a new project choose jetpack compose mty activity name it as learn top app bar and then we will be creating a top app bar like WhatsApp top bar where the app name will be WhatsApp with WhatsApp icon and with few more actions icon like search account and all so first let's start by adding our custom color which is green so go to color. k remember don't go in traditional color files okay here write well green JC is equal to color as 0x FF 3F DC 85 and done then go to theme. gy we will use that green JC color as a main primary color and over here in status bar color status bar includes information about device like battery Wi-Fi Sim and all so I will keep its color also as green JC but here status bar color should be in int so I will write here as two argp that will convert in in got it till now we have a green color and primary theme set to Green as well as stus bar color also as green now moving on to the next thing as I said it's a WhatsApp top app bar so for that we will require WhatsApp icon so let me copy paste it in the drawable and done now come to main activity this is where we will create top app bar in composable so let me remove the default code and done then I will create a new composable function as learn top app bar and done make sure to call it here as well inside set on content then inside it I will create a top app bar this is a class provided by jetpack compose only so when you will click on it you can see there are so many parameters which you can use to customize your top bar like I will use title Navigation icon color and actions okay so come back here also you may be facing an error over here I tried various solution but the only solution that works for for me was to optain for experimental material 3 API like this way it will automatically going to add an annotation over here problem solved next as I said we can add multiple parameter so first is the title means app's name which I will give it here as WhatsApp also let me show you why pre preview is so useful so I'll quickly create a preview composable function and done now you can see live or real time updates as we create top bar open split mode build refresh it now come back here in top empar our first parameter was title and as you can see here we have a title as WhatsApp the next parameter will be Navigation icon this icon will be always at the start of the top app bar like how navigation drawer menu used to be at the start same way so inside Navigation icon I will write I icon button as it's a button so obviously it will have on click means what will happen when you will click on that button that we need to mention over here and also other design parameters will be inside the curly brackets please don't get confused between brackets okay here in on click for now I'll simply throw a toast so if you remember for TOS we require context so here I will create a context variable as local context dot current dot application context and done then inside toast write context variable and toast as WhatsApp to. length short and show now to design the icon button write icon inside the curly brackets as we will be adding WhatsApp icon image so I'll be going for painter one write painter resource whose ID as r. drawable do WhatsApp icon then content description as maybe WhatsApp icon only and that's it the preview does get automatically update but if not then refresh it and see we have a WhatsApp icon here next let's give colors to the bar so our next parameter is colors top app bar defaults dot top app bar colors contains container color which is the background color of the bar that I will give it as green JC then we can can also give title content color as white and also the navigation icon content color as white and done this is how it looks till now next I want to add three icon here so for that I will use actions parameter inside it I will create three icon button first is for profile Second is for search and third is for menu got it so let's create it icon button whose on click will be SE toast only so I'll copy paste it only thing that will change is the text as profile then inside it I'll choose icon image vector because this time we will be using built-in icons so icons field see here is the list of all the built-in icons out of which I will choose person for profile then contend description as profile then tint means the color of the icon as white and done same way I will create other two actions icon as [Music] well and done look this one is for profile this one is for search and this one is for menu and that's that's it our top app bar is ready last thing to do is commment this line because if surface will take the entire screen means Max size then action bar will not be visible hence commented this is how it looks in preview okay now let's run the app our top app bar looks perfect this four of them are icon button means it is clickable so if I click on search see a toast as search same way if I click on menu it it says menu got it likewise you can create your own top app bar according to your app preference okay so yeah that is it for the video if you are new to this channel then please consider subscribing to my channel and I'll see you in the next [Music] video

Channel: Android Knowledge

Views: 980

Keywords: jetpack compose, android, jetpack tutorials, compose, learn android app, learn jetpack compose, app in jetpack compose, create a app, android studio tutorials, jetpack compose android, 2024, series, learn android, create jetpack compose app, college project app, android development, android knowledge, learn app development, mobile apps, develop apps, create an app, tutorial, topic, new android video, latest android studio, error, toolbar, action bar, top app bar, status bar, design

Id: Ahv0niXd_aY

Length: 9min 52sec (592 seconds)

Published: Tue Jan 30 2024