I'm trying to create a custom popup menu that I would like to position on the overflow menu button of the actionbar (am using a Toolbar with setSupportActionBar() for this if it matters). I found out that this can be done with the setAnchorView() (from reading Custom Menu item in Overflow menu).
However I cant seem to figure out how to retrieve the overflow menu as a view (that I could use to set the anchor with).
Also I did try anchoring this to the parent layout of the activity itself but it showed up on the left top, and the height of the menu was equal to the height of the actionbar (which is not very useful).
Does anyone know how this can be achieved?
Instead of having an actual overflow menu you could "cheat" a little bit. Have an icon in your actionbar that looks like the overflow icon. You should set showAsAction to always on this MenuItem. OnClick of the overflow icon, you show a ListPopupWindow that's anchored to the MenuItem view. If the ListPopupWindow doesn't show up where you want it to, you can call ListPopupWindow.setHorizontalOffset() and ListPopupWindow.setVerticalOffset()
I agree with Andrew Orobator in that it is most likely going to need to be "faked" but I would recommend adding an actual view to your Toolbar, instead of trying to deal with Menu items:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="#dimen/elevation_med">
<ImageView
android:id="#+id/overflow"
android:layout_width="2dp"
android:layout_height="2dp"
android:background="#drawable/overflow_icon"
android:layout_gravity="right"/>
</android.support.v7.widget.Toolbar>
In this way, you can directly get the view from the toolbar via toolbar.findViewById(R.id.overflow); or something similar, then set the view as your anchor. It means you would also have to set your own onClick listeners to it as it would no longer get onOptionsMenu() callbacks, but I think this would be the best way to handle your scenario.
I learnt how to get a view from a menuitem here: Android : Get view Reference to a Menu Item
Call View v = findViewById(R.id.overflow) within your onOptionsItemSelected method.
Use that view as your anchor in your popupmenu: PopupMenu popupMenu = new PopupMenu(this, v);
Related
I want to provide a numbered month's list dropdown with calendar icon click on the app toolbar. I am having two issues/questions to implement this.
Unable to place calendar, icon with out disturbing the title (NavHost traversed fragment names).
Don't know how to show a clickable drop down list with some options on that icon
With the help of internet, I have implemented single activity and multi fragment (Jetpack navigation) architecture app as shown in below image.
Below is the code I have tried to implement this:
And here is App screenshots with different behaviors
When I uncomment above code (21 to 35), I see 1 and 3 of below images and If I comment that ou, I see 2 and 4.
For the first issue, is it just a UI trick to update the RelativeLayout width to warp_content of child ? or any other way to achieve this properly.
For the second issue, I didn't find a one step or atleast two step solution. Every where it shows Navigation menu option, when I try for "Android toolbar clickable dropdown list".
My Final goal: Show a calendar icon with months list click able dropdown (1 month, 3 months, 6 months, 9months ... e.t.c) on the right side of the toolbar when user lands on Invoices page for filtering
Make this in xml layout file:
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.Toolbar
android:id="#+id/app_bar"
style="#style/MyTheme.ToolbarStyle"
android:layout_width="wrap_content"
android:layout_height="?attr/actionBarSize"
android:paddingStart="12dp"
android:paddingLeft="12dp"
android:paddingEnd="12dp"
android:paddingRight="12dp"
app:title="#string/app_name"/>
<ImageView
android:id="#+id/yourImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_your_icon" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.appbar.AppBarLayout>
You need use popup menu. Make xml file for menu. For example:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/month1"
android:title="1month" />
<item
android:id="#+id/months3"
android:title="3months" />
<item
android:id="#+id/months6"
android:title="6months" />
<item
android:id="#+id/months9"
android:title="9months" />
</menu>
And than use menu in activity. Create instance of popup menu, set listener for it and set listener for youe image. Write this in onCreate function:
ImageView image = findViewById(R.id.yourImageView);
PopupMenu popupMenu = new PopupMenu(this, image);
popupMenu.getMenuInflater().inflate(R.menu.menu_your_name, popupMenu.getMenu());
popupMenu.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {
public boolean onMenuItemClick(MenuItem item) {
//Do what you want
return true;
}
});
image.setOnClickListener(view->{
popupMenu.show();
});
May be this is not the most optimal way, but it must be work as you want.
I found the answer, for my multiple fragment and single activity architecture ("Jetpack navigation") related menu/custom action icons in toolbar
Note: Below 1,2,3 helps to solve above problem statement 1 and the remaining helps 2
Create another menu file with required content.
Populate it with `onCreateMenuOptions in the desired fragment
(Note: Include setHasOptionsMenu(true) in the onCreate)
If you inflate a menu in this onCreateMenuOptions, you new menu will be appended to the already existing one of parent/main activity inflated.
override fun onCreateOptionsMenu(menu: Menu, inflater: MenuInflater) {
inflater.inflate(R.menu.invoice_list_menu, menu)
super.onCreateOptionsMenu(menu, inflater)
}
Create a sub menu. in the menu item with radio checkable group. See the last screenshot for example
override onOptionsItemSelected(item: MenuItem) to capture the menu clicks. Make sure you are updating the checkable status of the radio item.
Note: Make sure you are using the style="#style/Widget.MaterialComponents.Toolbar.Primary" from above 2nd link, to get the proper white overlayed nice action bar. Otherwise you will end up having some dark text colored action bar with out known why
Below links are helpful to understand more:
Android developers docs Menu (To understand things inside menu)
Android material menu action bar implementation (To create a proper action bar with material design compatible)
Extended ActionBar guide (To add search to toolbar and create collapsable toolbar )
Android Jetpack Navigation example contained menu usage
Below screenshot is the final output and code reference
I have created app with similar functionality to a browser. This is what I have right now:
Whenever user clicks on the edittext(the one with google.com inside it) i want to to take all of the space in actionbar covering overflow button and other icons(those are menu items as well).
Is there any way way I could do that? So far I have tried setting the layout-weight of the edittext to 1 but it does not work. The custom view inside actionbar is an linear layout like this one here:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/searchfield"
android:layout_width="0dip"
android:layout_weight="1"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:imeOptions="actionGo"
android:inputType="textWebEmailAddress"
android:text="www.google.com" />
</LinearLayout>
I should also mention that i want to do it programatically.
Thanks guys
You can hide these icons by following topic: How do I hide a menu item in the actionbar?
I think you can easily hide the actionbar when click,
something like:
ActionBar actionBar = getActionBar(); //OR getSupportActionBar();
actionBar.hide();
Then bring it back when you need it by using:
actionBar.show();
I basically want to add a menu button to the far left of my action bar; like it does in the navigation drawer layout:
There must be an easy way to do this, all of the tutorials I am reading seem far to complicated for something that is already available for a application template.
Simplest solution: create a custom toolbar
Add a imageview and a textview to it.
<toolbar ...>
<imageview... /><--your image-->
</toolbar>
Or you can change Activity icon.
getActionBar().setIcon(R.drawable.my_icon);
As the title says, I'm setting using setActionView on a MenuItem, here's the layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ProgressBar
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_margin="4dp"
android:layout_centerInParent="true"/>
</RelativeLayout>
The issue is that the ProgressBar appears aligned to the right. (It should be aligned to the center, same as the MenuItem icon. Icons are 32dp
How can I achieve this?
I faced similar issue today and coudn't find any good QA on SO. Hence I did some research. Here are my findings on the matter:
Android Menu is implemented in this way:
If you have inflated an actionView to have:
icon (optional)
title (optional, or to say it can be made optional by setting it as "")
a custom view
and you don't set icon, set title as "" and set actionView to make the menuItem appear to contain only the custom view which you inflated using setActionView, then:
Android forces the custom view's width to be wrap_content and remaining area gets occupied by icon+title of the menuItem.
We can think of this implementation as:
Think of the entire view after margin as ParentLinearLayout which is divided into LinearLayout1 and LinearLayout2 (depicted in the image above as Layout 1 and Layout 2 respectively)
Now LinearLayout1 has width=0dp and weight=1
And LinearLayout2 has width=wrap_content
Hence no matter what we set, currently, we cannot right align the inflated custom view (action view) in menu.
To be technically accurate, you can right align if you really need this done by checking out the internal implementation code for the navigation menu by Android. But not really worth the effort. Any feature is a tradeoff of time required vs outcome.
Try this android:layout_gravity="center"
You should try android:gravity="center" in RelativeLayout.
I have created custom tab bars by following the post given below:
How to create a Tab-like UI in Android?
No I need to display a set on sub menu when the center tab (actually it is a button) is clicked. I need the sub menu to pop up like in this drawing (sub menu should be above my main layout):
I believe that this can be achieved by putting an additional layout above the custom tab bar in which a set of buttons can be placed one after another. But I am not sure which layout needs to be used and how I can get the same style in the drawing. Please help me to find a solution.
you're correct with just adding another layout above the button you want to open it, and then setting its visibility to gone until you want to animate in it.
a regular LinearLayout would work fine, and then adding 4 buttons to it would work as well, then you would want to make sure those buttons used the same styles as the built-in android menu buttons (or style it yourself) but check out some of the built in styles here
example:
your activity
<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">
//all your other activity layout stuff goes here
<!--add your new menu-->
<LinearLayout
android:id="#+id/my_menu_layout"
android:visibility="gone"
... />
<Button
android:id="#+id/menu_btn_1"
style="#android:style/Widget.Holo.ActionButton.TextButton" //as example of built-in style
... />
//more buttons
</LinearLayout>
then in your activity class, assign an onClickListener to the button that will toggle the menu and animate the view in
//animation xml you make
Animation inFromBottom = AnimationUtils.loadAnimation(this, R.anim.layout_in_bottom);
mMenuLayout.startAnimation(inFromBottom);
mMenuLayout.setVisibility(View.VISIBLE);
now your view will animate in and you can go about adding onClick listeners to the buttons