I am using a toolbar but without an Actionbar or a AppBarLayout. Pressing on the Up (Back) button arrow in the top left corner does not trigger the onSupportNavigateUp method. One Stackoverflow ticket indicates that if you override onOptionsItemSelected, it will not be called. So I removed onOptionsItemSelected. But that didn't help. Here's my code:
setSupportActionBar(toolbar)
supportActionBar!!.setDisplayHomeAsUpEnabled(true)
xml layout:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00FFFFFF"/>
In onCreateOptionsMenu I was returning false, which prevents onSupportNavigateUp from being called. I returned false because I needed to hide the overflow menu (3 dots in the upper right corner). Looks like I'll have to find another way of hiding that menu.
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 am trying to integrate Collapsing layout with Navigation Advanced example
What I tried?
Added Collapsing bar layout to main_actvity.xml
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
Modified setupBottomNavigationBar() in MainActivity.kt
private fun setupBottomNavigationBar(){
...
controller.observe(this, Observer { navController ->
mainBinding.collapsingToolbarLayout.setupWithNavController(mainBinding.toolbar, navController)
//setupActionBarWithNavController(navController)
})
...
}
Current issue:
Now I have two ActionBars instead of one. Top one have app name as the title, one below shows nothing initially but when navigated to an sub destination only a grey back arrow is shown, no destination label is shown on the actionbar
Anyone who understand this multiple backstack implementation, please help me to get things work with CollapsingToolbarLayout
Update:
Got rid of one action bar as #Manoj suggested in a comment, Now need to fix not appearing of titles in the actionbar
Update 2:
Although the destination labels(titles) are not shown when navigated to sub destinations, but back button is shown.
if the title is not displayed (and that increasing the appbar layout height "works"), just set the isTitleEnabled of the collapsingToolbarLayout to false.
It should fix the problem
I finally figured out why the toolbar title was not shown reason was I have not set enough height for appbar layout, I was using wrap_content so collapsing toolbar layout was covering the toolbar title. Solution was to set appbar layout height to value larger than 64dp. When I increased the appbar layout height, it looks unusually tall. (Forgive me for my lack of understanding of how collapsing toolbar works)
But this was not my intention, I wanted to enable collapsing toolbar for some specific fragments, I was using single activity concepts as navigation architecture component recommends.
As I read in following answers
Having two toolbars and making one transparent when doing fragment transactions.
Having separate toolbar for each fragment
IMHO Both of these are not good solutions if you are using navigation architecture component, there is no value of using navigation architecture component, if you need to manage fragment transactions or toolbars manually.
So for now I have stop using collapsing toolbar.
I would like to have two search views inside a toolbar in one of my activities: the first for looking up the place of interest and the second for filtering by location.
The searchViews would be on top of each other always expanded. The top one would say "Search" as the hint. The bottom one would say "Nearby" as the hint. To the left would be the home button.
I have come up with two ways that could potentially work but I have encountered problems in both and I don't know how to resolve them.
First Solution (Current)
Here I have a linear layout and inside is a android.support.v7.widget.Toolbar, a view, and followed by a second Toolbar.
This is essentially what I want it to look like but the problem is that changing the hint text in onCreateOptionsMenu changes BOTH hints. I would like the top to say "Search" and the bottom to say "Nearby". It seems that because there are two toolbars, onCreateOptionsMenu affects both of them.
Code:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/search_container"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/search_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar">
</android.support.v7.widget.Toolbar>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginLeft="72dp"
android:background="#90909090"/>
<android.support.v7.widget.Toolbar
android:id="#+id/search_toolbar2"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
app:contentInsetStart="56dp"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar">
</android.support.v7.widget.Toolbar>
<include
layout="#layout/toolbar_action_bar_shadow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"/>
</LinearLayout>`
onCreate:
Toolbar toolbar2 = (Toolbar) findViewById(R.id.search_toolbar2);
setSupportActionBar(toolbar2);
Toolbar toolbar = (Toolbar) findViewById(R.id.search_toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowHomeEnabled(false);
getSupportActionBar().setDisplayShowTitleEnabled(false);
OnCreateOptionsMenu:
SearchView searchViewTop = (SearchView) MenuItemCompat.getActionView(menu.findItem(R.id
.search_top));
SearchManager searchManager1 = (SearchManager) getActivity().getSystemService(Context
.SEARCH_SERVICE);
searchViewTop.setSearchableInfo(searchManager1.getSearchableInfo(getActivity()
.getComponentName()));
searchViewTop.setIconified(false);
searchViewTop.onActionViewExpanded();
searchViewTop.setQueryHint("Nearby");
Second Solution (Old)
The second method involves putting a searchView instead of a second toolbar in the xml file. Although the second searchview isn't inside the toolbar, it can be made to look like it is. The problem I encountered with this is that the searchView not inside the toolbar looks different from the searchView inside the toolbar and how I would like it. When not inside the toolbar, the hint text is aligned further to the right and not directly underneath the top hint text. Any new text entered inside the searchview would be aligned correctly however. I tried customizing the style of the searchview to align it properly but was unable to find a correct method.
I was wondering if there is a way to correct either of my methods to make it work or if there is a new way to setup these two searchViews. Thanks.
I realized that when you call setSupportActionBar() for more than one toolbar, changes in onCreateOptionsMenu affect all the toolbars added. To solve this problem, I just called setSupportActionBar only on my top toolbar. For the bottom toolbar, I called in onCreate
toolbar2.inflateMenu(R.menu.search2);
SearchView searchViewBottom = (SearchView)findViewById(R.id.search_bottom);
searchViewBottom.onActionViewExpanded();
Then handle all actions inside with setOnMenuItemClickListener.
Not sure what you call the round effect when you click to go back to previous activity in my case (arrow back icon) but i like to disable that.
This is the code that puts it on the toolbar, but i cant seem to find (if there is) an option to disable that round effect when clicked.
mToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);
getSupportActionBar().setDisplayShowHomeEnabled(true);
mToolbar.setNavigationIcon(getResources().getDrawable(R.drawable.ic_arrow_back));
Like this round effect buttons produce in toolbar's when pressed. I presume a Material design effect.
Thanks
By changing in your theme you can achieve that. Remove <item name="android:background">#color/toolbar</item> from your theme defined in style.
Follow this stack-overflow link.
Use this in your layout
<android.support.v7.widget.Toolbar
android:id="#+id/yourToolbarId"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/yourId"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:layout_width="wrap_content"
app:layout_height="wrap_content"
app:minHeight="?attr/actionBarHeight"
app:minWidth="?attr/actionBarHeight"
android:src="#drawable/ic_arrow_back"/>
</android.support.v7.widget.Toolbar>
and getSupportActionBar().setDisplayShowHomeEnabled(false); in conjunction
and dont use this
mToolbar.setNavigationIcon(getResources().getDrawable(R.drawable.ic_arrow_back));
Also you have to manually set your click listener to perform specific action you need when it is pressed.
Use false instead of true
getSupportActionBar().setDisplayShowHomeEnabled(false);
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);