SearchView AutoComplete is appearing with Black border and covering the searchtext? - android

Image how the searchView autocomplete is appearing
The searchView AutoComplete is appearing with black border as shown in image and I haven't made any custom layout still it is showing that black border and hiding the text.Below the code is also attached that I have used.`
getMenuInflater().inflate(R.menu.main, menu);
this.menu = menu;
menuItem = menu.findItem(R.id.action_search);
searchView = (SearchView) MenuItemCompat.getActionView(menuItem);
menuItem.setVisible(false);
final SearchView.SearchAutoComplete searchAutoComplete =
searchView.findViewById(android.support.v7.appcompat.R.id.search_src_text);
searchAutoComplete.setDropDownBackgroundResource(android.R.color.white);
searchAutoComplete.setDropDownAnchor(R.id.action_search);
ArrayAdapter<String> searchadapter = new ArrayAdapter<String>(this,
android.R.layout.simple_dropdown_item_1line,
all_products);
searchAutoComplete.setAdapter(searchadapter);
`
Menu Code It is the Item that is used for opening search option.
<item android:id="#+id/action_search"
android:title="#string/action_search"
android:icon="#drawable/ic_search_white_24dp"
app:showAsAction="collapseActionView|ifRoom"
app:actionViewClass="android.support.v7.widget.SearchView"/>
AppBar layout Code It is the code made for Creating the App Action Bar But how this is affecting the search autocomplete to appear black border around it and hiding the search text.
<android.support.design.widget.AppBarLayout
android:id="#+id/main_app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipChildren="false"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<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/main_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
app:theme="#style/CustomActionBar">
<TextView
android:layout_width="wrap_content"
android:textColor="#FFF"
android:textSize="18sp"
android:textStyle="bold"
android:layout_height="wrap_content"
android:text="Avrutti Electronics"/>
<ProgressBar
android:id="#+id/progressBar4"
style="?android:attr/progressBarStyle"
android:layout_width="match_parent"
android:layout_marginTop="10dp"
android:layout_height="35dp"/>
<requestFocus />
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/main_tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:visibility="visible"
app:tabMode="scrollable"
app:tabSelectedTextColor="#color/colorAccent" />
</android.support.design.widget.AppBarLayout>

I Found my Question answer It is problem because I was trying to override the theme Appcompat.light through
searchAutoComplete.setDropDownBackgroundResource(android.R.color.white);
So as soon as I removed this statement the border was removed.

From my observations, this is caused by the theme you're using ThemeOverlay.AppCompat.Dark.ActionBar. Change your themes to something that have ...Light.ActionBar in its its name Or simply modify your theme in styles.xml and add the following snippet to it.
<item name="android:dropDownItemStyle">#style/myDropDownItemStyle</item>
<item name="android:dropDownListViewStyle">#style/myDropDownListViewStyle</item>

Related

SearchView shifting AppBar permanently upwards?

I am adding a SearchView to the current view at Runtime, like so:
View searchpage = inflater.inflate(R.layout.search_ui, (ViewGroup) view.getParent(), false);
SearchView searchbar = (SearchView) searchpage.findViewById(R.id.searchbar);
//ViewGroup of current layout
parent.addView(searchbar);
This code is executed when a button is pressed.
This code works, however if the SearchView is entered and exited, the animation that shifts the AppBar upwards works however upon exiting the AppBar is not reset. The SearchView is not embedded in the AppBar, and I am not attempting to do this. I would like the SearchView to be below the AppBar as it is.
The AppBar is defined in a separate xml file. I am switching between multiple views using a ViewPager.
Here are some screenshots:
Before SearchView is Tapped
After SearchView is Tapped/Entered and Exited
The SearchBar is defined in xml like so:
<android.support.v7.widget.SearchView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/searchbar"
android:layout_below="#+id/view"
android:iconifiedByDefault="false"
android:queryHint="Search"
android:layout_centerHorizontal="true">
</android.support.v7.widget.SearchView>
The AppBar is defined like so:
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
Any help would be appreciated, I am at a loss as to why the AppBar won't slide back down automatically.
EDIT: I was concurrently having issues with a set of buttons not appearing at the bottom of the screen. I figured out that they were being drawn underneath the nav bar. I believe that when the SearchView was being entered, the toolbar was being pushed upwards to accommodate for the set of buttons at the absolute bottom of the screen. I added padding to the layout and I believe that was the solution to the issue.
Thanks,
-n.parker
Try something like this;
<LinearLayout 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:background="#color/colorWhite"
android:orientation="vertical"
tools:context="Your-Activity-name-like-com.xyz.MainActivity">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
<android.support.v7.widget.SearchView
android:id="#+id/action_search"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:clickable="true"
android:title="#string/action_search">
</android.support.v7.widget.SearchView>
And inside the "layout" folder, create a toolbar.xml that looks like this;
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"/>
Now you can reuse this toolbar in other activities too, id needed.

ActionBar doesn't fully hide (only does the text & buttons)

I've searched for solutions but don't seem to find any answer for my issue. I navigated several potential solutions I found here but all of them ended up with the same issue.
Context: I have a FragmentContainer that holds a Viewpager with RecyclerView in each page. When I click an item in the RecyclerView, it opens a new different FragmentContainer2 with a ViewPager that holds the detail of the selected card and I can swipe reading the different cards.
What I want to do: when I select an item in the RecyclerView, I want the appBar GONE.
Problem: when I hit any item of the RecyclerView and the new ViewPager loads, the appBar buttons and title are gone, but not the background!
Here there are two screenshots of the states of appBar in one ViewPager and the other:
FragmentContainer that holds a ViewPager with a RecyclerView:
FragmentContainer that holds a ViewPager with the news detail:
METHOD TO SHOW AND HIDE TOOLBAR/FLOATING ACTION BUTTON:
public void setToolbarAndFabVisibility(Boolean trueOrFale){
ActionBar actionBar = getSupportActionBar();
if(trueOrFale!=null){
if(trueOrFale){
if (actionBar != null) {
actionBar.show();
}
fab.setVisibility(View.VISIBLE);
}else{
if (actionBar != null) {
actionBar.hide();
}
fab.setVisibility(View.GONE);
}
}
}
activity_main.xml:
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimaryDark">
<include layout="#layout/app_bar_main"/>
<android.support.design.widget.NavigationView
android:id="#+id/navigationView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#android:color/white"
app:headerLayout="#layout/nav_header"
app:menu="#menu/menu" />
app_bar_main.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:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<include layout="#layout/toolbar"/>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_pressed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:elevation="20dp"
android:src="#drawable/favourite_button"
app:fabSize="mini"
app:layout_anchor="#id/fragment_container"
app:layout_anchorGravity="bottom|right|end" />
Both xml are closed with appropiate tags. For some reason preview here doesn't show.
Any idea where I might be failing? I have everything in one activity.
Let me know if there's anything else I can post here that might help. Thanks for taking the time.
EDIT;
sorry, I forgot to include the toolbar.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/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="16dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_scrollFlags="scroll|enterAlways|snap">
<Button
android:id="#+id/favourites_button"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_gravity="end"
android:layout_marginEnd="16dp"
android:background="#drawable/favourite_button" />
<Button
android:id="#+id/bookmarked_button"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_gravity="end"
android:layout_marginEnd="16dp"
android:background="#drawable/bookmarked_button" />
<Button
android:id="#+id/history_button"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_gravity="end"
android:layout_marginEnd="16dp"
android:background="#drawable/ic_history_white_24dp" />
use this:
getWindow().requestFeature(Window.FEATURE_ACTION_BAR);
getActionBar().hide();
My guess is that you are dealing with two action bars:
One is provided by the system through a theme like #style/ThemeOverlay.AppCompat.Dark.ActionBar
and the other is declared in your app_bar_main.xml.
getSupportActionBar().hide() only hides the action bar that is provided by the system.
Check the theme that is set in the application manifest and consult the documentation at https://developer.android.com/training/appbar/setting-up.html
if
getActionbar().hide();
getActionbar().show();
doesn't work then try
getSupportActionBar().hide();
getSupportActionBar().show();
It will work.or try to use toolbar
I was issuing this same problem. ActionBar was being overridden and that's why it leaves a black gap when hide() is called.
Fix:
styles.xml:
<style name="Theme.AppCompat.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
AndroidManifest.xml:
<activity android:name="com.stonetree.supercart.controller.activities.SuperCart"
android:theme="#style/Theme.AppCompat.NoActionBar"></activity>
<activity
Make sure to call on your manifest the proper style name which has windowActionBar set to false.
Activity.xml:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"></android.support.v7.widget.Toolbar>
Add Toolbar to your layout. Make sure to call dependencies to compile android.support.v7.widget.
compile 'com.android.support:appcompat-v7:23.1.1'
Watch out for version and further minor details. Moving on...
Activity.java:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity);
Toolbar myToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(myToolbar);
}
In my case, my menu was separated on xml. A custom menu.
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/itemId"
android:icon="#android:drawable/stat_notify_sync"
android:title="Menu item"
app:showAsAction="collapseActionView" />
</menu>
Also call on Activity.java:
#Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.supercart_app_bar, menu);
return super.onCreateOptionsMenu(menu);
}
Now Toolbar has your custom layout from Menu.xml - Just call hide() or show() wherever your want and the Bar will act like visibility is set to View.GONE and View.VISIBLE.

Tollbar with a notification count

Hello I'm using a Tollbar and inside I added some drawable items in the menu options. What I want is to put a number inside those drawable. Like the image below
View post on imgur.com
I know there are other post related to this but not with a Toolbar and I need to is a Toolbar.
Thank you
The simpliest way is to use TextView with star background:
<TextView
android:id="#+id/notification"
android:layout_width="#dimen/notification_width"
android:layout_height="#dimen/notification_height"
android:background="#drawable/bg_star"
android:gravity="center"
android:textColor="#android:color/white"
tools:text="5" />
You can use obvious TextView's setText() method to set or hide notification text.
To add this layout to your Toolbar use Android menu's app:actionLayout parameter:
<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_notifications"
app:actionLayout="#layout/view_notification"
app:showAsAction="always" />
</menu>
And in your Activity inflate menu like this:
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.notification_menu, menu);
return true;
}
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_top"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="#color/action_bar_bkgnd"
app:theme="#style/ToolBarTheme" >
<TextView
android:background="#drawable/bg_star"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Toolbar Title"
android:id="#+id/notification"
android:layout_gravity="center"
android:id="#+id/toolbar_title" />
</android.support.v7.widget.Toolbar>
Toolbar toolbarTop = (Toolbar) findViewById(R.id.toolbar_top);
TextView mTitle = (TextView) toolbarTop.findViewById(R.id.toolbar_title);

Is it possible to left align SearchView in AppCompat 21 with toolbar?

I want to left align the SearchView on tablets when using the new material theme and AppCompat 21. Is this possible or must I add my own custom layout to the toolbar?
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_search, menu);
mnuSearch = menu.findItem(R.id.menu_search);
android.support.v7.widget.SearchView searchView = (SearchView) MenuItemCompat.getActionView(mnuSearch);
searchView.setGravity(Gravity.LEFT);
searchView.setIconifiedByDefault(false);
searchView.setQueryHint(getString(R.string.search));
searchView.requestFocus();
return true;
}
I would rather define your SearchView in a layout and then call
View v = findViewById(R.id.your_search_view);
getSupportActionBar().setCustomView(v);
This way it comes already aligned on the left, and if it doesn't you can set its LayoutParams.
If you're using a Toolbar with AppCompat things are easier, because it acts as a ViewGroup.
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:abc="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent">
<your.SearchView />
// here you have control over layout_gravity
</android.support.v7.widget.Toolbar>
I used searchview
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay" >
<android.support.v7.widget.SearchView
android:id="#+id/search"
android:gravity="start"
app:searchIcon="#mipmap/icon_search"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:gravity="end"
android:textSize="22dp"
android:textColor="#color/white"
android:id="#+id/title"
android:text="title"
android:layout_marginRight="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.v7.widget.Toolbar>

Change spinner style in toolbar

I am trying to put a spinner in my Toolbar like the old ActionBar style navigation and my theme is this
<style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/color_primary</item>
<item name="colorPrimaryDark">#color/color_primary_dark</item>
<item name="colorAccent">#color/color_primary</item>
</style>
but my spinner is black while all other icons and overflow menus are white so it looks bad
I tried changing the style of the spinner using this
<style name="ToolbarSpinnerTheme" parent="Theme.AppCompat">
<item name="android:spinnerItemStyle">#style/TextAppearanceSpinnerItem</item>
</style>
<style name="TextAppearanceSpinnerItem">
<item name="android:textColor">#FFFFFF</item>
</style>
this is how my Toolbar is styled
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/modes"
android:minWidth="150dp"
android:gravity="bottom"
style="#style/ToolbarSpinnerTheme"/>
</android.support.v7.widget.Toolbar>
final Spinner mode = (Spinner)findViewById(R.id.modes);
SpinnerAdapter mSpinner = ArrayAdapter.createFromResource(this, R.array.action_bar_spinner, android.R.layout.simple_spinner_dropdown_item);
mode.setAdapter(mSpinner);
but it always stays black. How can I change the spinner arrow and text to white while still keeping the same theme for the dropdown style as you would get with the Light theme?
Update 4.4 arrow fix:
The only way I got the arrow to turn white is to add the spinner programatically and not in xml so it looks something like this
final ArrayAdapter spinnerAdapter = ArrayAdapter.createFromResource(getSupportActionBar().getThemedContext(),
R.array.main_navigation_list, R.layout.spinner_text);
spinnerAdapter.setDropDownViewResource(R.layout.spinner_dropdown_item);
mNavigationTags = getResources().getStringArray(R.array.main_navigation_list);
mNavigationSpinner = new Spinner(getSupportActionBar().getThemedContext());
mNavigationSpinner.setAdapter(spinnerAdapter);
mNavigationSpinner.setOnItemSelectedListener(this);
mToolbar.addView(mNavigationSpinner)
I do it like the following:
navigation_toolbar.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_width="fill_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
MainActivity.java
ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this,
R.array.pass_type, R.layout.layout_drop_title);
adapter.setDropDownViewResource(R.layout.layout_drop_list);
Spinner mNavigationSpinner = new Spinner(getSupportActionBar().getThemedContext());
mNavigationSpinner.setAdapter(adapter);
getToolbar().addView(mNavigationSpinner);
You will find I used custom spinner item layout, layout_drop_title and layout_drop_list
layout_drop_title.xml
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/text1"
style="?attr/spinnerDropDownItemStyle"
android:singleLine="true"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:textColor="#color/white"
android:ellipsize="marquee"/>
layout_drop_list.xml
<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/text1"
style="?android:attr/spinnerDropDownItemStyle"
android:singleLine="true"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:ellipsize="marquee"
android:background="#color/nliveo_blue_colorPrimary"
android:textColor="#color/white"/>
Kevin is in the right direction but the real answer is not to use the application context but the already themed context of the action bar itself. This is actually mentioned in the documenation but it doesn't get that much emphasis all along:
When inflating anything to be displayed on the action bar (such as a
SpinnerAdapter for list navigation in the toolbar), make sure you use
the action bar’s themed context, retrieved via
getSupportActionBar().getThemedContext().
When you create the arrayadapter you should do getApplicationContext instead of this:
SpinnerAdapter mSpinner = ArrayAdapter.createFromResource(getApplicationContext(), R.array. action_bar_spinner, android.R.layout.simple_spinner_dropdown_item);
Make a new layout file:
<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/text1"
style="?android:attr/spinnerDropDownItemStyle"
android:singleLine="true"
android:layout_width="match_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:ellipsize="marquee"
android:textColor="#000000"/>
Then change your code to this:
ArrayAdapter mAdapter = ArrayAdapter.createFromResource(getApplicationContext(), R.array. action_bar_spinner, android.R.layout.simple_spinner_dropdown_item);
mAdapter.setDropDownViewResource(R.layout.spinner_dropdown_item);
mode.setAdapter(mAdapter);
Have you tried putting the spinner in the xml file like this:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
android:background="?attr/colorPrimary">
<Spinner
android:id="#+id/spinner_nav"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.v7.widget.Toolbar>
And also disable the title like this:
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowTitleEnabled(false);
Answer is from Chris Banes: https://stackoverflow.com/a/26511653/2767703

Categories

Resources