How to customize expanded SearchView inside action bar in Android? - android

The default SearchView when expanded in the ActionBar looks like this image :
I want to customize expanded SearchView similar to this image :
I am pretty new in Android Development. I would highly appreciate if someone can help me.

SearchView for Androidx Package is composed by an EditText and some AppCompatImageView like the close icon and the search icon
To customize it you must access these views that I have talked about
for exmaple to change the background like the image you showed you need to create a shape like belew :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#02B15D" />
<corners android:radius="15dp" />
<stroke
android:width="2dp"
android:color="#1A40FF" />
</shape>
this is how it's look the shape :
The shape above you must add it in the background of the EditText
To get this EditText is simple just use this in you onCreateOptionMenu :
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.toolbar_menu, menu);
SearchView searchView = (SearchView) menu.findItem(R.id.search).getActionView();
EditText editText = (searchView.findViewById(androidx.appcompat.R.id.search_src_text)); // get the EditText from it
editText.setBackgroundResource(R.drawable.round_search); // set the background to searchView
// you can do more with the editText like textColor hint color .....
return super.onCreateOptionsMenu(menu);
}
For customize the search icon use this
AppCompatImageView searchIcon = searchView.findViewById(androidx.appcompat.R.id.search_mag_icon);
For the search button shown the the toolBar use this :
AppCompatImageView search_button = searchView.findViewById(androidx.appcompat.R.id.search_button);
And finaly for the close button use this :
AppCompatImageView search_close_btn = searchView.findViewById(androidx.appcompat.R.id.search_close_btn);
And this how the result looks like :
UPDATE
To make the search icon visible at the left inside the SearchView you can add an icon to the EditText with this method :
editText.setCompoundDrawablesWithIntrinsicBounds(android.R.drawable.ic_menu_search,0,0,0);
If you use :
AppCompatImageView searchIcon = searchView.findViewById(androidx.appcompat.R.id.search_mag_icon); searchIcon.setImageResource(android.R.drawable.ic_menu_search);
you must add searchView.setIconifiedByDefault(false); but the icon becom visible outsid the shape please see the image below :
So if you want the icon inside the shape use the first method

Related

How to change searchview icon color?

I know there's already a lot of answers for this question here, and I wouldn't be creating another thread if I hadn't already tried everything I saw here.
Anyway, the question is pretty simple. I don't mind if the solution comes from XML styling or Java code (both solutions are welcome). I will show everything (most of it anyway) I've tried to solve it.
First of all, the searview icon seems to be immutable by code since I can't change anything from it. My searchview is declared in menu.xml as this
<item android:id="#+id/icon_search"
android:title="Searchador"
android:icon="#drawable/ic_search_black_24dp" <!-- icon not used by searchview anyway -->
android:showAsAction="always"
android:actionViewClass="android.widget.SearchView"
/>
and inside my onCreateOptionsMenu I have this
SearchManager searchManager = (SearchManager) getSystemService(Context.SEARCH_SERVICE);
searchMenuItem = menu.findItem(R.id.icon_search);
searchView = (SearchView) searchMenuItem.getActionView();
searchView.setSearchableInfo(searchManager.getSearchableInfo(getComponentName()));
searchView.setSubmitButtonEnabled(false);
searchView.setOnQueryTextListener(this);
MenuTint.colorIcons(this, menu, Color.BLUE);
return true;
The MenuTint.colorIcons(this, menu, Color.BLUE); I got from a special class I found here where it basically changes all my icons color, unfortunately not working for the searchview icon.
I then found some answers suggesting to use a style like this
<style name="SearchViewStyle" parent="Widget.AppCompat.SearchView">
<!-- changing my icon, its color and stuff.. -->
<item name="searchIcon">#drawable/ic_search</item></style>
but I was getting the No resource found that matches the given name 'Widget.AppCompat.SearchView'. error.
I then found that I should add the android-support-app-compat project library instead of just the .jar. It didn't work. I mean, the import worked, but the error kept showing. Then, I found somewhere that I should change the project.properties from target=android-19 to 21 (or higher) but it didn't solved the "No resource found" error.
So I'm pretty much stuck for this simple detail where I need to change the searchview color.
Also, this is not exactly the same question, but I believe it might be solved the in the same way so I will include here: I wanted to change distance between the icons. Someone suggested this solution
<style name="ActionButtonStyle" parent="AppBaseTheme">
<item name="android:minWidth">0dip</item>
<item name="android:paddingLeft">0dip</item>
<item name="android:paddingRight">0dip</item>
</style>
but I end up getting this
As you can see, this approach works for my custom icons only, but not for the searchview icon, neither for the menu overflow icon. I would like to change the distance between ALL icons equally.
If you want to change SearchView's search icon, you just need to get the image view within the view as follow:
searchView = v.findViewById(R.id.searchView);
//change icon color
ImageView searchIcon = searchView.findViewById(android.support.v7.appcompat.R.id.search_button);
searchIcon.setImageDrawable(ContextCompat.getDrawable(getActivity(),R.drawable.ic_search_icon));
It is important that the icon is R.id.search_button and you can replace it with a white vector asset that you provide, in this case R.drawable.ic_search_icon
Similarly, you can change the text within the SearchView as follows:
//set color to searchview
SearchView.SearchAutoComplete searchAutoComplete = searchView.findViewById(android.support.v7.appcompat.R.id.search_src_text);
searchAutoComplete.setHintTextColor(getResources().getColorandroid.R.color.white));
searchAutoComplete.setTextColor(getResources().getColor(android.R.color.white));
For android.x,
#Override
public boolean onCreateOptionsMenu(Menu menu) {
...
ImageView searchIcon=
searchView.findViewById(androidx.appcompat.R.id.search_mag_icon);
// To change color of close button, use:
// ImageView searchCloseIcon = (ImageView)searchView
// .findViewById(androidx.appcompat.R.id.search_close_btn);
searchIcon.setColorFilter(getResources().getColor(R.color.colorPrimary),
android.graphics.PorterDuff.Mode.SRC_IN);
...
return true;
}
final SearchView searchViewAndroidActionBar = (SearchView) MenuItemCompat.getActionView(searchViewItem);
// change close icon color
ImageView iconClose = (ImageView) searchViewAndroidActionBar.findViewById(android.support.v7.appcompat.R.id.search_close_btn);
iconClose.setColorFilter(getResources().getColor(R.color.grey));
//change search icon color
ImageView iconSearch = searchViewAndroidActionBar.findViewById(android.support.v7.appcompat.R.id.search_button);
iconSearch.setColorFilter(getResources().getColor(R.color.grey));
To change the search view's icon color use the following lines of code:
SearchView searchView = (SearchView) findViewById(R.id.searchview);
ImageView icon = searchView.findViewById(android.support.v7.appcompat.R.id.search_button);
icon.setColorFilter(Color.BLACK);
You can change or customize the icons of the SearchView by adding you're own drawable icons.
<androidx.appcompat.widget.SearchView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
app:closeIcon="#drawable/close_icon"
app:searchHintIcon="#drawable/search_icon"
app:searchIcon="#drawable/search_icon"
android:textStyle="bold" />
Use below code:
MenuItem searchItem = menu.findItem(R.id.action_search);
SearchView mSearchView = (SearchView) searchItem.getActionView();
Drawable dr = searchItem.getIcon();
dr.setColorFilter(ContextCompat.getColor(this, R.color.colorPrimary), PorterDuff.Mode.SRC_ATOP);
OR:
dr.setColorFilter(BlendModeColorFilterCompat
.createBlendModeColorFilterCompat(Color.RED, BlendModeCompat.SRC_ATOP));
Take the Drawable you want to tint, wrap it with a tinted drawable , and set it as a new one for the search menu item:
#JvmStatic
fun getTintedDrawable(inputDrawable: Drawable, #ColorInt color: Int): Drawable {
val wrapDrawable = DrawableCompat.wrap(inputDrawable.mutate())
DrawableCompat.setTint(wrapDrawable, color)
DrawableCompat.setTintMode(wrapDrawable, Mode.SRC_IN)
return wrapDrawable
}
Usage:
val drawable =getTintedDrawable(...)
searchMenuItem.icon = drawable
And this should work for all Android versions that android-x (support library) supports.
Use below code:
ImageView searchIcon = searchView.findViewById(R.id.search_button);
searchIcon.setColorFilter(Color.WHITE);
If you want to change close icon color, use this one:
ImageView searchClose = searchView.findViewById(R.id.search_close_btn);
searchIcon.setColorFilter(Color.WHITE);
I have found that in later (2020) appCompat scenarios I have had trouble changing icon colors, but found this one to work:
(kotlin)
searchItem.icon.colorFilter = BlendModeColorFilterCompat.createBlendModeColorFilterCompat(Color.RED, BlendModeCompat.SRC_ATOP)
You can use theme in your layout
In your styles file define:
<style name="YourAppTheme.DarkSearchViewTheme">
<item name="colorControlNormal">#FFFFFF</item>
</style>
Then if you use menu inflation, you can apply this theme into your activity from the manifest
Or if you explicitly use SearcView widget in your layout, you can apply it into your widget by theme attribute like this:
<androidx.appcompat.widget.SearchView
android:theme="#style/YourAppTheme.DarkSearchViewTheme"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

Change background color Bottom Bar android

I have a problem in my Android project.
I can't change the color of the bottombar.
This is how I want my bottombar to look:
This is my code
menu > tabhost_bottom.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android"
>
<item
android:id="#+id/home_item"
android:icon="#drawable/ic_home"
android:color="#color/colorPrimary"
android:title="Home"
/>
<item
android:id="#+id/setting_item"
android:icon="#drawable/ic_setting"
android:color="#color/colorPrimary"
android:title="Setting" />
HomeActivity.java
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_home);
coordinatorLayout = (CoordinatorLayout) findViewById(R.id.tabhost_activity);
BottomBar bottomBar = BottomBar.attach(this, savedInstanceState);
bottomBar.setItemsFromMenu(R.menu.tabhost_bottom, new OnMenuTabSelectedListener() {
#Override
public void onMenuItemSelected(int itemId) {
}
});
// Set the color for the active tab. Ignored on mobile when there are more than three tabs.
bottomBar.setActiveTabColor("#55a8e5");
// Use the dark theme. Ignored on mobile when there are more than three tabs.
bottomBar.setBackgroundColor(Color.parseColor("#55a8e5"));
// Use custom text appearance in tab titles.
//bottomBar.setTextAppearance(R.style.MyTextAppearance);
// Use custom typeface that's located at the "/src/main/assets" directory. If using with
// custom text appearance, set the text appearance first.
//bottomBar.setTypeFace("MyFont.ttf");
}
and this my reference
http://androidgifts.com/build-android-material-design-bottom-navigation/
I've finally achieved to change it with the following code (Xamarin C#)
var bottomBarBackground = FindViewById(Resource.Id.bb_bottom_bar_background_view);
bottomBarBackground.SetBackgroundResource(Resource.Drawable.tabbar_background);
tabbar_background.axml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<solid android:color="#color/YourColor"/>
</shape>
</item>
</layer-list>
Found also here, though the final solution did not work for me with the Xamarin version: Question about background color
Is this the library?
Other Option:
seems like you need to set the Background color a different way:
// Setting colors for different tabs when there's more than three of them.
// You can set colors for tabs in three different ways as shown below.
mBottomBar.mapColorForTab(0, ContextCompat.getColor(this, R.color.colorAccent));
mBottomBar.mapColorForTab(1, 0xFF5D4037);
mBottomBar.mapColorForTab(2, "#7B1FA2");
mBottomBar.mapColorForTab(3, "#FF5252");
mBottomBar.mapColorForTab(4, "#FF9800");
For more inforation:
Android new Bottom Navigation bar
For all Kotlin fans: To set background color for all items in bottom bavigation bar, just add this lines in class MainActivity function onCreate:
// finds view in bottom_nav_menu.xml
val navView: BottomNavigationView = findViewById(R.id.nav_view)
// sets background color for the whole bar
navView.setBackgroundColor(ContextCompat.getColor(this, R.color.yourColor))
When you are using this library (roughike's bottombar) you can try this.
You can set the backgroundcolor of a specific tab by using the following line:
bottomBar.getTabAtPosition(0).setBackgroundColor(backgroundColorInt);
When you use this line multiple times for each tab, you can change the backgroundcolor of the whole tab.

Sherlock Actionbar change menu background color

I need to change the background of menu items only. When I tried with actionBarItemBackground, it changes the background of application logo [As u can see in the attachment] also. Any help or link will be appreciated.
You can use a custom layout for your actionbar item like so:
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="#id/item_text"
android:showAsAction="always"
android:actionLayout="#layout/action_text"/>
</menu>
This is styleable as you wish. Another possibility would be adding only the ID (item_text in the example) and set the background like so:
#Override
public boolean onPrepareOptionsMenu(Menu menu) {
MenuItem item = menu.findItem(R.id.item_text);
item.getActionView().setBackgroundDrawable(new ColorDrawable(/* your color */));
return super.onPrepareOptionsMenu(menu);
}

How to change the autocomplete text color for search view inside of ActionBarSherlock with dark background?

I have my own theme for ActionBarSherlock based on Theme.Sherlock.Light.DarkActionBar, here are my styles:
<style name="Theme.MyTheme" parent="Theme.Sherlock.Light.DarkActionBar">
<item name="actionBarStyle">#style/Widget.MyTheme.ActionBar</item>
</style>
<style name="Widget.MyTheme.ActionBar" parent="Widget.Sherlock.Light.ActionBar.Solid.Inverse">
<item name="android:background">#drawable/action_bar</item>
<item name="background">#drawable/action_bar</item>
</style>
Where #drawable/action_bar is an xml:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<solid android:color="#color/color_action_bar_bottom_line" />
</shape>
</item>
<item android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="#color/color_action_bar_background" />
</shape>
</item>
</layer-list>
Everything looks great except one thing: the text in the SearchView (when I use the search mode in ActionBar) is "dark on dark", so I cannot see anything. I tried to set the text colors for SearchView manually:
AutoCompleteTextView searchTextView =
(AutoCompleteTextView) searchView.findViewById(R.id.abs__search_src_text);
searchTextView.setTextColor(Color.WHITE);
searchTextView.setHintTextColor(Color.LTGRAY);
searchTextView.setHighlightColor(Color.WHITE);
searchTextView.setLinkTextColor(Color.WHITE);
This helped a lot but I cannot change the color of autocomplete text:
As you see, it's still black. How can I set the white text color for this kind of text?
Try this code
SearchView searchView = new SearchView(context);
LinearLayout linearLayout1 = (LinearLayout) searchView.getChildAt(0);
LinearLayout linearLayout2 = (LinearLayout) linearLayout1.getChildAt(2);
LinearLayout linearLayout3 = (LinearLayout) linearLayout2.getChildAt(1);
AutoCompleteTextView autoComplete = (AutoCompleteTextView) linearLayout3.getChildAt(0);
autoComplete.setTextColor(Color.WHITE);
or
SearchView searchView = new SearchView(context);
AutoCompleteTextView search_text = (AutoCompleteTextView) searchView.findViewById(searchView.getContext().getResources().getIdentifier("android:id/search_src_text", null, null));
search_text.setTextColor(Color.WHITE);
It's from my own answer here How to set SearchView TextSize?
I solved this by disabling autocomplete feature (it will be disabled if you'll set the edit type to Visible Password), but this solution is not very good and I'm still in search for better one.
private SearchView getSearchView() {
SearchManager searchManager = (SearchManager) getSystemService(Context.SEARCH_SERVICE);
SearchView searchView = new SearchView(getSupportActionBar().getThemedContext());
searchView.setQueryHint("Search for items");
searchView.setSearchableInfo(searchManager.getSearchableInfo(getComponentName()));
AutoCompleteTextView searchTextView =
(AutoCompleteTextView) searchView.findViewById(R.id.abs__search_src_text);
if (searchTextView != null) {
searchTextView.setInputType(InputType.TYPE_CLASS_TEXT
| InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);
searchTextView.setTypeface(Typeface.DEFAULT);
}
return searchView;
}
I think your are using a Light Theme with a custom dark action bar theme. You could try to change the theme of the AutoCompleteTextView to a dark one. Try to add this in your theme :
<style name="Widget.MyTheme.ActionBar" parent="Widget.Sherlock.Light.ActionBar.Solid.Inverse">
<item name="searchAutoCompleteTextView">#style/Widget.Sherlock.SearchAutoCompleteTextView</item>
<item name="android:searchAutoCompleteTextView">#style/Widget.Sherlock.SearchAutoCompleteTextView</item>
<item name="searchAutoCompleteTextViewStyle">#style/Widget.Sherlock.SearchAutoCompleteTextView</item>
<item name="android:searchAutoCompleteTextViewStyle">#style/Widget.Sherlock.SearchAutoCompleteTextView</item>
<item name="textAppearanceLargePopupMenu">#style/Widget.Sherlock.SearchAutoCompleteTextView</item>
<item name="android:textAppearanceLargePopupMenu">#style/Widget.Sherlock.SearchAutoCompleteTextView</item>
<item name="textAppearanceSmallPopupMenu">#style/Widget.Sherlock.SearchAutoCompleteTextView</item>
<item name="android:textAppearanceSmallPopupMenu">#style/Widget.Sherlock.SearchAutoCompleteTextView</item>
</style>
Edit : not sure about the added lines but you can try. I spot it in some fixes for the HoloEverywhere library.
May be there are is best way to do this , but used the very simple way, I used library for that
#Override
public boolean onCreateOptionsMenu(Menu menu) {
searchMenuItem = CollapsibleMenuUtils.addSearchMenuItem(menu, false,
textWatcher);
return true;
}
set the boolean value for true/false for setting Light/Dark theme
addSearchMenuItem(Menu menu, boolean isLightTheme, TextWatcher
textWatcher)
Adding collapsible search menu item to the menu.
Parameters: menu isLightTheme - true if use light them for ActionBar,
else false textWatcher
for changing the text color i changed the librery's layout/ holodark.xml
<AutoCompleteTextView
android:id="#+id/search_src_text"
android:layout_width="0dp"
.
.
android:textColor="#android:color/white" />
Here iam useing SearchView like this it's working nice searchtext color also in white color.
this one res/menu and name is applications_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="#+id/Accounts"
android:icon="#drawable/ic_launcher">
</item>
<item
android:id="#+id/menu_search"
android:actionViewClass="android.widget.SearchView"
android:icon="#drawable/ic_launcher"
android:showAsAction="ifRoom"
android:title="menu_search">
</item>
</menu>
this one use in activity when you search like this
new MenuInflater(this).inflate(R.menu.applications_menu, menu);
SearchManager searchManager = (SearchManager) getSystemService(Context.SEARCH_SERVICE);
SearchView searchView = (SearchView) menu.findItem(R.id.menu_search).getActionView();
searchView.setSearchableInfo(searchManager.getSearchableInfo(getComponentName()));
searchView.setIconifiedByDefault(false);
here is screen
The issue is that the SearchView is initialized without properly considering the ActionBar style (in this case Dark ActionBar on Light) that is set. And the answer is to use the ActionBar themed Context; retrieved by Activity.getActionBar().getThemedContext(). This is mentioned at the bottom of ABS Migration:
If you are using list navigation pay special attention to the 'List Navigation' example in the demos sample for direction on proper use. You need to use the library-provided layouts for both the item view and dropdown view as well as use the themed context from the action bar.
My code is how it is done in standard Android, you'd have to get the ActionBar however appropriate. If you pass the themed Context to the SearchView then it will use the appropriate style, namely, it won't render itself as if it were on a light background.

Custom Notification View

I would like to create a notification icon view that looks similar to the Google+ app's notification. The difference will be that I need to be able to change the color at runtime where as the Google+ icons gray or red so I'm assuming they are using a StateListDrawable.
What is the best approach for this? I'd prefer to have the rounded clipped corners and have the option to have a drawable inside. This custom view will be placed in the Action Bar as well. I still need the view to respond to android:background state list drawables so I can have the click and selected accordance working.
This custom view will be placed in the action bar as well.
I solved this by doing the following.
Created this to make the rounded corner shape with a solid color. This also adds a translucent black to give it a pressed look against a blackground.
res/drawable/shape_notification.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:color="#33000000" android:width="2dp"/>
<corners android:radius="4dp" />
<solid android:color="#99333333"/>
</shape>
The layer drawable will be used as the actual drawable on the action bar item. It has the background (written above) overlayed with the wrench icon.
res/drawable/layer_customizer.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/shape_notification" />
<item android:drawable="#drawable/ic_menu_preferences" />
</layer-list>
Java code to change the color. The target view is the object that is assigned the layer_customizer drawable. The color passed in will change the shape_notification.xml's solid tag color.
public static void setCustomizerDrawableColor(final View target, final int color) {
final Drawable d = target.getDrawable();
LayerDrawable layer = (LayerDrawable)d;
GradientDrawable gradient = (GradientDrawable)layer.getDrawable(0);
gradient.setColor(color);
gradient.invalidateSelf();
layer.invalidateSelf();
target.invalidate();
}
Create a layout using these layers.
res/layout/actionview_customizer.xml
<?xml version="1.0" encoding="utf-8"?>
<ImageButton xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/ActionViewCustomizer"
android:src="#drawable/layer_customizer"
android:contentDescription="#string/customize"
style="#style/ActionBarButton" />
To get the custom layout to put into the ActionBar add this menu item into it:
res/menu/actionbar_main.xml
<item android:id="#+id/MenuItemCustomize"
android:icon="#drawable/layer_customizer"
android:title="#string/customize"
android:showAsAction="always"
android:actionLayout="#layout/actionview_customizer"
/>
Then after loading the Action Bar use this code to get the handle to the button. This happens in your Activity.
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.actionbar_main, menu);
final ActionBar actionBar = getActionBar();
final MenuItem customizerItem = menu.findItem(R.id.MenuItemCustomize);
View v = customizerItem.getActionView();
customizerActionView = (ImageButton) v;
customizerActionView.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
onOptionsItemSelected(customizerItem);
}
});
}
If you want to see the full source working together look at the app source code I use this in. http://code.google.com/p/motivatormaker-android/source/browse/MakeMotivator/src/com/futonredemption/makemotivator/activities/MainActivity.java

Categories

Resources