Greetings to everyone and welcome to my favorite science community online, StemSocial.
It's @skyehi and in today's episode on Android App Development Tutorials for Beginners, I'm going to teach my followers and readers how to implement menu bar in Android Apps.
Original Image Source by cottonbro studio from Pexels
Menu bars are very important User Interface elements that could be used to hold features of an App or a way to navigate to different activity pages in Android Apps.
- It makes user interactions very convenient
It's usually the three dots aligned vertically and often at the top right corner of your Android App.
Of course Menu bar icons can be positioned anyway within the App including each view in a RecycleView layout.
It can come in handy when you've got a lot of buttons or different activities in your App and you want to fit the buttons to execute all of them in one place without making a total mess of the App layout.
In today's blog I'm going to show you guys the basic steps to implementing menu bar in your Android App - Let's get started with our work for today shall we.
Prerequisites
For the benefit of newcomers to Android App development or my series, I'll share with you the required softwares you need to be able to go through with this tutorial.
Android Studio IDE - the platform on which we'll develop this and all other Android Apps.
Java Development Kit, JDK - You need to install JDK correctly on your PC for your PC to be able to execute Java commands or codes.
Physical Android Device or Emulator - After building the App, we'll need to test it either on an emulator or a physical Android device.
If you have all these checked out, you're absolutely ready to go through with this tutorial
Creating a New Android Project
Alright guys we're going to start our work by opening Android Studio IDE and clicking on "Create A New Project".
Choose a suitable template for your Android Project and I'll always recommend "Empty Activity" template since this is still beginner's tutorial.
Click on the next button and set both the package name and an appropriate App name for your Android project.
Also ensure that Java is the selected programming language for your project.
When you're through with the configuration of your new project, click the "Finish" button for Android Studio to load your new project space.
- These steps are to be followed if you want to create a new project however if you have an already existing android project you want to implement Menu Bar in please open that project.
Defining Menu Resources
The first thing we want to do to implement the menu bar is to create a new directory for "menu" inside our "res" folder
So guys, inside the Android Studio "res" folder of your project, create a new directory and name the directory "menu."
The purpose of this directory is to host XML files that define our menu items.
So when we create a menu bar, all the items that the menu bar will contain will be defined in the files we'll create inside this directory.
For this tutorial we'll create a simple menu file and name it main_menu.xml
I am going to include a Settings item inside that menu so when the App launches and a user clicks the menu bar, we'll see Settings displayed inside it.
When the user of your App wishes to navigate to settings page, they click that and go there.
Here's how the code to define settings item inside the main menu file should look like
(html comment removed: res/menu/main_menu.xml )
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/action_settings"
android:title="Settings"
android:orderInCategory="100"
app:showAsAction="never" />
(html comment removed: Add more menu items as needed )
</menu>
Inflating the Menu in Your Activity
Now guys the next thing to do is to inflate or connect the XML to Java backend.
This is necessary because if we want to write the logic code of the items inside that Menu bar, we need to connect the main_menu.xml to a Java file where the logic will be written.
In my tutorial example, the Menu bar and its items will be displayed inside my MainActivity page so I need to inflate the main_menu.xml inside the MainActivity.java file.
I want you guys to take note that this would be done inside the onCreate method of our MainActivity.java file.
Here's how the code should look like guys
// MainActivity.java
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Other initialization code
// Inflate the menu
getMenuInflater().inflate(R.menu.main_menu, menu);
}
Handling Menu Item Clicks
Now that we've created the menu bar and the items in it and have also inflated it inside our Main Activity java file, we can continue by writing the code to handle the click events.
This is where we determine what happens when a user clicks any item in the menu bar.
In order for us to be able to handle clicks on menu items, we need to override the onOptionsItemSelected method in the java activity ( in this case MainActivity.java)
If you have more items, you can continue adding more if (id == R.id.the_item_id) methods. For the id use the ID you gave to the item.
When you're done including the click events for each item, you end by including return super.onOptionsItemSelected(item)
Here's how the code should look like guys
// MainActivity.java
@Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == R.id.action_settings) {
// Handle settings menu item click
// Add your custom logic here
return true;
}
// Add more cases for other menu items as needed
return super.onOptionsItemSelected(item);
}
Running The App
That's it guys, pretty easy and simple. Congratulations on implementing a menu bar.
It's time to run the app and test the menu bar functionality.
You can run your app using an emulator or a physical Android Device.
When the App runs or launches, you should see the menu icon in the app bar. It's the three vertically aligned dots.
Clicking on it will display your menu items. In our tutorial we only included "Settings" item so you should see that.
Feel free to customize the menu items and their behavior depending on your app's requirements.
Thank you so much for your time guys. I really appreciate the love and support of my blogs.
As always if you're having troubles running the App, writing the codes or installing the required softwares please let me know in the comments.
Thank you all for the support. To my friends @stickupcurator or @stickupboys and everyone else
Have A Great Day And Catch You Next Time On StemSocial. Goodbye 👨💻
You Can Follow Me @skyehi For More Like This And Others
