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
Related
Usual behaviour:
When we create option, we usually have three dots and when we click three dots button, option menu will be displayed. I have button on bottom too. When I click the button, option menu is displaying
My Requirement:
When we create option, how to display option menu without three dots. Because I have button on bottom and when I click the button , option menu is diplaying. But I need to remove only three dots.(hamberger menu) because my requirement is, I need to use older type where menu is present in bottom and when we click the bottom menu,it display overflow menu in androidxappcompat activity.
Update:
I used getSupportActionBar() to hide the menu. But I need to move the option menu at bottom.
needsMenuKey = appliInfo.metaData.getBoolean("com.package.name");
Log.i("MainActivity", "needsMenuKey[" + needsMenuKey + "]");
if (needsMenuKey) {
if (getSupportActionBar() != null) {
getSupportActionBar().hide();
}
You should either use NoActionBar Theme or should override onCreateOptionsMenu() and return false without calling super.onCreateOptionsMenu(). I hope one of these solutions will work for you. If yes, do mark this as answer.
So, to wrap-up the requirements:
Removing the three dots icon from the top. Instead, having a bottom button that shows the overflow options menu.
Anchor the options overflow menu to the bottom (instead of the top) when the bottom button is hit.
The system overflow options menu should be anchored to the actionBar/toolBar that hosts it; and therefore you can't show this menu at bottom unless you move this bar to the bottom too. Otherwise you need to create a customized popup menu rather than the system one.
So, the solution here is to create a customized Toolbar at the bottom of the activity:
Layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_constraintBottom_toBottomOf="parent">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</com.google.android.material.appbar.AppBarLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
And this requires to use a NoActionBar theme at themes.xml or styles.xml such as:
Theme.MaterialComponents.DayNight.NoActionBar or Theme.AppCompat.DayNight.NoActionBar.
And set the new supportActionBar in behavior:
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val toolbar = findViewById<Toolbar>(R.id.toolbar)
setSupportActionBar(toolbar)
title = ""
}
override fun onCreateOptionsMenu(menu: Menu): Boolean {
menuInflater.inflate(R.menu.menu_main, menu)
return true
}
}
This fulfills the top mentioned requirements apart from that the new supportActionBar is now at the bottom, so you probably need to add another toolbar at the top to be customized as you want.
In order to replace the three-dots icon at the bottom with a gauge icon, there are multiple answers here, and here is a one:
Add the below style:
<style name="customoverflow">
<item name="android:src">#drawable/ic_baseline_settings_24</item>
</style>
Apply it to the main theme:
<item name="android:actionOverflowButtonStyle">#style/customoverflow</item>
You can also add a paddingEnd to the toolBar to have some space between the icon and the far end of the screen:
<androidx.appcompat.widget.Toolbar
...
android:paddingEnd="16dp"
android:paddingRight="16dp"/>
I have been adding a navigation drawer to one of my apps, and I started to wonder whether or not it would be better to switch from using a ListView to multiple TextViews for the navigation drawer list items. Looking at the Google Design Guidelines on Navigation Drawer content (specifically the section on 'Scrolling'), I noticed that it may look nicer with multiple TextViews.
At the moment, I am using a ListView and ImageView in my navigation drawer (it looks a little like this. However, when I scroll in my navigation drawer (I do this by turning my device landscape as there are not enough items in my list yet), only the ListView scrolls, and the ImageView stays as it is. I want it to be able to scoll more like this, where the ImageView is also scrolled with the ListView.
Additionally, I found that my ListView in my navigation drawer does not have the ripple effects as shown in this image although other ListViews in my other Activitys and Fragments do.
What are the issues I am facing and how could I go about resolving these?
Update:
In Google's I/O App (2014), there seems to be a LinearLayout at the bottom of the navigation drawer layout which I think is responsible for the list of items shown. Could someone explain how this would work?
only the ListView scrolls, and the ImageView stays as it is
It sounds like your drawer contains an ImageView at the top and then a ListView follows. With this configuration only the ListView will scroll (because it's the only view that's scrollable).
You need to add the ImageView as a header which is always at the beginning of the list. As one of the comments suggested, do listView.addHeaderView.
there seems to be a LinearLayout at the bottom of the navigation
drawer layout which I think is responsible for the list of items
shown. Could someone explain how this would work?
They use the LinearLayout as a container to hold all the TextViews:
private void createNavDrawerItems() {
mDrawerItemsListContainer = (ViewGroup) findViewById(R.id.navdrawer_items_list);
...
int i = 0;
for (int itemId : mNavDrawerItems) {
mNavDrawerItemViews[i] = makeNavDrawerItem(itemId, mDrawerItemsListContainer);
mDrawerItemsListContainer.addView(mNavDrawerItemViews[i]);
++i;
}
}
I believe the reason they use a LinearLayout and inflate all the items programmatically is to be able to use separator items easily:
private View makeNavDrawerItem(final int itemId, ViewGroup container) {
...
if (itemId == NAVDRAWER_ITEM_SEPARATOR) {
layoutToInflate = R.layout.navdrawer_separator;
} else if (itemId == NAVDRAWER_ITEM_SEPARATOR_SPECIAL) {
layoutToInflate = R.layout.navdrawer_separator;
} else {
layoutToInflate = R.layout.navdrawer_item;
}
...
return view;
}
In a ListView you'd have to create a separate item type and use the divider's layout there, which could possibly get more cumbersome.
At first glance, however, this code just seems to be re-inventing the wheel as all of this is possible with a ListView.
As of 29th May 2015 (after Google I/O 2015), you can use the Android Design Support Library to add a NavigationView to your app(s). The Android Developer Blogspot article states the following:
Navigation View
The navigation drawer can be an important focal point for identity and navigation within your app and consistency in the design here can make a considerable difference in how easy your app is to navigate, particularly for first time users. NavigationView makes this easier by providing the framework you need for the navigation drawer as well as the ability to inflate your navigation items through a menu resource.
...
You can then start using the Design library with a single new dependency:
compile 'com.android.support:design:22.2.0'
...
The Design library, AppCompat, and all of the Android Support Library are important tools in providing the building blocks needed to build a modern, great looking Android app without building everything from scratch.
Implementing scrollable Navigation Drawer using android.support.v4.widget.DrawerLayout and NavigationView could be even simpler than it is described at: http://android-developers.blogspot.ru/2015/05/android-design-support-library.html
That article suggests adding each element of your application's Navigation Drawer as a Menu Item. This is cool and definitely a way to go for most of developers.
But what if you already has a Navigation Drawer implemented inside e.g. Linear Layout?
It appears that you can easily make your old good layout scrollable: just set it as a "app:headerLayout" of the NavigationView. No more changes are needed!
So, in a final solution you will have:
A layout of your Activity, similar to the above blog post, but without an "app:menu="#menu/drawer" attribute e.g. this:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<!-- your content layout -->
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/drawer_header"
/>
</android.support.v4.widget.DrawerLayout>
And a layout for all your old Drawer content in the "drawer_header.xml" file, migrated without any changes to this scrollable Drawer, E.g. this:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:choiceMode="singleChoice"
android:orientation="vertical">
<TextView
android:id="#+id/myFirstButton"
android:onClick="onMyFirstButtonClick"
android:text="#string/my_first_button_title"/>
<TextView
android:id="#+id/goToTheTopButton"
android:onClick="onGoToTheTopButtonClick"
android:text="#string/go_to_the_top_title"/>
<View style="#style/Divider"/>
<!-- Some other "menu items" -->
</LinearLayout>
For full working example see this activity layout: https://github.com/andstatus/andstatus/blob/master/app/src/main/res/layout/timeline.xml and this commit, where I migrated to a scrollable Navigation Drawer: https://github.com/andstatus/andstatus/commit/a80b299de714bdd65cacb138ffb31adc3ea23a98
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);
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
This question already has answers here:
Actionbar not shown with AppCompat
(3 answers)
Closed 9 years ago.
I am using appcompat in my app. I want the menu items to show on actionbar or at least the overflow(3 dots) to show them when there is no room. There is lot of space on the actionbar, but still they don't show up. The menu flow raises from the bottom and that too only when menu button is pressed.
menu_activity.xml:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto" >
<item
android:id="#+id/menu_lang"
android:showAsAction="always"
android:title="#string/menu_lang"
android:icon="#android:drawable/ic_input_lang"/>
</menu>
activity:
#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_activity, menu);
return true;
}
This post says that it not works when hardware menu button is present. But other apps are able to show items on the same device. So, that answer seems to be incorrect. Can someone please help on this?
You seem to be using the wrong menu:
Your file is named "menu_activity.xml" and you inflate the menu with the Resource-Id: R.menu.reminder_menu
The Resource name of the menu should be the same as the file name, i.e.: R.menu.manu_activity
Try it with this again - I ran into this too once and it drove me nuts...
Update
After clarification that the above part was for obfuscation, please make sure that:
You extend ActionBarActivity.
You use (or extend) one of the Theme.AppCompat themes for the activity (or whole app)
Because on older devices, the Actionbar related attributes are not present, make sure that all these attributes in the XML are used with a custom namespace. Here that would be the showAsAction attribute, so that the compatibility library can pick them up.
You already had the custom namespace defined ("app", in the menu tag). You need to change the android:showAsAction tag to app:showAsAction according to the Android guide.
Your corrected menu_activity.xml would then look like this:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto" >
<item
android:id="#+id/menu_lang"
app:showAsAction="always"
android:title="#string/menu_lang"
android:icon="#android:drawable/ic_input_lang"/>
</menu>
The extended Android guide for actionbar covers these new and nasty traps...
Okay I think I found a solution for you. It is called Overflow Menu and you need to call the below method in your onCreate method.
private void getOverflowMenu() {
try {
ViewConfiguration config = ViewConfiguration.get(this);
Field menuKeyField = ViewConfiguration.class.getDeclaredField("sHasPermanentMenuKey");
if(menuKeyField != null) {
menuKeyField.setAccessible(true);
menuKeyField.setBoolean(config, false);
}
} catch (Exception e) {
e.printStackTrace();
}
}
Try this and let me know if it works for you.
EDIT:
I think I understood your problem finally. I can give you one idea. If you do not want to use overflow menu and just display menu items as displayed in the screen-shot you have posted, you can create a layout on top of your activity.
You can take a linear layout, give a background that looks the same as action bar and place whatever icons you want to put there, and give functionality to them with onClickListener. Hope this will give you some idea. This way you can create your own custom menu. Try the layout below and replace ic_launcher drawable with menu icons. Then just set onClickListeners to them and perform whatever functions you want to perform inside onClick method.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#66000000" >
<ImageView
android:id="#+id/xMenuBtn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:background="#drawable/ic_launcher" />
<TextView
android:id="#+id/xMenuTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Chats"
android:textSize="18sp"
android:layout_toRightOf="#+id/xMenuBtn1"
android:layout_centerVertical="true" />
<ImageView
android:id="#+id/xMenuBtn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/xMenuBtn3"
android:background="#drawable/ic_launcher" />
<ImageView
android:id="#+id/xMenuBtn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#drawable/ic_launcher" />
</RelativeLayout>
Try in your activity onCreate() :
ActionBar bar = getSupportActionBar();
bar.setTitle(R.string.app_name);
and then :
#Override
public boolean onPrepareOptionsMenu(Menu menu) {
menu.clear();
getSupportMenuInflater().inflate(R.menu.menu_activity, menu);
return super.onPrepareOptionsMenu(menu);
}