OptionsMenu in Sketchware

In order to create OptionsMenu in Sketchware, follow the steps given below.

1. Create a more Block extra in your project.

2. To define this more block extra use an add source directly block and put following code in it.
}
@Override
public boolean onCreateOptionsMenu (Menu menu){
menu.add(0, 0, 0, "Item 1");
menu.add(0, 1, 1, "Item 2");
menu.add(0, 2, 2, "Item 3");
return true;
}

Note that here the first } closes more block. Rest of the code is outside the more block extra. This is to code for onCreateOptionsMenu where three items are added to the menu.

Also note that 0, 1, and 2 are Id of the items added to the menu, and Item 1, Item 2, Item 3 are the title of the items added. Change the titles to whatever you want.

To display the OptionsMenu items as icons on the ActionBar, add the id of the images to the menu items. Suppose ic_settings_white is the icon for item 1. Then the code above will change as below.
}
@Override
public boolean onCreateOptionsMenu (Menu menu){
menu.add(0,0,0, "Item 1").setIcon(R.drawable.ic_settings_white).setShowAsAction(MenuItem.SHOW_AS_ACTION_ALWAYS);
menu.add(0, 1, 1, "Item 2");
menu.add(0, 2, 2, "Item 3");
return true;
}

3. After this add another add source directly block and put following code in it.
@Override
public boolean onOptionsItemSelected(MenuItem item){
switch (item.getItemId()){
case 0:
showMessage("Item 1 Clicked");
break;
case 1:
showMessage("Item 2 Clicked");
break;
case 2:
showMessage("Item 3 Clicked");
break;
case android.R.id.home:
showMessage("Home Button Clicked");
break;
}
return super.onOptionsItemSelected(item);

This is the code for onOptionsItemSelected. The app will show the messages as written in the code when any item from the OptionsMenu is selected.

Note that showMessage("Text"); works only in Sketchware and it is a short form of Toast messages.

4. Suppose you have three more pages apart from main.xml, namely page1.xml, page2.xml and page3.xml. In order to open these when items in OptionsMenu are selected, follow the steps below.

a. Add three new More Blocks move1, move2, and move3.

b. Add an Intent component intent.

c. Define the more blocks. Use Intent setScreen blocks to move to different screens. See images below.

d. Now add the more blocks in the code at paragraph 2 above. The code for onOptionsItemSelected should now look as given below.
@Override
public boolean onOptionsItemSelected(MenuItem item){
switch (item.getItemId()){
case 0:
_move1();
break;
case 1:
_move2();
break;
case 2:
_move3();
break;
}
return super.onOptionsItemSelected(item);

5. If you want to enable 'home' button in Action Bar alongwith the OptionsMenu, follow the steps given below.

a. Add an add source directly block at the beginning of onCreate event, then put following code in it.
getActionBar().setDisplayHomeAsUpEnabled(true);

And to change the icon add icon ic_dehaze_white using Image manager and then add following after the code above.
getActionBar().setHomeAsUpIndicator(R.drawable.ic_dehaze_white);

b. Now in more Block extra, in onOptionsItemSelected add the case of selecting home button. The code for onOptionsItemSelected should now look as given below.
@Override
public boolean onOptionsItemSelected(MenuItem item){
switch (item.getItemId()){
case 0:
_move1();
break;
case 1:
_move2();
break;
case 2:
_move3();
break;
case android.R.id.home:
showMessage("Home Button Clicked");
break;
}
return super.onOptionsItemSelected(item);

6. Save and Run the project. Now you can see the home button as well as the OptionsMenu on the ActionBar.


Comments

  1. Showing error "Show compile log"

    ReplyDelete
  2. How to add icons for each menu?

    ReplyDelete
  3. I not find *add source directly* un operator ... Help me

    ReplyDelete
    Replies
    1. Goto the operator section and at last you will get it

      Delete
  4. Have error. How to create time on action bar?

    ReplyDelete
    Replies
    1. Check this video https://youtu.be/yirqiM21J4Q

      Delete
  5. How can I set the background color of the Menu?

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. How to add time with am and pm in chat app pls make one tutorial

    ReplyDelete
    Replies
    1. on sketchware pro, use digital clock without any logic blocks.

      Delete
    2. This comment has been removed by the author.

      Delete
  8. It's interesting that many of the bloggers to helped clarify a few things for me as well as giving.Most of ideas can be nice content.The people to give them a good shake to get your point and across the command.
    HELP DESK

    ReplyDelete

Post a Comment

Popular posts from this blog

Simple car racing android game in Sketchware

Creating a Drawing View in Sketchware

Enable Fullscreen for Youtube videos in WebView

How to enable upload from webview in Sketchware?

List of Calendar Format symbols valid in Sketchware