Develop Reference

How to add an extra menu to android toolbar in Kotlin

The question is clear! I need to add another menu beside of the main menu in toolbar. I have created the status.xml menu file like this:
<?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/online"
android:orderInCategory="10"
android:title="#string/action_settings"
app:showAsAction="never" />
<item
android:id="#+id/busy"
android:orderInCategory="20"
android:title="#string/action_settings"
app:showAsAction="never" />
<item
android:id="#+id/invisible"
android:orderInCategory="30"
android:title="#string/action_settings"
app:showAsAction="never" />
</menu>
and added a clickable TextView to toolbar like this:
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
... />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.appcompat.widget.Toolbar>
Now I need to add it separately to the toolbar, but in code below:
override fun onCreateOptionsMenu(menu: Menu): Boolean {
// Inflate the menu; this adds items to the action bar if it is present.
menuInflater.inflate(R.menu.main, menu)
menuInflater.inflate(R.menu.status, menu)
return true
}
It add all of items to main menu. Any help will be appreciated.

If this menus have to be separate that appear depending on some kind of condition you can use onPrepareOptionsMenu.
Check this question and developer guide on menus
Android: Multiple Option Menus in one Activity
https://developer.android.com/guide/topics/ui/menus

both app:showAsAction="ifRoom" and android:showAsAction="ifRoom" do not work as expected

I have an options menu defined as
<?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/action_search"
android:title="#string/action_search"
android:icon="#drawable/ic_search_white_24dp"
android:orderInCategory="1"
app:actionViewClass="android.support.v7.widget.SearchView"
app:showAsAction="always|collapseActionView"/>
<item
android:id="#+id/action_favorite"
android:title="#string/action_favorite_add"
android:icon="#drawable/ic_favorite_border_white_24dp"
android:orderInCategory="2"
app:showAsAction="ifRoom"
/>
<item
android:id="#+id/action_info"
android:title="#string/action_info"
android:icon="#drawable/ic_info_outline_white_24dp"
android:orderInCategory="3"
app:showAsAction="ifRoom"
/>
</menu>
The options menu itself works correctly, however the ifRoom actions do not collapse to an overflow when I have a longer toolbar title. Instead the toolbar title gets truncated.
If I use android:showAsAction instead of app:showAsAction and I ignore the error regarding the support library, the items are always collapsed to an overflow. No matter the length of the title.
I should also mention, that the toolbar is within a collapsible toolbar
I would like to the have the search action item to appear always (no matter the length of the title) and the other two items to appear only if the toolbar title is not truncated.
UPDATE: layout and onCreate
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:background="#color/white">
<android.support.design.widget.AppBarLayout
android:id="#+id/rm_app_bar_layout"
android:layout_width="match_parent"
android:layout_height="160dp"
android:layout_gravity="top"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:elevation="0dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/rm_collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:titleEnabled="false"
app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"
app:contentScrim="#color/colorPrimary"
app:statusBarScrim="?attr/colorPrimary"
>
<RelativeLayout
android:id="#+id/rm_expanded_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax">
<ImageView
android:id="#+id/rm_img_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:imagePlaceholder="#{#drawable/img_placeholder}"
app:imageUrl="#{vm.imageUrl}"
android:scaleType="centerCrop"
/>
<!-- Some other layouts overlayed over the image view -->
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/rm_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="#{vm.name}"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<!-- rest of layout -->
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
onCreate
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
activityComponent().inject(this)
setAndBindContentView(R.layout.activity_some_activity, savedInstanceState)
setTranslucentStatusBar()
setSupportActionBar(binding.rmToolbar)
supportActionBar?.let {
it.setDisplayHomeAsUpEnabled(true)
it.setDisplayShowTitleEnabled(true)
}
binding.rmAppBarLayout.addOnOffsetChangedListener(object: AppBarStateChangeListener() {
override fun onStateChanged(appBarLayout: AppBarLayout?, state: State) {
if (state != State.IDLE) { // collapsed or expanded
invalidateOptionsMenu()
}
}
})
// some other view code
// viewModel load code
}

Please try this hope so it will be helpful for you. I don't know if this works in general but in my case it does:
<?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/action_search"
android:title="#string/action_search"
android:icon="#drawable/ic_search_white_24dp"
android:orderInCategory="1"
app:actionViewClass="android.support.v7.widget.SearchView"
app:showAsAction="always|collapseActionView"/>
<item
android:id="#+id/action_favorite"
android:title="#string/action_favorite_add"
android:icon="#drawable/ic_favorite_border_white_24dp"
android:orderInCategory="2"
app:showAsAction="collapseActionView"
/>
<item
android:id="#+id/action_info"
android:title="#string/action_info"
android:icon="#drawable/ic_info_outline_white_24dp"
android:orderInCategory="3"
app:showAsAction="collapseActionView"
/>
</menu>

How can I override my menu bar to come on my application bar?

I have recycler view + viewpager + toolbar in my activity. When I long click on the row in recycler view it should show me a menu bar with a delete option. But this is what I get. Any ideas as to why it is coming above my application name?
This is the xml of my main activity:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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"
android:id="#+id/main_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.kaad.sampleproject.MainActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/main_activity_tool_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/main_activity_tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/main_activity_tool_bar"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:tabIndicatorColor="#ff00ff"
app:tabMode="fixed"
app:tabSelectedTextColor="#ffffff"
app:tabTextColor="#d3d3d3" />
<android.support.v4.view.ViewPager
android:id="#+id/main_activity_viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/main_activity_tablayout" />
</RelativeLayout>
I kept an add and about menu which never gets displayed for some reason:
Here is the xml of both my menus:
<?xml version="1.0" encoding="utf-8"?>
<menu
xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/menu_bar_main"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
tools:context=".MainActivity">
<item
android:id="#+id/menu_item_new"
android:icon="#drawable/ic_add_white_36dp"
android:title="#string/menu_new"
app:showAsAction="ifRoom|withText" />
<item
android:id="#+id/menu_item_about"
android:title="#string/menu_about"
app:showAsAction="never" />
</menu>
<?xml version="1.0" encoding="utf-8"?>
<menu
xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/menu_bar_delete"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
tools:context=".MainActivity">
<item android:id="#+id/menu_item_delete"
android:icon="#android:drawable/ic_menu_delete"
android:title="#string/delete" />
</menu>
The xml of my styles
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!--<item name="colorPrimary">#FF595951</item>-->
<!--<item name="colorPrimaryDark">#FF5C5C5C</item>-->
<!--<item name="colorAccent">#FFCCCCCC</item>-->
<!--<item name="android:textColorPrimary">#FF0FF0</item>-->
<item name="windowActionBar">true</item>
<item name="windowNoTitle">true</item>
</style>
This is Main Activity:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_my_main);
database = new Database(this);
categories = database.getCategories();
myToolbar = (Toolbar) findViewById(R.id.main_activity_tool_bar);
setSupportActionBar(myToolbar);
// Get the ViewPager and set it's PagerAdapter so that it can display items
myViewPager = (ViewPager) findViewById(R.id.main_activity_viewpager);
myPagerAdapter = new MyPagerAdapter(getSupportFragmentManager(), MyMainActivity.this, categories);
myViewPager.setAdapter(myPagerAdapter);
// Give the TabLayout the ViewPager
myTabLayout = (TabLayout) findViewById(R.id.main_activity_tablayout);
myTabLayout.setupWithViewPager(myViewPager);
// Iterate over all tabs and set the custom view
for (int i = 0; i < myTabLayout.getTabCount(); i++) {
TabLayout.Tab myTab = myTabLayout.getTabAt(i);
myTab.setCustomView(myPagerAdapter.getTabView(i));
}
bus.getInstance().register(this);
}
This is how I am calling my menu bar in my main prescription fragment
public class CustomMultiSelectorCallback extends ModalMultiSelectorCallback {
private int count;
public CustomMultiSelectorCallback(MultiSelector multiSelector) {
super(multiSelector);
}
#Override
public boolean onCreateActionMode(ActionMode actionMode, Menu menu) {
super.onCreateActionMode(actionMode, menu);
count = 0;
actionMode.getMenuInflater().inflate(R.menu.list_item_delete, menu);
return true;
}

Issue for About button:
<item
android:id="#+id/menu_item_about"
android:title="#string/menu_about"
app:showAsAction="never" />
update the never part to "ifRoom"
Regarding the menu appearing, can you be more explicit, as to me it seems in Relative Layout you wanted the Toolbar to be top and the views to come after it and that is what it shows.

So I have solved one of the problems. This is what I edited in my code to display add and about buttons in the toolbar.
First, in your onCreate in the fragments, add this line:
setHasOptionsMenu(true);
Second, in your styles, change your theme to something which has NoActionBar. In my case I did this:
<style name="AppThemeOfStyles"parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#FF595951</item>
<item name="colorPrimaryDark">#FF5C5C5C</item>
<item name="colorAccent">#FFCCCCCC</item>
<item name="android:textColorPrimary">#FF0FF0</item>
<item name="windowActionBar">true</item>
<item name="windowNoTitle">true</item>
</style>
I also changed the name of my theme from AppTheme to AppTheme of styles since AppTheme is already a theme defined. So better to change your theme name to something else.
This leads us to the result below:
But my delete is still coming on the top of the toolbar on longpress.
Any suggestions, advice will be appreciated :)
UPDATED:
Use this in your theme for the overlay to work:
<item name="windowActionModeOverlay">true</item>
Here is the end result:

customizing android toolbar programmatically

I want to use android v7.toolbar in my project with fragments. So i did something like below in my main activity xml. Because i dont want to add all fragments xml to android.support.v7.widget.Toolbar
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:id="#+id/toolBar" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/fragment_container">
</FrameLayout>
</LinearLayout>
i am adding fragments with programmatically. And in some fragments i have to change right side of the toolbar. For example in some fragments i have to use just 1 right menu icon and another fragments 2. How can i achieve it?
Also is there a way to change icon resource which is in right side of the toolbar from fragments?
Thanks,

You can create menu.xml and put all your menu items in it. Set all the items visibility to false. This hides everything.
Then in your fragment's onCreate set setHasOptionsMenu(true), this will allow you to override onCreateOptionsMenu(Menu m, MenuInflater inflater).
In this method you can do menu.findItem(id.of.item).setVisible(true/false).
Examples:
menu.xml:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="com.sample.app.MainActivity">
<item
android:id="#+id/action_refresh"
android:icon="#drawable/ic_action_refresh"
android:orderInCategory="101"
app:showAsAction="ifRoom"
android:title="#string/action_refresh"
android:visible="false"/>
<item
android:id="#+id/action_edit_account"
android:icon="#drawable/ic_action_edit"
android:orderInCategory="102"
app:showAsAction="never"
android:title="#string/action_edit_account"
android:visible="false"/>
<item
android:id="#+id/action_enable_offline_token"
android:orderInCategory="105"
app:showAsAction="never"
android:title="#string/action_enable_offline_token"
android:visible="false"/>
<item
android:id="#+id/action_disable_offline_token"
android:orderInCategory="105"
app:showAsAction="never"
android:title="#string/action_disable_offline_token"
android:visible="false"/>
<item
android:id="#+id/action_save"
android:icon="#drawable/ic_action_save"
android:orderInCategory="106"
app:showAsAction="ifRoom"
android:title="#string/action_save"
android:visible="false"/>
</menu>
Fragment:
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setHasOptionsMenu(true);
}
#Override
public void onCreateOptionsMenu(Menu menu, MenuInflater inflater)
{
super.onCreateOptionsMenu(menu, inflater);
menu.findItem(R.id.action_refresh).setVisible(false);
menu.findItem(R.id.action_save).setVisible(true);
}
To change icons you can just get the menu and do a findItem and setIcon.

Android - Popup menu don't display below menu action bar

I created a menu and popup menu like picture below (I get in internet and edit by paint), I don't know why it doesn't display normal http://i.imgur.com/jHPobCH.png. I want the interface like this http://i.imgur.com/08XomVV.png and moever, how do I change popup menu background color? I tried as below but not success. I test on Samsung Galaxy J and android 4.4.2.
MainActivity.java
public class MainActivity extends ActionBarActivity {
#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.menu_main, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin" tools:context=".MainActivity">
<WebView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/webView"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
menu_main.xml
<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/action_filter"
android:icon="#drawable/ic_filter_white_18dp"
android:title="#string/action_filter"
app:showAsAction="ifRoom" />
<item android:id="#+id/action_label"
android:icon="#drawable/ic_add_circle_outline_white_18dp"
android:title="#string/action_label"
app:showAsAction="ifRoom" />
<item android:id="#+id/action_settings"
android:title="#string/action_settings"
app:showAsAction="never" />
</menu>
<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/action_filter"
android:icon="#drawable/ic_filter_white_18dp"
android:title="#string/action_filter"
app:showAsAction="ifRoom" />
<item android:id="#+id/action_label"
android:icon="#drawable/ic_add_circle_outline_white_18dp"
android:title="#string/action_label"
app:showAsAction="ifRoom" />
<item android:id="#+id/action_settings"
android:title="#string/action_settings"
app:showAsAction="never" />
</menu>
styles.xml
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="android:background">#3079EB</item>
<item name="android:popupMenuStyle">#style/PopupMenu</item>
</style>
<style name="PopupMenu" parent="Widget.AppCompat.Light.PopupMenu">
<item name="android:popupBackground">#android:color/white</item>
</style>
P/S: I'm a beginner android development it

Can you please post Your entire code here . From the first look what i can understand is the height of the layout where you are populating the popup menu is much high . So even after populating the four items , its having enough of empty space . Change the layout_height of the layout where you are inflating the popup to wrap-content instead of using some fixed height . I hope that will solve the issue .