layout issue while adding searchView in toolbar ( fragment ) - android

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>

Related

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);
}

How to make the distance between left edge of Toolbar and Search Icon same as that between the right edge of the toolbar and the Cancel Icon?

I am trying to add a SearchView to Material Design Toolbar/ActionBar such that the SearchView is expanded by default and takes up the entire space of the Toolbar width-wise. I have the following Toolbar so far.
The problem with it is:
I want the Search icon to have the same distance from the left edge of the screen as that of the X icon from the right edge of the screen. How can I do that?
The X icon appears only when I start typing a search query, and then it disappears if I cancel the query by pressing it. I want it to be there as soon as the Toolbar appears (which is as soon as the Activity appears), and just stay even when there is no search-query (typed by the user) there and the search hint text is visible. How can I do that?
WHAT I TRIED:
I tried to add android:contentInsetStart, android:contentInsetLeft, app:contentInsetStart and app:contentInsetLeft to the Toolbar XML, which did not help. Then I tried to find the Toolbar (by findViewById()) from onCreate() of the Activity, and then did toolbar.setContentInsetsAbsolute(0,0);. Neither helped.
Then I tried adding setSupportActionBar(Toolbar) to onCreate() and ActionBar.LayoutParams params = new ActionBar.LayoutParams(ActionBar.LayoutParams.MATCH_PARENT, ActionBar.LayoutParams.MATCH_PARENT);
searchView.setLayoutParams(params); in onCreateOptionsMenu(), but in vain.
SSCCE CODE:
MainActivity.java
public class MainActivity extends AppCompatActivity {
private TextView textView;
private Toolbar toolbar;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
textView = (TextView) findViewById(R.id.mainActivity_textView);
toolbar = (Toolbar) findViewById(R.id.mainActivity_toolbar);
setSupportActionBar(toolbar);
toolbar.setContentInsetsAbsolute(0,0);
handleIntent(getIntent());
}
#Override
protected void onNewIntent(Intent intent) {
setIntent(intent);
handleIntent(intent);
}
private void handleIntent(Intent intent) {
if (Intent.ACTION_SEARCH.equals(intent.getAction())) {
String query = intent.getStringExtra(SearchManager.QUERY);
doMySearch(query);
}
}
private void doMySearch(String searchQuery) {
textView.setText(searchQuery);
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
// Inflate the options menu from XML
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.main, menu);
// Get the SearchView and set the searchable configuration
SearchManager searchManager = (SearchManager) getSystemService(Context.SEARCH_SERVICE);
MenuItem searchMenuItem = menu.findItem(R.id.action_search);
SearchView searchView = (SearchView) MenuItemCompat.getActionView(searchMenuItem);
// Assumes current activity is the searchable activity
searchView.setSearchableInfo(searchManager.getSearchableInfo(getComponentName()));
//searchView.setIconifiedByDefault(false); // Do not iconify the widget; expand it by default
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
return super.onOptionsItemSelected(item);
}
}
activity_main.xml
<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="practice_projects.materialdesigngooglenowlikesearchviewgive.MainActivity" >
<include android:id="#+id/mainActivity_toolbar"
layout="#layout/app_bar"/>
<TextView
android:id="#+id/mainActivity_textView"
android:layout_below="#id/mainActivity_toolbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world" />
</RelativeLayout>
app_bar.xml
<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:contentIntentStart="0dp"
android:contentIntentLeft="0dp"
app:contentIntentStart="0dp"
app:contentIntentLeft="0dp" >
</android.support.v7.widget.Toolbar>
res/menu/main.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="practice_projects.materialdesigngooglenowlikesearchviewgive.MainActivity" >
<item
android:id="#+id/action_search"
android:orderInCategory="100"
android:title="#string/searchMenuIcon_title"
android:icon="#drawable/ic_search_black_24dp"
app:showAsAction="always"
app:actionViewClass="android.support.v7.widget.SearchView"
app:iconifiedByDefault="false" />
</menu>
res/xml/searchable.xml
<?xml version="1.0" encoding="utf-8"?>
<searchable xmlns:android="http://schemas.android.com/apk/res/android"
android:label="#string/app_name"
android:hint="#string/search_hint" >
</searchable>
res/values/styles.xml
<resources>
<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primaryDark</item>
<item name="colorAccent">#color/accent</item>
</style>
<style name="AppTheme" parent="AppBaseTheme"></style>
</resources>
res/values*-v21*/styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="AppBaseTheme"></style>
</resources>
I believe that
android:contentIntentStart="0dp"
android:contentIntentLeft="0dp"
app:contentIntentStart="0dp"
app:contentIntentLeft="0dp"
was meant to be
android:contentInsetStart="0dp"
android:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetLeft="0dp"

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 Yelp like Search bar in ActionBar

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.

Support toolbar not clickable on older apis

I'm having difficulty getting the support toolbar to be clickable/touchable in API's less than 20.
And by that I mean, the PageSlidingTabStrip can't be swiped and the searchView can't be instantiated (details below ofc).
I don't understand, because I implemented from the beginning a support.Toolbar.
So here's the details of my implementation, which may render my toolbar not being clickable :
layout.xml
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:elevation="4dp"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<com.insa.burnd.controller.PagerSlidingTabStrip ... />
</android.support.v7.widget.Toolbar>
onCreateOptionsMenu
#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);
SearchView searchView = (SearchView) MenuItemCompat.getActionView(searchItem);
searchView.setOnQueryTextListener(...);
searchView.setQueryHint(getString(R.string.hint));
searchView.setSearchableInfo(
searchManager.getSearchableInfo(getComponentName()));
return true;
}
menu_main
<?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="Filter"
android:icon="#drawable/ic_action_search"
app:showAsAction="collapseActionView|ifRoom"
app:actionViewClass="android.support.v7.widget.SearchView" />
</menu>
Thank you :)

Categories

Resources