How to style SearchView AppCompat v21 - android

I have a SearchView in my ActionBar and I want to customize the style of it, but I have not found out how.
I have tried this in my v21\styles.xml
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<item name="searchViewStyle">#style/AppTheme.SearchView</item>
</style>
<style name="AppTheme.SearchView" parent="Widget.AppCompat.Light.SearchView">
<item name="android:queryBackground">#color/white</item>
<item name="android:submitBackground">#color/white</item>
</style>
This is my SeachView in my menu.xml
<item android:id="#+id/action_search"
android:title="#string/action_search"
android:icon="#drawable/ic_action_search"
appcompat:actionViewClass="android.support.v7.widget.SearchView"
app:showAsAction="ifRoom"/>
Edit: Setting queryHint and iconifiedByDefault in the xml does not work, but setting it in the activity does. Does anyone know why? This is weird...

As the Android Developers Blog states:
values/themes.xml:
<style name=”Theme.MyTheme” parent=”Theme.AppCompat”>
<item name=”searchViewStyle”>#style/MySearchViewStyle</item>
</style>
<style name=”MySearchViewStyle” parent=”Widget.AppCompat.SearchView”>
<!-- Background for the search query section (e.g. EditText) -->
<item name="queryBackground">...</item>
<!-- Background for the actions section (e.g. voice, submit) -->
<item name="submitBackground">...</item>
<!-- Close button icon -->
<item name="closeIcon">...</item>
<!-- Search button icon -->
<item name="searchIcon">...</item>
<!-- Go/commit button icon -->
<item name="goIcon">...</item>
<!-- Voice search button icon -->
<item name="voiceIcon">...</item>
<!-- Commit icon shown in the query suggestion row -->
<item name="commitIcon">...</item>
<!-- Layout for query suggestion rows -->
<item name="suggestionRowLayout">...</item>
</style>

// Configure the search products widget
SearchManager searchManager = (SearchManager)mActivity.getSystemService(Context.SEARCH_SERVICE);
SearchView searchView = (SearchView)menu.findItem(R.id.action_search).getActionView();
if(searchView != null)
{
// Assumes current activity is the searchable activity
searchView.setSearchableInfo(searchManager.getSearchableInfo(mActivity.getComponentName()));
// Do not iconify the widget, expend it by default
searchView.setIconifiedByDefault(false);
// Customize the search view
searchView.setQueryHint(getResources().getString(R.string.search_hint));
searchView.setMaxWidth(1000);
searchView.setWeightSum(5.0f);
View searchPlate = searchView.findViewById(android.support.v7.appcompat.R.id.search_plate);
EditText searchSourceText = (EditText)searchView.findViewById(android.support.v7.appcompat.R.id.search_src_text);
searchPlate.setBackgroundColor(Color.TRANSPARENT);
searchPlate.setMinimumWidth(10000);
searchSourceText.setTextColor(Color.WHITE);
searchSourceText.setWidth(10000);
searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener()
{
#Override
public boolean onQueryTextSubmit(String s)
{
Log.v("onQueryTextSubmit", String.format("Query of search: %s", s));
Intent searchIntent = new Intent(mActivity, SearchProducts.class);
searchIntent.putExtra(SearchProducts.QUERY, s);
startActivity(searchIntent);
return false;
}
#Override
public boolean onQueryTextChange(String s) { return false; }
});
searchView.setOnCloseListener(new SearchView.OnCloseListener()
{
#Override
public boolean onClose()
{
Log.v("Main", "searchView::OnCloseListener");
return false;
}
});
}

Related

How to change width/height of actionOverflowButton

I'm trying to change the size of my overflow menu button. I've changed the actual icon from the default 3 dots to my own settings icon in my drawables. Here's the code:
styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:colorForeground">#color/colorPrimaryDark</item>
<item name="android:actionOverflowButtonStyle">#style/ToolbarOptions</item>
</style>
<!--Toolbar-->
<style name="ToolbarOptions" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:src">#drawable/settings</item>
<item name="android:contentDescription">settings</item>
<item name="android:width">9dp</item>
<item name="android:height">9dp</item>
</style>
</resources>
and then here's the java:
public class Home extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_home);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.home_menu, menu);
return true;
}
}
So how do I change the size of the settings icon? I've changed the width and height in the style tags below but it stays the same.

Popup menu divider for App compat theme

I used app compat theme style .
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:popupMenuStyle">#style/PopupMenu</item>
<item name="android:itemTextAppearance">#style/myCustomMenuTextApearance</item>
<item name="android:listPopupWindowStyle">#style/PopupMenuStyle</item>
</style>
<style name="PopupMenuStyle" parent="Widget.AppCompat.ListPopupWindow">
<item name="android:divider">#drawable/devider</item>
<item name="android:dividerHeight">2dp</item>
</style>
<style name="PopupMenu" parent="#android:style/Widget.PopupMenu">
<item name="android:popupBackground">#color/search_panel_color</item>
<item name="android:textColor">#color/activity_button_text_color</item>
<item name="android:shadowColor">#color/activity_theam_color</item>
</style>
<style name="myCustomMenuTextApearance" parent="#android:style/TextAppearance.Widget.TextView.PopupMenu">
<item name="android:textColor">#color/activity_theam_color</item>
</style>
I want to add a divider in my menu item.
I've tried so many things, but the divider is not applying...
Is there any way to show the divider?
I also have the same problem. The solution is like this:
<style name="PopupMenuListView" parent="#style/Widget.AppCompat.ListView.DropDown">
<item name="android:divider">#000000</item>
<item name="android:dividerHeight">1dp</item>
</style>
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:dropDownListViewStyle">#style/PopupMenuListView</item>
</style>
You can also refer to the following link:
How to add dividers between specific menu items?
I have one solution.you can design popup as per your choice by programming.use below code to display popup menu.
private ListPopupWindow listPopupWindow;
listPopupWindow = new ListPopupWindow(getApplicationContext());
listPopupWindow.setWidth(400);
listPopupWindow.setDropDownGravity(Gravity.CENTER);
listPopupWindow.setAdapter(new listpopupadapter(a, type));
listPopupWindow.setAnchorView(v);
listPopupWindow.show();
Here listpopupadapter is class to design your list as it below.
public class listpopupadapter extends BaseAdapter {
ArrayList<String> a;
String type;
public listpopupadapter(ArrayList<String> a, String type) {
this.a = a;
this.type = type;
}
#Override
public int getCount() {
return a.size();
}
#Override
public Object getItem(int position) {
return getItem(position);
}
#Override
public long getItemId(int position) {
return position;
}
#SuppressLint("ViewHolder")
#Override
public View getView(final int position, View convertView,
ViewGroup parent) {
// TODO Auto-generated method stub
View root = LayoutInflater.from(parent.getContext()).inflate(
R.layout.raw_filter, null);
}
}
From your theme style, I guessed you used Toolbar. Is your menu popup is showed from Toolbar? If so, you can customize as the following step.
Define the theme
<style name="AppToolbarPopupTheme" parent="Widget.AppCompat.PopupMenu.Overflow">
<item name="android:dropDownListViewStyle">#style/AppDropDownListViewStyle</item>
</style>
<style name="AppDropDownListViewStyle" parent="Widget.AppCompat.ListView.DropDown">
<item name="android:divider">#drawable/line_divider</item>
<item name="android:dividerHeight">1dp</item>
</style>
Then apply the theme to Toolbar
<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="match_parent"
app:popupTheme="#style/AppToolbarPopupTheme">
</android.support.v7.widget.Toolbar>
if you haven't found the answer to this question then this is how it worked for me using the style:
<style name="PopupMenu">
<item name="android:itemBackground">#color/background_medium_gray</item>
<item name="android:background">#android:color/transparent</item>
<item name="android:textColor">#android:color/black</item>
<item name="android:colorBackground">#color/BackgroundGray</item>
<item name="android:dividerHeight">1dp</item>
</style>
Context context = new ContextThemeWrapper(getActivity(), R.style.PopupMenu);
final PopupMenu popupMenu = new PopupMenu(context, view);
final MenuInflater menuInflater = popupMenu.getMenuInflater();
I suggest you add dummy groups,try this way
<group>
<!--add it like as a separator-->
<item
android:title=""
android:showAsAction="always"
android:enabled="false" />
</group>
Using a Material theme removes dividers.May be this is the simple solution to this problem.
You can try this or any holo theme (i.e #android:style/Widget.ListPopupWindow) to get divider effect in popup
<!-- Change Overflow Menu ListView Divider Property -->
<style name="PopupMenuListView" parent="android:Widget.ListPopupWindow">
<item name="android:divider">#FF0000</item>
<item name="android:dividerHeight">2dp</item>
</style>
I've made a driver app that needed a popup the ride was coming, at that time I used this one. So please try this one. Maybe it will help.
<activity
android:name="driver_activity_name
android:theme="#android:style/Theme.Translucent.NoTitleBar" />

options menu action bar

Can anyone see why my help icon isn't showing in the action bar? I have pasted the relevant parts of my code below
Thank you
menu topline.xml:
`
<item
android:id="#+id/gohome_id"
android:title="Home"
trial10:showAsAction="ifRoom"
/>
<item
android:id="#+id/helpme_id"
android:title="help"
android:icon="#drawable/ic_questionmark"
android:orderInCategory="200"
trial10:showAsAction="always"
/>
`
styles.xml:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
</style>
<style name="CustomActionBarTheme"
parent="#android:style/Theme.Holo.Light.DarkActionBar">
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
<style name="MyActionBar"
parent="#android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
<item name="android:background">#drawable/logo3</item>
<item name="android:icon">#drawable/leaflogo</item>
</style>
<style name="orangestyle" parent="#android:style/Theme.NoTitleBar">
<item name="android:windowBackground">#color/orange</item>
</style>'
This is in my activity java:
#Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.topline, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
super.onOptionsItemSelected(item);
switch(item.getItemId()){
case R.id.gohome_id:
gohome();
break;
}
return true;
}
finally, my Manifest:
<activity
android:name=".test1"
android:label="Test"
android:theme="#style/CustomActionBarTheme" >
</activity>
try this
<item
android:id="#+id/gohome_id"
android:title="Home"
android:showAsAction="ifRoom"
/>
<item
android:id="#+id/helpme_id"
android:title="help"
android:icon="#drawable/ic_questionmark"
android:showAsAction="always"
/>
Did you put your item in a menu tag?
<menu ....>
<item.../>
<item.../>
</menu>
If yes, change trial10:showAsAction with app:showAsAction. Just alt enter if there's an error on app.
Also delete that order line from home item

how to Customize the Contextual Action Bar using appCompat in material design

MainActivity.java
I've implemented MultiChoiceModeListener in this class and below is the code:
on listView:
listView.setMultiChoiceModeListener(MainActivity.this);
listView.setChoiceMode(listView.CHOICE_MODE_MULTIPLE_MODAL);
#Override
public boolean onActionItemClicked(ActionMode arg0, MenuItem arg1) {
switch (arg1.getItemId()) {
case R.id.save:
// Close CAB
arg0.finish();
return true;
case R.id.saveto:
// Close CAB
arg0.finish();
return true;
default:
return false;
}
}
#Override
public boolean onCreateActionMode(ActionMode arg0, Menu arg1) {
arg0.getMenuInflater().inflate(R.menu.save_menu, arg1);
return true;
}
#Override
public void onDestroyActionMode(ActionMode arg0) {
listadaptor.removeSelection();
}
#Override
public boolean onPrepareActionMode(ActionMode arg0, Menu arg1) {
return false;
}
#Override
public void onItemCheckedStateChanged(ActionMode arg0, int arg1, long arg2,
boolean arg3) {
final int checkedCount = listView.getCheckedItemCount();
arg0.setTitle(checkedCount + " "+getResources().getString(R.string.selected));
listadaptor.toggleSelection(arg1);
}
style.xml
<style name="AppTheme.Base" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/White</item>
<item name="android:windowNoTitle">true</item>
<item name="windowActionModeOverlay">true</item>
<item name="windowActionBar">false</item>
<item name="actionModeStyle">#style/LStyled.ActionMode</item>
</style>
<!-- Application theme. -->
<style name="AppTheme" parent="AppTheme.Base">
<!-- All customizations that are NOT specific to a particular API-level can go here. -->
</style>
<style name="LStyled.ActionMode" parent="#style/Widget.AppCompat.ActionMode">
<item name="background">#color/colorPrimary</item>
</style>
<style name="ActionBarThemeOverlay" parent="Theme.AppCompat.Light">
<item name="android:textColorPrimary">#fff</item>
<item name="colorControlNormal">#fff</item>
<item name="colorControlHighlight">#3fff</item>
</style>
<style name="HeaderBar">
<item name="android:background">#009688</item>
<item name="android:textStyle">bold</item>
</style>
<style name="ActionBarPopupThemeOverlay" parent="ThemeOverlay.AppCompat.Light">
<item name="android:textColor">#000</item>
</style>
below is my screenshots:
you can see both screenshots, in second screenshot, actionmode background is white and text color is also white.. i want to change it to first screenshots color which is in top.
You can change the ActionMode background through attribute actionModeStyle:
<style name="AppTheme.Base" parent="Theme.AppCompat.Light">
....
....
<item name="actionModeStyle">#style/LStyled.ActionMode</item>
</style>
<style name="LStyled.ActionMode" parent="#style/Widget.AppCompat.ActionMode">
<item name="background">#color/color_action_mode_bg</item>
</style>
You will of course need to define a color named color_action_mode_bg:
<color name="color_action_mode_bg">#009688</color>
There are other things you can change as well. Example:
<item name="titleTextStyle">...</item>
<item name="subtitleTextStyle">...</item>
<item name="height">...</item>
To change text color of SAVE and SAVETO, add the following to AppTheme.Base:
<item name="actionMenuTextColor">#color/color_action_mode_text</item>
use actionModeBackground in your AppTheme.Base style.
<item name="actionModeBackground">#color/colorPrimary </item> (or)
<item name="android:actionModeBackground">#color/colorPrimary </item>
To change the Title Color of contextual action bar this was the only method that worked for me:
Write this in your activity's theme
<item name="actionModeStyle">#style/ContextualActionModeTheme</item>
Define the styles
<style name="ContextualActionModeTheme" parent="#style/Widget.AppCompat.ActionMode">
<item name="titleTextStyle">#style/titleColor</item>
</style>
<style name="titleColor" parent="TextAppearance.AppCompat.Widget.ActionMode.Title">
<item name="android:textColor">#color/your_color_here</item>
</style>
The title color of your contextual action bar would be changed.

android: PopUp Menu does not apply style

i have an Activity with an Action Bar. The Action Bar PopUp Menu (that appears after clicking the overflow button) applies my defined style.
But there is a EditText View inside my Activity, that should open a popup Menu by clicking on it.
This PopUp does not apply the style.
I hope someone can help me out..
Thx!!
Theme:
<style name="MyTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- ActionBar -->
<item name="android:actionBarStyle">#style/ActionBar</item>
<item name="android:actionBarTabStyle">#style/ActionBarTabStyle</item>
<item name="android:popupMenuStyle">#style/ActionBarPopupMenu</item>
<item name="android:dropDownListViewStyle">#style/ActionBarDropDownListView</item>
<item name="android:actionBarWidgetTheme">#style/ActionBar.Theme.actionbar.widget</item>
<item name="actionMenuTextColor">#color/mytheme_white_color</item>
<item name="android:actionMenuTextColor">#color/mytheme_white_color</item>
<item name="android:actionDropDownStyle">#style/ActionBarDropDownNav</item>
<item name="android:spinnerDropDownItemStyle">#style/ActionBarDropDownItem</item>
<item name="android:titleTextStyle">#style/ActionBarTextStyle</item>
<item
name="actionBarItemBackground">#drawable/ns_actionbar_selectable_background_selector</item>
<item name="android:actionBarItemBackground">#drawable/ns_actionbar_selectable_background_selector</item>
<!-- Custom Items: -->
<item name="android:editTextStyle">#style/EditTextStyle_singleLine</item>
<item name="android:buttonStyle">#style/ButtonStyle_Default</item>
<item name="android:checkboxStyle">#style/ns_CheckBoxStyle</item>
</style>
Styles:
<style name="ActionBarPopupMenu" parent="#android:style/Widget.Holo.Light.ListPopupWindow">
<item name="android:popupBackground">#drawable/menu_dropdown_panel_actionbar</item>
<item name="android:divider">#drawable/ns_linearlayout_list_divider</item>
</style>
<style name="ActionBarDropDownListView" parent="#android:style/Widget.Holo.Light.ListView.DropDown">
<item name="android:listSelector">#drawable/selectable_background_actionbar</item>
<item name="android:divider">#drawable/ns_linearlayout_list_divider</item>
</style>
<style name="ActionBar.Theme.actionbar.widget" parent="#android:style/Theme.Holo">
<item name="android:popupMenuStyle">#style/ActionBarPopupMenu</item>
<item name="android:dropDownListViewStyle">#style/ActionBarDropDownListView</item>
<item name="android:textColor">#color/mytheme_darkblue_color</item>
<item name="android:textAllCaps">true</item>
<item name="android:textSize">#dimen/text_spinner_item</item>
</style>
Code for non workin PopUp::
public class LoginActivity extends Activity {
......
userName = (EditText) this.findViewById(R.id.txtUname);
userName.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
showPopupMenu(userName);
}
});
private void showPopupMenu(View v) {
PopupMenu popupMenu = new PopupMenu(LoginActivity.this, v);
popupMenu.getMenuInflater().inflate(R.menu.test, popupMenu.getMenu());
popupMenu
.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {
#Override
public boolean onMenuItemClick(MenuItem item) {
Toast.makeText(LoginActivity.this, item.toString(),
Toast.LENGTH_LONG).show();
return true;
}
});
popupMenu.show();
}
Results:

Categories

Resources