I'm trying to highlight menu item title when it is selected in action bar and display its corresponding view in a fragment below. Fragment loading is working good but I'm not able to style menu items when they are clicked.
What I would like to have is something like below mentioned methods-
#Override
public boolean onOptionsItemSelected(MenuItem item) {
// item.setSiblingsStyle(R.style.passive_menu_item);
// item.setStyle(R.style.active_menu_item);
}
Is it possible to style menu title in "onOptionsItemSelected" method? Please help !
You could try to use selector definition:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
<item android:state_pressed="true" android:color="#color/blue_light"/> <!-- pressed -->
<item android:state_enabled="false" android:color="#color/grey_cloud"/> <!-- focused -->
<item android:color="#color/black"/> <!-- default -->
</selector>
I've figured using just text is not a good way. So I decide to add icons and use state of items to toggle by maintaining few variables. Here is an implementation:
private current_selected_menu;
private main_menu;
public void updateMenuState(){
if (main_menu==null){
return;
}
int sz = main_menu.size();
for(int i=0;i<sz;i++){
if(main_menu.getItem(i).getItemId()==current_selected_menu){
main_menu.getItem(i).setEnabled(false);
}
else{
main_menu.getItem(i).setEnabled(true);
}
}
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.sample_menu, menu);
current_selected_menu = menu.getItem(0).getItemId(); // I'm using first item as enabled by default
main_menu = menu;
int sz = menu.size();
for(int i=0;i<sz;i++){
if(menu.getItem(i).getItemId()==current_selected_menu){
menu.getItem(i).setEnabled(false);
}
else{
menu.getItem(i).setEnabled(true);
}
}
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.item1:
// Do something
current_selected_menu = item.getItemId();
updateMenuState();
return true;
case R.id.item2:
// Do something
current_selected_menu = item.getItemId();
updateMenuState();
return true;
default:
// Do Something
return super.onOptionsItemSelected(item);
}
}
As suggested by Xingchen, One can use selectors to define multiple icons. Below is a sample implementation:
icon_selector.xml file in res/drawable:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/icon_passive" android:state_enabled="false"/>
<item android:drawable="#drawable/icon_active" android:state_enabled="true"/>
</selector>
Note: icon_passive.png and icon_active.png are two image files used as icons.
sample_menu.xml file in res/menu:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/menu1" android:icon="#drawable/icon_selector" android:title="menu1" android:showAsAction="always|withText" android:visible="true"></item>
<item android:id="#+id/menu2" android:icon="#drawable/icon_selector" android:title="menu2" android:showAsAction="always|withText" android:visible="true"></item>
<item android:id="#+id/menu3" android:icon="#drawable/icon_selector" android:title="menu3" android:showAsAction="always|withText" android:visible="true"></item>
</menu>
I feel there could be better ways than above mentioned. I'll keep this open. Please feel free to suggest better solutions or better practices : )
Related
Currently, my options menu is aligned to the end of the screen. I want to give it a margin, something like android:layout_marginEnd = "20dp". How can I achieve this?
My options menu:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity">
<item
android:id="#+id/menu_items"
android:icon="#drawable/menu_icon"
app:showAsAction="always">
<menu>
<group android:id="#+id/item1">
<item
android:id="#+id/download"
android:icon="#drawable/download_icon"
android:title="Download"></item>
</group>
<group android:id="#+id/item2">
<item
android:id="#+id/invite"
android:icon="#drawable/invite_icon"
android:title="Invite"></item>
</group>
</menu>
</item>
</menu>
My Custom Toolbar:
<androidx.appcompat.widget.Toolbar
android:id="#+id/menu_toolbar"
app:popupTheme="#style/ThemeOverlay.MyTheme"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_below="#id/greetText"> <!--assume it comes somewhere in the centre due to this-->
</androidx.appcompat.widget.Toolbar>
My Theme for menu items:
<style name="ThemeOverlay.MyTheme" parent="ThemeOverlay.AppCompat.Light">
<item name="android:textColor">#color/dimGray</item>
<item name="android:textSize">14sp</item>
<item name="android:layout_marginEnd">20dp</item> <!-- doesn't work-->
<item name="android:fontFamily">#font/quicksand_medium</item>
<item name="android:background">#drawable/options_menu_background</item>
</style>
Here is the image of my problem. It shows how the end of the menu and the screen are aligned. I want space/margin between these two.
This is an interesting problem. I tried with many things found on the internet, but nothing works. I tried setting the actionOverflowMenuStyle with dropDownHorizontalOffset attribute which does not work either. Finally, I ended up getting a PopupMenu which works just fine. Here is the implementation.
Get your initial menu shorter with a single item which will open up the popup menu as a submenu.
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/menu_items"
android:icon="#drawable/ic_close_swipe"
android:title="#string/app_name"
app:showAsAction="always" />
</menu>
Then create another menu, in your /res/menu/ folder, named popup_menu.xml like the following.
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/menu_items"
android:icon="#drawable/ic_close_swipe"
android:title="#string/app_name"
app:showAsAction="always" />
</menu>
Now in your MainActivity, just add the following functions to handle the click action of the menu button and the popup menu.
public class MainActivity extends AppCompatActivity implements PopupMenu.OnMenuItemClickListener {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar myToolbar = findViewById(R.id.menu_toolbar);
setSupportActionBar(myToolbar);
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.menu, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.menu_items:
showPopupMenu();
return true;
default:
return false;
}
}
public void showPopupMenu() {
PopupMenu popup = new PopupMenu(this, findViewById(R.id.menu_items));
popup.setOnMenuItemClickListener(this);
popup.inflate(R.menu.popup_menu);
popup.setGravity(Gravity.END);
Object menuHelper;
Class[] argTypes;
try {
Field fMenuHelper = PopupMenu.class.getDeclaredField("mPopup");
fMenuHelper.setAccessible(true);
menuHelper = fMenuHelper.get(popup);
argTypes = new Class[]{boolean.class};
menuHelper.getClass().getDeclaredMethod("setForceShowIcon", argTypes).invoke(menuHelper, true);
} catch (Exception e) {
e.printStackTrace();
}
popup.show();
}
#Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()) {
case R.id.invite:
Toast.makeText(this, "Invite", Toast.LENGTH_LONG).show();
return true;
case R.id.download:
Toast.makeText(this, "Download", Toast.LENGTH_LONG).show();
return true;
default:
return false;
}
}
}
I put the working code in this Github Branch. You might consider cloning from that branch and run the application to check if that suffices your expectation.
Hope that helps!
I have an action bar which contains an item shuffle_action.
I have used below case in the onOptionsItemSelected(MenuItem item) function.
switch (item.getItemId()){
case R.id.action_shuffle:
if(MusicService.shuffle) {
item.setChecked(false);
Toast.makeText(this,String.valueOf(item.isChecked()),
Toast.LENGTH_SHORT).show();// returns false
musicService.clearShuffle();
}
else {
item.setChecked(true);
Toast.makeText(this,String.valueOf(item.isChecked()),
Toast.LENGTH_SHORT).show();// returns true
}
musicService.setShuffle();
break;
}
Now this thing works perfectly as i want it to work.
<item
android:id="#+id/action_shuffle"
android:icon="#drawable/shuffle_drawable"
android:title="Shuffle"
app:showAsAction="ifRoom"
android:checkable="true"
android:checked="false"
/>
shuffle_drawable.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true"
android:drawable="#drawable/shuffle_pressed"/>
<item
android:state_checked="false"
android:drawable="#drawable/ic_shuffle_black_18dp"/>
</selector>
The thing is that when the state changes the drawable won't change.Why is this happening?
I need to show the submenu below the bar, not on top of the bar itself.
Copying my actionbar xml below
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" tools:context=".MainActivity">
<item
android:id="#+id/action_pages"
android:orderInCategory="1"
android:showAsAction="withText|always"
android:icon="#drawable/ic_action_pages"
android:title="">
<menu>
<item android:id="#+id/item1" android:title="Placeholder"></item>
</menu>
</item>
</menu>
In the activity (App also has a navigation drawer)
public boolean onCreateOptionsMenu(Menu menu) {
if (!mNavigationDrawerFragment.isDrawerOpen()) {
getMenuInflater().inflate(R.menu.main, menu);
restoreActionBar();
return true;
}
return super.onCreateOptionsMenu(menu);
}
Simply.
<style name="AppTheme" parent="AppBaseTheme">
<item name="actionOverflowMenuStyle">#style/OverflowMenu</item>
</style>
<style name="OverflowMenu" parent="Widget.AppCompat.PopupMenu.Overflow">
<!-- Required for pre-Lollipop. -->
<item name="overlapAnchor">false</item>
<!-- Required for Lollipop. -->
<item name="android:overlapAnchor">false</item>
</style>
Preamble
As usual, I faced a strange problem while developing an Android app, tried to find a solution and landed to this question. As it was in many cases before, there is no an answer. So I was compelled to solve the problem from scratch and now posting the answer with my workaround.
Input
I have an Android app with action bar and some menu items, which have to be extended with dropdown submenu. First attempt was to implement it as suggested by Android documentation. So I added new menu item menu_sort into existing action bar menu and sub-menu container into it:
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="#+id/id1" android:icon="#drawable/ic_1"
android:title="#string/id1" android:showAsAction="withText|always"/>
...
<item
android:id="#+id/menu_sort"
android:icon="#drawable/ic_menu_sort_selector"
android:title="▾"
android:titleCondensed="▾"
android:showAsAction="withText|always">
<menu>
<item
android:id="#+id/menu_sort_by_name"
android:showAsAction="never"
android:checkable="true"
android:checked="true"
android:title="#string/sort_by_name"/>
<item
android:id="#+id/menu_sort_by_priority"
android:showAsAction="never"
android:checkable="true"
android:checked="false"
android:title="#string/sort_by_priority"/>
<item
android:id="#+id/menu_sort_by_memory"
android:showAsAction="never"
android:checkable="true"
android:checked="false"
android:title="#string/sort_by_memory"/>
</menu>
</item>
</menu>
Result
The effect was exactly as described in the question: the submenu is displayed on top of the action bar. Here is the screenshot taken on Android 5.1.1:
I played with many options and code snippets - nothing helped. Finally I came to the following
Solution
First, move all the submenu into a separate menu layout, say, menu/sorting.xml, and remove it from menu_sort item of the main menu (shown above).
Second, modify or create onPrepareOptionsMenu event handler with the following code:
#Override
public boolean onPrepareOptionsMenu(Menu menu)
{
// as solution utilizes PopupMenu,
// take care about older Android versions if necessry
// if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB)
// here goes most crazy part: we use menu id
// to retrieve corresponding view, automatically created by OS;
// imho, this is a hack, and menu item should have getView() method or similar;
View menuItemView = findViewById(R.id.menu_sort);
// by the way, menuItemView could probably be null under some circumstances
// create a popup anchored to the view (menu item)
final PopupMenu popupMenu = new PopupMenu(this, menuItemView);
// API 14
// popupMenu.inflate(R.menu.sorting);
// API 11 (HONEYCOMB)
popupMenu.getMenuInflater().inflate(R.menu.sorting, popupMenu.getMenu());
// process popup clicks as appropriate
popupMenu.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener()
{
#Override
public boolean onMenuItemClick(MenuItem item)
{
switch(item.getItemId())
{
// ... place some code
}
return true;
}
});
// bind the popup to the item menu
menu.findItem(R.id.menu_sort).setOnMenuItemClickListener(new OnMenuItemClickListener()
{
#Override
public boolean onMenuItemClick(MenuItem item)
{
popupMenu.show();
return true;
}
});
return super.onPrepareOptionsMenu(menu);
}
Here is the result:
Now the dropdown is displayed as expected from very beginning.
#Stan's solution doesn't work for me, so here's my way to implement sub-menu on top of ActionBar (but below the main-menu of course):
I've created 2 xml files: menu_main.xml and menu_more.xml located in res/menu directory
The first one 'menu_main.xml' contain the menu:
<menu
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<!-- our addMenu doesn't have sub-items-->
<item
android:id="#+id/action_add"
android:icon="#drawable/ic_note_add_white_24dp"
android:title="#string/action_add"
app:showAsAction="ifRoom"/>
<!-- our moreMenu which show drop-down menu when clicked-->
<item
android:id="#+id/action_more"
android:icon="#drawable/ic_more_vert_white_24dp"
android:title="#string/action_more" <!--in text: "more"-->
app:showAsAction="always"/>
</menu>
And the second one 'menu_more.xml' contain the drop-down menu:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<!-- This menu will be hidden by default-->
<!-- But will be visible when moreMenu with '#+id/action_more' is clicked-->
<item
android:id="#+id/action_settings"
app:showAsAction="ifRoom|withText"
android:title="#string/action_settings" <!-- In text: "Settings"-->
android:visible="true"/>
</menu>
Here is what previous menus look like:
result-after-add-2-xmls (i have not enough 10 reputation to display image)
In the activity, i've overridden this method:
public boolean onPrepareOptionsMenu(Menu menu)
In the previous method, i get reference to the main menuItem (in this case is menu with #+id/action_more located in menu_main.xml file), then set setOnMenuItemClickListener on it and finally, declare and set up a PopupMenu instance to manage and display sub-menu items:
// show popup menu when menuMore clicked
menu.findItem(R.id.action_more).setOnMenuItemClickListener(new MenuItem.OnMenuItemClickListener()
{
#Override
public boolean onMenuItemClick(MenuItem item)
{
// get reference to menuMore item
View menuMore = findViewById(item.getItemId());
// create a popup anchored to the view (menuMore)
// notes: if declare and set up PopupMenu Outside of this onMenuItemClick()
// then it'll not work!
// Because: the view you put into PopupMenu() could be null
final PopupMenu popupMenu = new PopupMenu(getApplicationContext(), menuMore);
// inflate 'menu_more.xml' layout file
// which contain all sub-items of menu
popupMenu.getMenuInflater().inflate(R.menu.menu_more, popupMenu.getMenu());
// process popup clicks on sub-items
popupMenu.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener()
{
#Override
public boolean onMenuItemClick(MenuItem item)
{
switch(item.getItemId()){
case R.id.action_settings:
Toast.makeText(getApplicationContext(), "showing SettingsActivity..",
Toast.LENGTH_SHORT).show();
break;
// more items go here
}
return true;
}
});
popupMenu.show();
return true;
}
});
return super.onPrepareOptionsMenu(menu);
And here is final result:
final-look-drop-down-menu
I am new to android and stuck at the point where i have to detect clicks on submenus that are defined in XML file
my XML file is :
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/ccard_menu1"
android:title="Select from Profile?"
></item>
<item android:id="#+id/ccard_menu2"
android:title="Add Field"
>
<menu >
<item android:id="#+id/submenu1"
android:title="Add Products"
></item>
<item android:id="#+id/submenu2"
android:title="Add Clients"
></item>
<item android:id="#+id/submenu3"
android:title="Add a Custom Field">s</item>
</menu>
</item>
</menu>
how do i detect clicks on "submenu 1,2,3" in onOptionsItemSelected method?
how do i have to structure the switch case?
I you are looking for something like this:
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.your_menu, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.submenu1:
// do something
return true;
case R.id.submenu2:
//do something else
return true;
// etc..
default:
return super.onOptionsItemSelected(item);
}
}
Please correct me if I am mistaken.
I have created a menu which is activated on clicking the menu button on the device however it is showing as a list
My in res/menu/menu.xml code is as follows:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/menuRefresh"
android:icon="#drawable/ic_menu_refresh"
android:title="Refresh"/>
<item android:id="#+id/menuAbout"
android:icon="#drawable/ic_menu_info_details"
android:title="About"/>
</menu>
and in my main activity i have:
//Initiate Menu XMl file
#Override
public boolean onCreateOptionsMenu(Menu menu){
MenuInflater menuInflater = getMenuInflater();
menuInflater.inflate(R.menu.menu, menu);
return true;
}
/**
* Even handling for individual menu items selected
* Identity single menu item by its id
*/
#Override
public boolean onOptionsItemSelected(MenuItem item){
switch(item.getItemId()){
case R.id.menuRefresh:
Toast.makeText(MainActivity.this, "Refresh Selected", Toast.LENGTH_SHORT).show();
return true;
case R.id.menuAbout:
Toast.makeText(MainActivity.this, "About Selected", Toast.LENGTH_SHORT).show();
return true;
default:
return super.onOptionsItemSelected(item);
}
}
If i select an item from the list, i get the notification as expected.
How do i make the menu look like the Options menu on the android dev site?
That is what the options menu looks like on new devices, a list. If you want your options to be part of the top bar (called the Action Bar), add android:showAsAction to your xml.
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/menuRefresh"
android:icon="#drawable/ic_menu_refresh"
android:title="Refresh"
android:showAsAction = "always"/>
<item android:id="#+id/menuAbout"
android:icon="#drawable/ic_menu_info_details"
android:title="About"
android:showAsAction = "always"/>
</menu>
For demo purposes, I chose the attribute to be "always", but you have more options:
"ifRoom"
"never"
"withText"
"always"
"collapseActionView"
Even in new devices, you can set the theme to an old one and the menu will display in the old 6-item table layout:
<style name="AppBaseTheme" parent="android:Theme">