Android Yelp like Search bar in ActionBar - android

I am trying to create android application that takes multiple parameters when searching. Currently, I have a searchable interface and am able search from my action bar. However, I want to create a yelp like search bar where I have 2 text fields to enter in data as shown in the image:
How can I add an additional text field when searching?
Here is the code I am using to initalize the search
#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_home, menu);
// Associate searchable configuration with the SearchView
SearchManager searchManager =
(SearchManager) getSystemService(Context.SEARCH_SERVICE);
final SearchView searchView =
(SearchView) menu.findItem(R.id.action_search).getActionView();
searchView.setSearchableInfo(
searchManager.getSearchableInfo(getComponentName()));
// set query change listener to hide keyboard after input has been
// submitted
searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
#Override
public boolean onQueryTextChange(String newText) {
return false;
}
#Override
public boolean onQueryTextSubmit(String query) {
// hides and then unhides search tab to make sure keyboard
// disappears when query is submitted
searchView.clearFocus();
return false;
}
});
and here is my menu_layout:
<item
android:id="#+id/action_search"
android:title="#string/search"
android:orderInCategory="100"
impulz:showAsAction="always"
impulz:actionViewClass="android.widget.SearchView"/>
<item android:id="#+id/action_settings" android:title="#string/action_settings"
android:orderInCategory="100" impulz:showAsAction="never" />
Thank you very much.

you can use
actionBar.setCustomView(R.layout.custom_search);
and set the actionBar programmatically "custom view"
like this:
custom_search.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="right"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<com.actionbarsherlock.widget.SearchView
android:id="#+id/search1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:iconifiedByDefault="false"
android:visibility="invisible" />
<com.actionbarsherlock.widget.SearchView
android:id="#+id/search2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:iconifiedByDefault="false"
android:visibility="invisible" />
</LinearLayout>
<ImageButton
android:id="#+id/btn_search_content"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/search_content" />
</LinearLayout>
menu.xml
<item
android:id="#+id/menu_search"
android:icon="#drawable/red_icon"
android:showAsAction="always"
android:title="search" />
use setCustomView into your onCreate()
MainActivity
#Override
public void onCreate(Bundle savedInstanceState) {
// ...
actionBar.setCustomView(R.layout.custom_search);
actionBarCustomView = action_bar.getCustomView();
searchView = ((SearchView) actionBarCustomView.findViewById(R.id.search1));
searchView2 = ((SearchView) actionBarCustomView.findViewById(R.id.search2));
searchView.setOnCloseListener(new SearchView.OnCloseListener() {
#Override
public boolean onClose() {
searchView.setVisibility(View.INVISIBLE);
searchView2.setVisibility(View.INVISIBLE);
return false;
}
});
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.menu_search:
//set visibilty
//do what ever you want
break;
}
return true;
}
Hope this will work out for you.

Related

How do I move the search icon to the right side on the action bar?

The search bar is supposed to be here:
And in run-time it goes here:
This is the code for my menu activity:
xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:id="#+id/search"
android:layoutDirection="rtl"
android:title="#string/Search"
android:icon="#drawable/search_icon"
app:showAsAction="always|collapseActionView"
app:actionViewClass="androidx.appcompat.widget.SearchView"
/>
</menu>
And I'm inflating it on another activity like this:
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.search_bar,menu);
MenuItem item = menu.findItem(R.id.search);
SearchView searchView = (SearchView) item.getActionView();
searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
#Override
public boolean onQueryTextSubmit(String query) {
return false;
}
#Override
public boolean onQueryTextChange(String newText) {
return false;
}
});
return super.onCreateOptionsMenu(menu);
}
I also tried changing the gravity programatically like this:
searchView.setLayoutParams(new ActionBar.LayoutParams(Gravity.RIGHT));
Any help would be greatly appreciated, especially if it contains the reason as why it's not behaving as I expected since I'd really like to understand what's happening.
Thanks!
remove android:layoutDirection="rtl"

layout issue while adding searchView in toolbar ( fragment )

in my fragment i added a toolbar now am trying to add here a searchView which expands and collapse its working fine on a action bar but am having layout issue while using this on my toolbar :
here's my toolbar and below of that there's 2 buttons
my issue #1 is that here my icon of searchView is not visible but when you touch below the clock (5:16 in the status bar ) , searchView expands see second image
you can see that now searchView is visible and the title (its a textView) of toolbar shifted to left for making room for the searchView which is also a issue and when am typing anything on search view the colour of text is not visible (but searchView is working fine ) only the searched text is not visible in the searchView
when i again tap below at the clock my searchView collapses and title also set on its right position
here's my xml file of fragment :
<RelativeLayout 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_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:id="#+id/toolbar"
android:theme="#style/ToolBarStyle"
android:elevation="5dp"
android:textAlignment="center"
android:background="#android:color/holo_red_light">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Channel"
android:layout_gravity="center"
android:id="#+id/toolbar_title"
android:textSize="20sp"
android:textStyle="bold"
android:background="#00000000"
android:textColor="#ffffff" />
</android.support.v7.widget.Toolbar>
<RelativeLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar">
.... other ui elements
</RelativeLayout>
</RelativeLayout>
searchView menu xml file :
<?xml version="1.0" encoding="utf-8"?>
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/action_search"
android:icon="#drawable/done"
app:showAsAction="always"
app:actionViewClass="android.support.v7.widget.SearchView"
android:title="Search"/>
this fragment is inside a tabLayout and i can't use Actionbar instead of toolbar
any idea how can i fix this ?or why its happening ? please let me know it'll be so helpful for me
inside my fragment class :
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setHasOptionsMenu(true);
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if(id == R.id.menu_action_next){
//Do whatever you want to do
return true;
}
return super.onOptionsItemSelected(item);
}
#Override
public void onPrepareOptionsMenu(Menu menu) {
final MenuItem searchItem = menu.findItem(R.id.action_search);
}
#Override
public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
super.onCreateOptionsMenu(menu, inflater);
MenuInflater menuInflater = inflater;
menuInflater.inflate(R.menu.search_bar_menu, menu);
MenuItem searchItem = menu.findItem(R.id.action_search);
SearchManager searchManager = (SearchManager) getActivity().getSystemService(Context.SEARCH_SERVICE);
android.support.v7.widget.SearchView searchView = null;
if (searchItem != null) {
searchView = (android.support.v7.widget.SearchView) searchItem.getActionView();
}
if (searchView != null) {
searchView.setSearchableInfo(searchManager.getSearchableInfo(getActivity().getComponentName()));
}
if (searchView != null )
{
searchView.setOnClickListener(onClickListener);
searchView.setOnQueryTextListener(onQueryTextListener);
searchView.setOnCloseListener(onCloseListener);
}
}
UPDATE:
after adding app:showAsAction="ifRoom|collapseActionView" in my search menu xml (thanks to #Ashwinikutre) i got this
now icon is visible
and its expanding by removing title which is fine but no text colour and close button (which is now on another side but its invisible )
Try to explicitly add the following attribute to show it is a search view
<?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:icon="#drawable/search"
android:orderInCategory="100"
android:title="#string/search"
app:actionViewClass="android.support.v7.widget.SearchView"
app:showAsAction="always"/>
Of course, you probably have this correctly setup too
#Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.global_search, menu);
final MenuItem item = menu.findItem(R.id.action_search);
MenuItemCompat.expandActionView(item);
final SearchView searchView = (SearchView) MenuItemCompat.getActionView(item);
searchView.setQueryHint(getString(R.string.search_customers));
searchView.setOnQueryTextListener(this);
return true;
}
Let me know if it helps!
<item
android:id="#+id/action_search"
android:icon="#drawable/ic_search_white_24dp"
android:orderInCategory="80"
android:title="#string/action_search"
app:actionLayout="#layout/search"
app:showAsAction="ifRoom|collapseActionView" />
search.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical">
<EditText
android:id="#+id/search"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="200dp"
android:inputType="text|textAutoCorrect"
android:imeOptions="actionSearch"
android:background="#android:color/transparent"/>
<ImageButton
android:id="#+id/close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_close_white_24dp"
android:contentDescription="#string/button_close"
style="#android:style/Widget.ActionButton"/>
</LinearLayout>

status bar and navigation bar becomes visible in immersive mode when searching in listview from the toolbar search

I have an activity where the theme is set to
Theme.AppCompat.Light.NoActionBar.
And i have used toolbar search for searching a listview.
But when i start writing something in the toolbar search area the status bar and navigation bar become visible.
What i want to do is to search the list but the status bar on the top should stay hidden.
check out the pics where the status bar overlaps the toolbar..normal view, when writing something in search bar
This is the layout for the activity with a toolbar and a list view
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"/>
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/list"></ListView>
</LinearLayout>
This is the menu item for searching
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="schemas.android.com/tools"
tools:context="com.example.sample.YourActivity" xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:id="#+id/search"
android:title="#string/search_title"
android:icon="#drawable/ic_action_action_search"
app:showAsAction="collapseActionView|ifRoom"
app:actionViewClass="android.support.v7.widget.SearchView" />
</menu>
Searchable layout
<?xml version="1.0" encoding="utf-8"?>
<searchable xmlns:android="http://schemas.android.com/apk/res/android"
android:label="#string/app_label"
android:hint="search it">
</searchable>
search bar implementation in onCreateOptionsMenu
#Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.my_menu, menu);
SearchManager searchManager = (SearchManager) getSystemService(getApplicationContext().SEARCH_SERVICE);
SearchView searchView = (SearchView) menu.findItem(R.id.search).getActionView();
searchView.setSearchableInfo(searchManager.getSearchableInfo(getComponentName()));
searchView.setIconifiedByDefault(false);
SearchView.OnQueryTextListener textChangeListner = new SearchView.OnQueryTextListener() {
#Override
public boolean onQueryTextSubmit(String query) {
adapter.getFilter().filter(query);
return false;
}
#Override
public boolean onQueryTextChange(String query) {
adapter.getFilter().filter(query);
return false;
}
};
searchView.setOnQueryTextListener(textChangeListner);
return super.onCreateOptionsMenu(menu);
}

action bar compact height changes when searchitem expand

i have list fragment in BaseActivity and want to implement search functionality. but action bar compact height changes while click on search item button
see below screenshot
menu.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="com.android.bypeople.uber.BaseActivity" >
<item
android:id="#+id/action_add"
android:icon="#drawable/btn_profile_selector"
android:orderInCategory="100"
android:title="#string/action_add"
android:visible="false"
app:showAsAction="always"/>
<item
android:id="#+id/action_search"
android:icon="#android:drawable/ic_menu_search"
android:title="#string/action_search"
android:visible="false"
app:actionViewClass="android.support.v7.widget.SearchView"
app:showAsAction="ifRoom"/>
onCreateOptionsMenu in fragment
#Override
public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
super.onCreateOptionsMenu(menu,inflater);
inflater.inflate(R.menu.base, menu);
menu.findItem(R.id.action_add).setVisible(true);
SearchManager searchManager = (SearchManager) getActivity().getSystemService(Context.SEARCH_SERVICE);
MenuItem searchItem = menu.findItem(R.id.action_search);
searchItem.setVisible(true);
SearchView searchView = (SearchView) MenuItemCompat.getActionView(searchItem);
searchView.setSearchableInfo(searchManager.getSearchableInfo(getActivity().getComponentName()));
searchView.setOnQueryTextListener(queryListener);
queryListener = new OnQueryTextListener() {
#Override
public boolean onQueryTextChange(String newText) {
return false;
}
#Override
public boolean onQueryTextSubmit(String query) {
Toast.makeText(getActivity(), "Searching for: " + query + "...", Toast.LENGTH_SHORT).show();
return false;
}
};
}
Refer this link too.!!
resolved issue after lots of search and found something.
may help you too.!!
after add this attribute in toolbar
android:layout_height="?attr/actionBarSize"
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
style="#style/ToolBarStyle"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/myPrimaryColor"
android:minHeight="#dimen/abc_action_bar_default_height_material" >
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:textColor="#color/myTextPrimaryColor"
android:layout_gravity="center" />
</android.support.v7.widget.Toolbar>

Android: strange SearchView's behavior

I'm trying to implement SearchView according to some online tutorials. But when i clicked the search icon, it did not expand, instead another search icon appeared to the left and i must click again; this time it worked.
Are there something i'm missing here?
Here are the captured images, sorry i can't post these to stackoverflow yet.
http://1drv.ms/186yI2Y
If i delete collapseActionView then it worked, but i can't customize search icon.
<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/search"
android:title="#string/search_title"
android:icon="#drawable/ic_action_search"
app:showAsAction="collapseActionView|ifRoom"
app:actionViewClass="android.widget.SearchView"/>
</menu>
In MainActivity.java
#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);
// Associate searchable configuration with the SearchView
SearchManager searchManager = (SearchManager) getSystemService(Context.SEARCH_SERVICE);
MenuItem searchItem = menu.findItem(R.id.search);
mSearchView = (SearchView) searchItem.getActionView();
mSearchView.setSearchableInfo(searchManager.getSearchableInfo(getComponentName()));
mSearchView.setIconifiedByDefault(true);
mSearchView.setOnSearchClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
showResultsFragment();
}
});
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
boolean toggleHandled = mDrawerToggle.onOptionsItemSelected(item);
return toggleHandled || super.onOptionsItemSelected(item);
}
Thank in advance!
in your menu xml i changed app:actionViewClass="android.support.v7.widget.SearchView"
<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/search"
android:title="wrwrwr"
android:icon="#drawable/abc_ic_menu_copy_mtrl_am_alpha"
app:showAsAction="collapseActionView|ifRoom"
app:actionViewClass="android.support.v7.widget.SearchView"/>
</menu>
and in your activity
import android.support.v7.widget.SearchView; //don't import android.widget.SearchView

Categories

Resources