Hello, and welcome back. In this video, we'll learn how to build a menu on our app. So, we'll add one right here on the top-right. And in the last video, I was working on the sequel light Demo app although none of the features we're working on now relate to that app, and there was just too much code going on on the screen. So, I decided to create a new project over here, and we'll continue working with our shared preferences here. And another thing is I changed the emulator back to my Pixel 3a. I was facing some problems with the 4 that I was using. It was showing up with a couple of bugs.

Not sure if it was my system related, or related to the emulator itself, but this one has worked well in the past, so I'll just stick with this for now. I've also gone ahead and set up viewBindings on this project, so I don't have to keep writing, findviewById over and over again. So, I suggest you do the same. So, what we want to do is set up a little menu on the top-right over here of our app with a couple of menu items. We'll also see how we can display the items and then have them not display and show up only when you tap on the menu.

So, let's go ahead and set it up. First, I'll go to 'Project' and 'res' folder right here. Right-click 'New' and we're going to create an 'Android Resource Directory' for the menu. So, click on that, over here Resource type. I'm going to say menu. Directory name, menu is okay. Everything else looks good. Now, within this menu folder, I'll create a new Menu Resource File. So, right-click 'New', see 'Menu Resource File'. I'll click on this, and I'll call this main_menu. The rest are all okay. And this goes ahead and creates a menu for us to work on. So, I will zoom in a little bit. Now I can drag in menu items from here into here or I can do them in code. Let's go ahead and drag in items from here. So, here's my palette.

I'm going to drag this menu item. Check it out. And as you can see, I have different menu items to select from from here. I can even drag in Search Item. There you go. Now, I have a Search and an Item. And if you look at the code over here, actually I'll minimize this, you see I have two items. One is the Search and one is just a generic Item. So, now that we have these two items, if I run the app, what will happen? Well, let's check it out. Let's run it. Nothing shows up. What happened? Well, we created this, but we haven't used anything to make this available in our activity. So, what we need to do is in our MainActivity, we need to use a layoutInflater to make the menu show up here.

And for that, we need to write some code. So, over here, I'll start typing a couple of things. Under my onCreate method, I'm going to start typing onCreate. And you see one of the options here onCreateOptionsMenu, I'm going to select this one, and the other one that I'm going to need is onOptionsItemSelected, and a combination of these two will make the menu work for us in the way that we want. Let's start with onCreateOptionsMenu. And here, I'm going to get rid of this line right here. I'll simply return true for now. But over this piece of code over here, we have to say menuInflater.inflate. And as arguments, we have to provide the resource file that we created, so our main_menu file over here.

So, what I'll say is R.menu.main_menu, that's the file. And the next item that we have to provide, the next argument is simply menu, which is of type menu. That's it. And this is going to create the menu. So, let's go ahead and try it out. And there we go. There is the menu tab on the top-right. If I click on it, my options show up. There is Search and then there is Item, If I click on it right now, nothing happens. That's what we're going to deal with next.

But in terms of how they show up, if you wanted to alter it, for example, right now, I'm having to tap on this button and there's all this space available. So, if you wanted one of these items to be showing up without needing to tap the menu, you can adjust those settings in your main_menu. There's an attribute we can add, and it's called showAsAction right there, and you see we have these five options. Always, then never, ifRoom. So, ifRoom is the one where if there's enough room over here, then it will show up. Otherwise, it's going to show up only when you tap on the button. So, for the search bar, I'll select always. And then for the item that we have over here, let me actually modify this. I'll change the title to Settings. So, instead of Item, it simply says Settings, and I'll give it an id. So, id, I'll simply say settings. And the third thing I'm going to do is showAsAction. And this one, I'll choose ifRoom. So then, it's going to, see, it's going to show up with the item always displayed. But if I change it to something else, let's say, what are some of the other options?

Let's say, I select never, then it will never show up. You always have to tap on it to get to the settings. So, you can play around and decide what's good for your app based on the UI that you want. And now if I run this, and there you go, there is the search icon. I can click on it, and I can search for things. And then if I tap on this menu item, there is my Settings. So, how do I take action once one of these items is tapped? How do I do that? Well, I can take care of that from this onOptionsItemSelected method. So, I'll come down here, and I'm going to use a when condition here. You can use if-else if you want, and when for people who are coming in from Java is just like Switch.

So, you see, this item being passed in as a parameter to this method. This item is of type MenuItem. That's the item that was tapped. So, I can simply check the id for it. Based on the id, I can perform different actions. So, I'll say, item.itemId. And then when the id, let's say, R.id. let's say, settings. That's the one I had for my item right here for Settings. So, when it's settings, I want to display a Toast. So, what I'll say is Toast.makeText(context: this, "Settings selected",Toast.LENGTH_LONG).show(). So, let's run this. Let's tap on that. There's my Settings. If I click on it, there is my Toast, Setting selected. And if you can display a Toast over here, that means you can do any other function. You can create a new activity, you can update whatever. You can do a whole bunch of things here.

So, now that we know how to create a menu and then select menu items, our next step is to pull up a dialog box when the settings is selected from here and for the user to select English or Dutch. And once the user makes that selection, we'll save that to the shared preferences. So, the next time the app loads up for the user, the user doesn't have to set their language settings again. It'll automatically pull up what they had already set, but they'll still be able to change their settings by clicking on settings. And we'll get started with that in the next video. Hope you're excited. I'll see you there.

Menu

About

Intended Audience

Prerequisites

SELF PACED PLATFORM

TRAINING CONTENT

JOB ROLE PATHS

CERTIFICATIONS