Tutorial details

Android beginner tutorial: Part 50 - Options menu icons, Action bar | App Code for Sale | Preview

Android beginner tutorial: Part 50 - Options menu icons, Action bar | Android Tutorial

How to listen to menu item selection in Options menu

Overview PAGE TOP

In this tutorial we will learn how to add icons and use Action bar.

As I mentioned before, an Action bar is something Google invented and plants to replace the old Options menu with. Still the menu remains as long as there is a Menu button on the device. In this part I will show you how to add icons to menu items that are displayed in the old Icon Menu that appears in the bottom of the screen, or in the Action Bar on devices running newer versions of Android. The icons are not displayed in the List-like menu though.

The MainActivity.java class remains like this the whole time today:

package com.kircode.codeforfood_test;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;

public class MainActivity extends Activity{

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}

}

We will be working in activity_main.xml, which is located in res/menu/ directory.

Add 3 items here, give them unique ids and titles. Set their icons using the "icon" attribute. I'm using the two snowflake pictures I have in my drawable-hdpi folder. Icons can also be added with code using setIcon() method, but right now I'm doing it using XML.

The showAsAction attribute can be set to multiple values and to some combination of the available values. The values are "never", "ifRoom", "withText", "always", "collaspeActionView". You can use more than one of the keyboards like this: "ifRoom|withText".

The "ifRoom" keyboard indicates that the button will be displayed only if there's space available. The "withText" keyboard tells android to display the text of the button if available (if there is room for that). The "collapseActionView" keyword adds a button that displays a drop-down menu with all the rest of the buttons that are not displayed.

Let's add "withText" to all 3 buttons, "always" to the first button and "ifRoom" to the second and third one.

<menu xmlns:android="http://schemas.android.com/apk/res/android" >

    <item
        android:id="@+id/menu_one"
        android:orderInCategory="1"
        android:showAsAction="always|withText"
        android:icon="@drawable/snowflake"
        android:title="Button one"/>

    <item
        android:id="@+id/menu_two"
        android:orderInCategory="2"
        android:showAsAction="ifRoom|withText"
        android:icon="@drawable/snowflake2"
        android:title="Button two"/>

    <item
        android:id="@+id/menu_three"
        android:orderInCategory="3"
        android:showAsAction="ifRoom|withText"
        android:icon="@drawable/snowflake"
        android:title="Button three"/>

</menu>

On an Android device I have that runs Android 2.3, all the icons are displayed in the classic Options menu in the bottom part of the screen.

This is how the application looks on Android 4 phone:

lok.png

And this is the same application on a tablet:

ko.png

As you can see, the phone could only fit 2 icons without text, while the tablet is wide enough to display all 3 icon with their text labels.

Let's try putting "collapseActionView" for the second and third items:

<menu xmlns:android="http://schemas.android.com/apk/res/android" >

    <item
        android:id="@+id/menu_one"
        android:orderInCategory="1"
        android:showAsAction="always|withText"
        android:icon="@drawable/snowflake"
        android:title="Button one"/>

    <item
        android:id="@+id/menu_two"
        android:orderInCategory="2"
        android:showAsAction="collapseActionView"
        android:icon="@drawable/snowflake2"
        android:title="Button two"/>

    <item
        android:id="@+id/menu_three"
        android:orderInCategory="3"
        android:showAsAction="collapseActionView"
        android:icon="@drawable/snowflake"
        android:title="Button three"/>

</menu>

The tablet now displays a button like this, which spawns a dropdown menu when it is touched:

sokl.png

IMG HERE

The phone, however, does not display such a thing. But the dropdown menu can be called out by pressing the Menu item on the device.

This way, we made sure all the buttons are displayed on all devices, even though in different ways.

Thanks for reading!

Reference PAGE TOP

http://kirill-poletaev.blogspot.it/2013/01/android-beginner-tutorial-part-50.html

0 Comments Leave a comment

Please login in order to leave a comment.

Newest first
!

Sign-in to your Chupamobile Account.

The Easiest way to Launch your next App or Game.

Join Chupamobile and get instant access to thousands of ready made App and Game Templates.

Creating an account means you’re okay with Chupamobile’s Terms of Service and Privacy Policy.