Create an Options Menu on an Actionbar using Kotlin

         At some point you might wanna add a Menu in your app to provide users with a variety of options from which they have to choose to perform some functionalities built in your app. The options menu is where you should include actions and other options that are relevant to the current activity context, such as "Search," "Compose email," and "Settings".

        Designation of where your options have to be seen is affected by the target SDK version for which you develop your application for. So you clearly have to take this into consideration before taking any steps for implementation. In this article am going to give you a step by step tour, giving you most details you need to implement an options menu in your application . Right now you need to create a new project or you may have one created already, so let's get started...

1. Create a Menu resource file in a Menu directory of your App

        Now this might get a little bit tricky if you have never done it before, but hey you don't have to worry about that because it's super easy. All you wanna do is look to your left hand-side on your pc's screen, find something written as Project. It's always at the very edgy end of your monitor, select that then go for the app you find in there, open it and move directly to res, right click on that select new, go for the options and find something written as  Android Resource Directory. A window should pop up after you click on that and you give it a very relevant name as you desire, it could be any name. Keep in mind that you gotta select menu as a resource type. Having done that puts us one step closer to the actual creating of our menu. At this point we are right now, you should be able to find the menu directory we just created right within the res directory, you go ahead and select it, right click on it and as usual go to new then your correct choice here would be to create Menu Resource File. An XML should open on your screen, and that's exactly where you wanna add your menu items.

MENU ITEMS screenshot

        Mine was something like that, yours could be different. Say you could add Icon property to each item and make them appear singly on an actionbar, just remember to add showAsAction property on the item you want to appear singly, and not just as texts in a drop down menu like mine. It's a matter of choice, you choose what's best for you and your design. To this point you have your menu available and i think it's time we shift to the second more interesting phase of our implementation as we are now going to focus with kotlin files in our activities, this is where the real deal goes down, bare wit me..

2. Specify an Options Menu for an Activity

        What we are about to do is to notify our activity that we need to make use of the options menu in our application, i mean we have spent a reasonable amount of time preparing it, why not use it now. How do we do this ? Well we simply need to perform an override to a function, it's a built in function called onCreateOptionsMenu()

 override fun onCreateOptionsMenu(menu: Menu): Boolean {
    val inflater: MenuInflater = menuInflater
    inflater.inflate(R.menu.our_menu, menu)
    return true
}

        The function returns a boolean value, it has to be true for you to have it functioning but you don't need to worry about that anyway, because it returns the value by default. As you can see we need a menuInflater and we use it to inflate our menu we just created a couple of minutes ago and that's it. We have our menu inflated but to the point we are at, it doesn't really do anything, we just will be able to see it as the app launches but you touch any of the options up there, you wont see anything.. Let's do the last important step down below.

3. Listen to events when menuItems are clicked

        What we are about to do right now is to create a functionality that we listen to when any of the item is clicked and we respond to that click, commonly we execute some code. We do this by overriding another function known as onOptionsItemSelected()

 override fun onOptionsItemSelected(item: MenuItem): Boolean {
    // Handle item selection
    return when (item.itemId) {
        R.id.rate -> {
            //code to execute
            true
        }
        R.id.share -> {
            // code to execute
            true
        }
        else -> super.onOptionsItemSelected(item)
    }
}

        The method comes in with a parameter item of type MenuItem, So this means from the list of items we added as we were creating our menu we can distinguish each one of them using the ids we gave them and then use this to provide special functionalities as each one gets clicked, for my case i used a when statement, you could use an if statement too, though it could look very unclean but it works. At the end of this you should be able to have an end product like mine,


Remember! you could have more options than mine, so yours could look a bit different than mine or maybe you decided to make them show as action that would make them appear singly on the actionbar with their icons. Play around with the values and see what appears more attractive for you, am done here. I hope this was helpful,leave a comment on what you would like me to write about next.

Stay awesome,

#Sam


         

0 Comments