Almost every application will need a menu in order to facilitate a user to perform actions on the application. In Android there are three types of menus possible.
- Options Menu
- Context Menu
- Sub Menu
The Options menu is the one that appears when a user touches the menu button on the mobile. This is something that is associated with an activity. In 3.0 and later, this is available in the Action Bar itself for quick access.
In this article, I am showing how to create an Options Menu for devices having Android 2.3 or below.
The Context Menu is a floating list of menu items that appears when a user touches and holds a particular item displayed in the view, which has a menu associated with it.
The Sub Menu is a floating list of menu items that appears when the user touches a menu item that contains a nested menu.
There are two ways of creating an Options Menu in your application. One is by instantiating the Menu class and the other is by inflating a Menu from an XML menu resource. Based on best practices it is always better to define the Menu in an XML and inflate it in your code.
Now, let us start with the example.
I am going to just define 3 menu items in the XML. Inflate it in my code. And when a user clicks on any of the menu items, I just Toast a message on what has been clicked.
NOTE: This is as usual not a practically useful piece, but sticking to my style, I want to keep it as uncluttered and as simple as possible so that the learning happens easily. And the focus is only on what concept we are trying to learn.
So, here is my options_menu.xml that is created in the res/menu folder:
<?xml version="1.0" encoding="utf-8"?>
<menu >="http://schemas.android.com/apk/res/android">
<item android:id="@+id/next"
android:icon="@drawable/ic_next"
android:title="@string/next" />
<item android:id="@+id/previous"
android:icon="@drawable/ic_previous"
android:title="@string/previous" />
<item android:id="@+id/list"
android:icon="@drawable/ic_list"
android:title="@string/list" />
</menu>
You see that the Menu root node consists of 3 item leaf nodes. Each of the items consists of an id, icon and title. The resource id is unique to that item and it allows the application to recognize which item has been clicked by the user. The icon is a drawable that should exist in the res/drawable folder and is the one shown in the menu item. The string is the item’s title.
The above assumes that you have three images ic_next, ic_previous and ic_list copied into the drawable folder. It goes without saying that these image sizes should be kept as small as possible.
Once this is ready, we will create a class called ViewOptionsMenu. It’s onCreate(…) method would be a simple one calling the super method and displaying the content as shown below.
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
The main.xml just shows the message: “Click on the Options Menu to view the available Menu Options”. This message as per the norm is defined in the strings.xml file that exists in the res/values folder. Here are the contents of the main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout >="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/welcome"
android:textSize="20sp" android:textStyle="bold" android:capitalize="none" android:typeface="sans"/>
</LinearLayout>
Now, I need to override the method: onCreateOptionsMenu(Menu menu). This method is called by Android the first time the activity is loaded. This is so for Android 2.3 and below. Here is the code:
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.options_menu, menu);
return true;
}
This method is getting a handle to the MenuInflater and using it to inflate the options menu that we have defined earlier in options_menu.xml in the res/menu folder. That is it. The Menu is created. Isn’t is so simple?
Now, that the menu is created, how do we respond to the user when he clicks on the menu. This is done by overriding the onOptionsItemSelected(MenuItem item) method in the Activity itself as shown below:
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.next:
Toast.makeText(this, "You have chosen the " + getResources().getString(R.string.next) + " menu option",
Read More..
Sunday, February 28, 2016
Date and Time Picker Views Android Developer Tutorial Part 20
Continuing my tutorials on some UI related stuff… In Part 16 & 17, I spoke about Simple ListView and Custom ListView. In Part 18, though it seems like a tutorial on Threads and Handlers, I have touched upon ProgressDialog, another view.
Here I would like to talk on the DatePicker and TimePicker that are bundled with the SDK. Both are very similar. So, I will talk only about DatePicker, but the sample code will have both.
Typically, we would want an end user to be able to set a date though a DatePickerDialog that pops-up on some user action. So, I have a button “Set Date” on the click of which a DatePickerDialog pops-up. Once the user selects a date and “sets” it, it is displayed back in a TextView field.
So, the code associated with the button is:
pickDate.setOnClickListener( new OnClickListener() {
@Override
public void onClick(View v) {
showDialog(DATE_DIALOG_ID);
}
});
showDialog(…) is a method available on an Activity Itself. It just takes an integer to help decide which dialog should actually be shown. This is decided in the onCreateDialog(…) method that gets automatically invoked when showDialog(…) is called.
Here is the code for the same:
protected Dialog onCreateDialog(int id){
switch(id) {
case DATE_DIALOG_ID:
return new DatePickerDialog(this, dateListener, year, month, day);
case ….
}
return null;
}
In this method, when the int passed is DATE_DIALOG_ID, a new DatePickerDialog is passed along with the values for year, month and day. Where did I set values for these? In the onCreate(…) method itself, I have done this:
final Calendar cal = Calendar.getInstance();
year = cal.get(Calendar.YEAR);
month = cal.get(Calendar.MONTH);
day = cal.get(Calendar.DAY_OF_MONTH);
Also note that a handle to a listener is expected to be given to the DatePickerDialog. I will come to this listener a little later.
I have also updated the Date - TextView with these values in the updateDate() method which is invoked in the onCreate(…) method itself.
private void updateTime() {
timeDisplay.setText(new StringBuilder().append(hours).append(:)
.append(min));
}
So far, what I have done is shown how to create a Dialog and set the date.
Once the dialog shows up, when a user sets the date and clicks ‘set’, the listener that is invoked in on the DatePickerDialog. The method is onDateSetListener whose handle is passed during the creation of the DatePickerDialog itself.
private DatePickerDialog.OnDateSetListener dateListener =
new DatePickerDialog.OnDateSetListener() {
@Override
public void onDateSet(DatePicker view, int yr, int monthOfYear, int dayOfMonth) {
year = yr;
month = monthOfYear;
day = dayOfMonth;
updateDate();
}
};
In this method, on the click on the dialog, we are setting the day, month, year values to the new values that the user selected and also calling the updateDate() method to refresh the TextView with what the user selected.
It is this simple.
Same thing can be done with the TimePicker as well. The only difference is that you can pass a Boolean variable to say whether you want the time in 24 hour or 12 hour pattern.
Here is the complete code for the same.
Read More..
Here I would like to talk on the DatePicker and TimePicker that are bundled with the SDK. Both are very similar. So, I will talk only about DatePicker, but the sample code will have both.
Typically, we would want an end user to be able to set a date though a DatePickerDialog that pops-up on some user action. So, I have a button “Set Date” on the click of which a DatePickerDialog pops-up. Once the user selects a date and “sets” it, it is displayed back in a TextView field.
So, the code associated with the button is:
pickDate.setOnClickListener( new OnClickListener() {
@Override
public void onClick(View v) {
showDialog(DATE_DIALOG_ID);
}
});
showDialog(…) is a method available on an Activity Itself. It just takes an integer to help decide which dialog should actually be shown. This is decided in the onCreateDialog(…) method that gets automatically invoked when showDialog(…) is called.
Here is the code for the same:
protected Dialog onCreateDialog(int id){
switch(id) {
case DATE_DIALOG_ID:
return new DatePickerDialog(this, dateListener, year, month, day);
case ….
}
return null;
}
In this method, when the int passed is DATE_DIALOG_ID, a new DatePickerDialog is passed along with the values for year, month and day. Where did I set values for these? In the onCreate(…) method itself, I have done this:
final Calendar cal = Calendar.getInstance();
year = cal.get(Calendar.YEAR);
month = cal.get(Calendar.MONTH);
day = cal.get(Calendar.DAY_OF_MONTH);
Also note that a handle to a listener is expected to be given to the DatePickerDialog. I will come to this listener a little later.
I have also updated the Date - TextView with these values in the updateDate() method which is invoked in the onCreate(…) method itself.
private void updateTime() {
timeDisplay.setText(new StringBuilder().append(hours).append(:)
.append(min));
}
So far, what I have done is shown how to create a Dialog and set the date.
Once the dialog shows up, when a user sets the date and clicks ‘set’, the listener that is invoked in on the DatePickerDialog. The method is onDateSetListener whose handle is passed during the creation of the DatePickerDialog itself.
private DatePickerDialog.OnDateSetListener dateListener =
new DatePickerDialog.OnDateSetListener() {
@Override
public void onDateSet(DatePicker view, int yr, int monthOfYear, int dayOfMonth) {
year = yr;
month = monthOfYear;
day = dayOfMonth;
updateDate();
}
};
In this method, on the click on the dialog, we are setting the day, month, year values to the new values that the user selected and also calling the updateDate() method to refresh the TextView with what the user selected.
It is this simple.
Same thing can be done with the TimePicker as well. The only difference is that you can pass a Boolean variable to say whether you want the time in 24 hour or 12 hour pattern.
Here is the complete code for the same.
