Searchview not showing in Toolbar - android

I have actually a problem with my Searchview on the Support AppCompat v7 lib 24.0.0.
The SearchView is not shown up no text and input text (look screenshot)
The searchquery work perfect.
Thats my 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:title="#string/search"
android:id="#+id/action_search"
android:icon="#drawable/ic_search_24dp"
app:showAsAction="ifRoom|collapseActionView"
app:actionViewClass="android.support.v7.widget.SearchView"/>
</menu>
And here my onCreateOptionsMenu;
menu.clear();
inflater.inflate(R.menu.menu_search, menu);
MenuItem searchItem = menu.findItem(R.id.action_search);
searchView = (SearchView) MenuItemCompat.getActionView(searchItem);
searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
#Override
public boolean onQueryTextSubmit(String query) {
//Perform the final search
return false;
}
#Override
public boolean onQueryTextChange(String newText) {
//Text has changed, apply filtering?
return false;
}
});
I hope someone can help me. :)
Sebastian

i have this problem too, i've changed Toolbar height to absolute value instead of wrap_content and problem solved. i don't know why but i think this issue is related to CoordinatorLayout and height of toolbar, something breaks the SearchView height. if i use LinearLayout instead of CoordinatorLayout and AppBarLayout it works.
menu.xml
<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:icon="#drawable/ic_search_white_24dp"
android:orderInCategory="100"
android:title="#string/action_search"
app:actionViewClass="android.support.v7.widget.SearchView"
app:showAsAction="always|collapseActionView" />
</menu>
layout.xml
<android.support.design.widget.CoordinatorLayout 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.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/toolbar_height"
android:paddingTop="#dimen/toolbar_top_padding"
android:background="?attr/colorPrimary"
app:title="#string/drawer_item_publisher_customization"
app:layout_scrollFlags="scroll|enterAlways|snap"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
app:tabGravity="fill"
style="#style/DefaultTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
toolbar_height value:
<dimen name="toolbar_height">75dp</dimen>
Before absolute height value (layout_height:"wrap_content"):
After absolute height value (layout_height:"75dp"):

if you are using theme: .NoActionBar
set this in your onCreate()
setSupportActionBar(toolbar);

This is very odd. I'm using build tools 25.0.1 and support lib 25.1.0. For me the accepted answer was not necessary, but the way the menu item was defined needs a small change. I need it like so:
<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">
<item
android:id="#+id/search"
android:title="#string/search_title"
android:icon="#drawable/ic_search_24dp"
app:showAsAction="always|collapseActionView"
app:actionViewClass="android.widget.SearchView"/>
Where app:showAsAction is the key. Lint underlines this as red and tells me:
Should use android:showAsAction when using the appcompat library.
However if I have it set to android:showAsAction then the search view simply does not appear. Go figure.

Make sure you have add AppCompat library to your project. Is your activity was extended "AppCompatActivity"?
And also showAsAction shoud be: showAsAction="always|collapseActionView"
Hope this help!

None of the answers worked for me. I realized my case was a bit different. I omitted this line inside the fragment's onViewCreated()
setHasOptionsMenu(true)
Worked for me

Related

SearchView is collapsable even after "app:showAsAction="always"

I've got a simple fragment toolbar:
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbarDriver"
app:menu="#menu/menu_toolbar_driver_list"
app:navigationIcon="#drawable/baseline_menu_24"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:collapseIcon="#drawable/baseline_menu_24"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</com.google.android.material.appbar.AppBarLayout>
Menu:
<?xml version="1.0" encoding="utf-8"?>
<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">
<item
android:id="#+id/action_searchDrivers"
android:icon="#android:drawable/ic_menu_search"
android:title="Search Drivers..."
app:actionViewClass="androidx.appcompat.widget.SearchView"
app:showAsAction="always" />
</menu>
Code:
mtSearchDrivers.setIconified(false);
Which looks like this:
As you can see, on the right side there is the "x" button which should only be used to remove the searchviewtext but if no text is entered like in this case and the user clicks on "x", the searchview collapses even when app:showAsAction="always" is set.. What can the issue be?
I solved the issue:
I just put the searchview as a child of my toolbar, rather than an own menuitem.

SearchView icons are not showing in Android

I am trying to understand how to implement a SearchView in Android in my toolbar. The problem is that depending on the configurations I choose I get different interface results.
This is the layout of my Activity:
<RelativeLayout 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"
android:layout_width="match_parent"
android:layout_height="fill_parent"
tools:context="com.construct.v2.activities.teams.ActivityTeams"
android:background="#ffffff"
android:id="#+id/relativeLayout">
<include android:id="#+id/toolbar" layout="#layout/toolbar_shadow"/>
<ListView
android:id="#+id/listview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/toolbar" />
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
app:tabMode="fixed"
app:tabGravity="fill"
app:tabIndicatorColor="#125688"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</RelativeLayout>
This is my toolbar_shadow layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/PopupMenuStyle"
android:id="#+id/my_awesome_toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
app:titleTextColor="#android:color/black"
android:layout_alignParentTop="true"
android:gravity="right"
android:elevation="5dp">
<TextView
android:id="#+id/delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="#dimen/s_text_size"
android:padding="#dimen/small_margin"
android:layout_gravity="right|end"
android:layout_marginEnd="#dimen/s_margin"
android:textColor="#000000"
android:text="#string/edit"/>
</android.support.v7.widget.Toolbar>
And this is the layout file for my search item:
<?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/search"
android:title="#string/search"
app:icon="#drawable/ic_search_black_24dp"
android:icon="#drawable/ic_search_black_24dp"
app:showAsAction="collapseActionView|ifRoom"
app:actionViewClass="android.support.v7.widget.SearchView" />
</menu>
With this configuration I get this output:
But if I click on the magnifying glass I get this:
If I start typing I get this:
So I thought that it was because I have this configuration app:showAsAction="collapseActionView|ifRoom" but I tried to change to always but i got this output:
The magnifying glass disappears. But if I click on the place where it is supposed to be I get this output:
Which is the correct output I am looking for, but I don't know why the magnifying glass is not showing.
This is the part in my activity where I initialize the searchview:
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_search_team, menu);
SearchManager searchManager = (SearchManager)
getSystemService(Context.SEARCH_SERVICE);
searchMenuItem = menu.findItem(R.id.search);
searchView = (SearchView) searchMenuItem.getActionView();
ImageView searchClose = (ImageView) searchView.findViewById(android.support.v7.appcompat.R.id.search_close_btn);
searchClose.setImageResource(R.drawable.ic_action_cancel_black);
for (TextView textView : findChildrenByClass(searchView, TextView.class)) {
textView.setTextColor(Color.BLACK);
textView.setHintTextColor(Color.BLACK);
}
searchView.setSearchableInfo(searchManager.
getSearchableInfo(getComponentName()));
searchView.setSubmitButtonEnabled(true);
searchView.setOnQueryTextListener(this);
return true;
}
And this is how I initialize my toolbar:
#Override
protected void initToolbar() {
toolbar = (Toolbar) findViewById(R.id.toolbar);
if(toolbar!=null) {
if (user_type == 1) {
toolbar.setTitle(R.string.collaborators_title);
} else if (user_type == 2) {
toolbar.setTitle(R.string.admin_title);
}
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
toolbar.setNavigationIcon(R.drawable.ic_action_back_black);
//getSupportActionBar().setDisplayHomeAsUpEnabled(true);
//toolbar.setTitle("Teste");
//toolbar.setTitleTextColor(Color.parseColor("#000000"));
//final TextView edit = (TextView) findViewById(R.id.delete);
//edit.setText(" ");
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
onBackPressed();
}
});
}
}
Since I can't see the rest of the code where you implement the functionality for the x button, I'm just gonna take a stab at it. Add a listener for when the user leaves the search view to go back to the view with the magnifying glass. In that listener add this line:
<Your activity>.findViewById(R.id.search).setVisibility(View.VISIBLE);
It could be possible that the searchview automatically set the view to invisible, but you never reset the visibility for the user.
Edit:
app:icon="#drawable/ic_search_black_24dp"
android:icon="#drawable/ic_search_black_24dp"
there is difference between app: prefix and android: prefix. With appcompat-v7 library you can use android: prefix and remove app:icon line .
app:showAsAction="collapseActionView|ifRoom"
Change this line to
app:showAsAction="always|collapseActionView"
In searchview if we select only always as showasAction then back arrow is not visible.
Check the theme and styles of your app because a I had had the same problem that you and it made me crazy.
I found the solution changing the theme and styles.
If you are using Toolbar I assume that your main theme is
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
For the AppBarLayout use this
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark" />
For the Toolbar use this
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
Note that one is Dark and the other is Light. You can exchange both if it adjust better to your main theme
Use the suggest from Zohra Khan
Change this line to
app:showAsAction="always|collapseActionView" In searchview if we select only always as showasAction then back arrow is not visible.
If it's not clear, take a look to this example from where I took this ideas
Hope this helps you

Remove Android SearchView padding when expanded

I'm trying to implement SearchView in my Android application but there is an extra padding when expanding it.
The SearchView is integrated in the Menu and when the app launches, I have a search icon inside the Toolbar. When I click that search button, the SearchView expands but has an extra padding.
Here are some photos so you can understand the issue:
This is the initial toolbar
When I click the search icon, this is what I get
I found one solution, to add a negative left padding (-16dp) to the SearchView: searchView.setPadding(getResources().getDimensionPixelSize(R.dimen.search_view_minus), 0, 0, 0);
Unfortunately, if I use this solution the search icon on the right side of the toolbar will be affected (somehow the SearchView gets over the search icon).
This is my 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/action_search"
android:icon="#drawable/ic_search_white_48dp"
app:showAsAction="always"
app:actionViewClass="android.support.v7.widget.SearchView"
android:title="Cauta..."/>
</menu>
This is my toolbar layout:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_home"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
app:theme="#style/AppTheme.Title"
app:titleMarginStart="0dp"
app:navigationIcon="#drawable/ic_menu_white_24dp"
app:contentInsetStartWithNavigation="0dp"
app:contentInsetEndWithActions="0dp"
app:contentInsetStart="0dp"
app:contentInsetEnd="0dp" />
This is some custom style applied to the SearchView:
<style name="searchStyle" parent="Widget.AppCompat.SearchView.ActionBar">
<item name="queryHint">#string/search_hint</item>
<item name="searchIcon">#drawable/ic_search_white_24dp</item>
<item name="voiceIcon">#drawable/ic_keyboard_voice_white_24dp</item>
<item name="android:textColorHint">#android:color/white</item>
</style>
Is there a proper solution to my problem?

Menu with Text only not showing in Toolbar

I have to show back icon, Logo and text (Next) in Toolbar. Next is right aligned. I tried placing text via menu. I have set logo and back button to toolbar.
toolbar.setLogo(R.mipmap.logo);
toolbar.setNavigationIcon(R.mipmap.back);
Also, I have inflated following menu in onCreateOptionsMenu
Menu inflated:
<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"
>
<item
android:id="#+id/action_next"
android:title="#string/next"
app:showAsAction="always" />
Text Menu is not visible at all. if I put icon in menu item, it gets displayed.
I have used android.support.v7.widget.Toolbar.
Edited:
I solved it. In case someone else gets struck with such issue.
Please add
<item name="android:actionMenuTextColor">#color/blue</item>
in styles. Menu itemw as getting selected on click but was not visible, means it was showing white text color on white toolbar. Setting menuText color solved my problem.
Android Documentation explains that the withText option for showAsAction will
Also include the title text (defined by android:title) with the action item.
Since that is what you want, code the following.
<item
android:id="#+id/action_next"
android:title="#string/next"
app:showAsAction="always|withText" />
You can do something like this:
First, remove default title in your Activity:
getSupportActionBar().setDisplayShowTitleEnabled(false);
Then, your toolbar layout can be like this:
<LinearLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/material_blue"
android:elevation="5dp"
android:minHeight="?attr/actionBarSize" >
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:gravity="end"
android:text="#string/app_name"
android:textColor="#android:color/white" />
</android.support.v7.widget.Toolbar>
</LinearLayout>
And, in your activity handle the click event:
toolbarTop.findViewById(R.id.toolbar_title).setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Log.d(TAG,"Clicked");
}
});
Try Changing to support widget. This worked for me
app:actionViewClass="android.support.v7.widget.SearchView"
This what it looked after the change
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">
<item android:id="#+id/search"
android:title="#string/search_title"
android:icon="#drawable/ic_search"
app:showAsAction="always|withText"
app:actionViewClass="android.support.v7.widget.SearchView"
tools:context=".AppHome.HomeActivity"/>
</menu>
If you are getting an empty action with no text but blank space in it,
it might happen if you have created your own tool bar in the layout and have also used the Action bar in your theme's parent.
If you are creating your own toolbar then use parent="Theme.MaterialComponents.DayNight.NoActionBar" in your themes, both normal and night themes.
It's happening because of the style used in your layout.
To solve this, define a new style and use it in your layout.
<style name="ToolBarStyle" parent="ThemeOverlay.MaterialComponents.Dark.ActionBar">
<item name="android:itemBackground">#fff</item> // background color of the menus
<item name="android:textColor">#000</item>// text color of the menus
</style>
Use it like this in your layout
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="#style/ToolBarStyle"
app:popupTheme="#style/ThemeOverlay.MaterialComponents.Light"
android:background="#color/primary_pink"
android:minHeight="?attr/actionBarSize"
android:elevation="4dp"
/>

AppCompat_v7 Toolbar as actionbar not showing 'always' actions from menu, but API Toolbar does

After 2 days of struggling with the new API 21 Toolbar and appCompat_v7, I think I found a bug on it. If you have 2 actions on your menu like this:
<item
android:id="#+id/action_test"
android:showAsAction="always"
android:icon="#drawable/ic_launcher"
android:title="#string/action_settings"/>
<item
android:id="#+id/action_settings"
android:orderInCategory="100"
android:showAsAction="never"
android:title="#string/action_settings"/>
and a appCompat toolbar defined like this:
<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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.example.toolbar.MainActivity" >
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="52dp"
android:id="#+id/toolbar">
</android.support.v7.widget.Toolbar>
</RelativeLayout>
after inflating (or setting the setSupportActionBar method)
Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
toolbar.setTitle("esurance");
setSupportActionBar(toolbar);
you will get the toolbar menu without your action icon, it will display it on the overflow menu.
But, if you use the Toolbar class from API 21, it will show your actions as defined on your menu layout...
<Toolbar
android:layout_width="match_parent"
android:layout_height="52dp"
android:id="#+id/toolbar">
</Toolbar>
Maybe I'm missing something here, but so far, I've been unable to display actions outside the overflow menu using appCompat. Any help on this will be much appreciated.
Per the Action Bar training, you have to use the app:showAsAction attributes rather than the android:showAsAction attribute:
Notice that the showAsAction attribute above uses a custom namespace defined in the <menu> tag. This is necessary when using any XML attributes defined by the support library, because these attributes do not exist in the Android framework on older devices. So you must use your own namespace as a prefix for all attributes defined by the support library.
So your menu file should look like:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto" >
<item
android:id="#+id/action_test"
app:showAsAction="always"
android:icon="#drawable/ic_launcher"
android:title="#string/action_settings"/>
<item
android:id="#+id/action_settings"
android:orderInCategory="100"
app:showAsAction="never"
android:title="#string/action_settings"/>
</menu>
put
xmlns:app="http://schemas.android.com/apk/res-auto" int your menu tag
like this
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
then use app:showAsAction = "always"
Remember that use app:showAsAction in all menu item not android:showAsAction
`
first of all use the app:showAsAction instead of android:showAsAction (like #ianhanniballake)
after that in onCreateActionMode after Inflating your menu setShowAsAction
in code like this
#Override
public boolean onCreateActionMode(ActionMode mode, Menu menu) {
mode.getMenuInflater().inflate(R.menu.your_menu_name, menu);
menu.findItem(R.id.your_first_menu_id).setShowAsAction(MenuItem.SHOW_AS_ACTION_ALWAYS);
menu.findItem(R.id.your_second_menu_id).setShowAsAction(MenuItem.SHOW_AS_ACTION_ALWAYS);
return true;
}
i had the same problem so after working on it these lines of code works fine for me.

Categories

Resources