Develop Reference

Using RTL direction in closeButton of android.support.v7.widget.SearchView

I'm trying to change direction of SearchView in toolbar, and this is my try
layout.xml
android:layoutDirection="rtl"
menu.xml
<item android:id="#+id/action_search"
android:title="#string/search_hint"
android:icon="#mipmap/ic_search_icon"
app:showAsAction="ifRoom|collapseActionView"
app:actionViewClass="android.support.v7.widget.SearchView" />
Java code:
MenuItem searchItem = menu.findItem(R.id.action_search);
SearchView mSearchView = (SearchView) MenuItemCompat.getActionView(searchItem);
getSupportActionBar().setCustomView(MenuItemCompat.getActionView(searchItem));
mSearchView.setInputType(InputType.TYPE_CLASS_TEXT);
mSearchView.setQueryHint(getString(R.string.search_hint));
mSearchView.setGravity(Gravity.RIGHT);
mSearchView.setTextDirection(View.TEXT_DIRECTION_RTL);
mSearchView.setTextAlignment(View.TEXT_ALIGNMENT_GRAVITY);
mSearchView.setLayoutDirection(View.LAYOUT_DIRECTION_RTL);
mSearchView.setLayoutParams(new ActionBar.LayoutParams(Gravity.RIGHT));
And this is the result, I success added the SearchView to toolbar and is RTL now. But the issue is position of "X" (closeButton) is wrong, the position must be at left.

add this for change x direction:
View xIcon = ((ViewGroup) mSearchView.getChildAt(0)).getChildAt(2);
xIcon.setLayoutDirection(View.LAYOUT_DIRECTION_RTL);

To Support Rtl in your App. you have to set android:supportsRtl="true" in your manifest.xml.
And Most Important point keep in Mind
Change all of your app's "Left/Right" layout properties to Start/End.
In you case you are setting.
mSearchView.setGravity(Gravity.RIGHT);
so change it to
mSearchView.setGravity(Gravity.END);
and also change here this
mSearchView.setLayoutParams(new ActionBar.LayoutParams(Gravity.RIGHT));
to
mSearchView.setLayoutParams(new ActionBar.LayoutParams(Gravity.END));

You can use this method to move closeButton to right in RTL locales:
private static void handleCloseButtonRtlIssue(SearchView searchView) {
((LinearLayout) ((LinearLayout) searchView.getChildAt(0)).getChildAt(2)).getChildAt(1).setLayoutDirection(View.LAYOUT_DIRECTION_LTR);
}

the problem is that when you change layoutDirection to rtl, toolbar itself will become rtl. but layoutDirection for other layouts inside toobar will not change. and editText with close button are in a nested layout.
so you have to find parent layout and change direction for that. if you see inside SearchView layout file. you'll find that exit button is inside a layout with search_plate id
so in onCreateOptionsMenu after setup SearchView do this
kotlin
mSearchView.findViewById<View>(R.id.search_plate)?.let {
it.layoutDirection = View.LAYOUT_DIRECTION_RTL
}
java
((View) mSearchView.findViewById(R.id.search_plate))
.setLayoutDirection(View.LAYOUT_DIRECTION_RTL)
Update
or you can use this kotlin extention for other rtl problem as well.
fun ViewGroup.rtl() {
val stack = Stack<View>()
stack.add(this)
while (stack.isNotEmpty()) {
stack.pop().apply {
layoutDirection = View.LAYOUT_DIRECTION_RTL
textDirection = View.TEXT_DIRECTION_RTL
(this as? ViewGroup)?.children?.forEach { stack.add(it) }
}
}
}
use it like this
view.rtl() //and view become rtl :)

How to remove white underline in a SearchView widget in Toolbar Android

I am using the Toolbar search widget in my project. Everything works fine but expect the thing which I am completely stuck up with removing the underline below the search field in my toolbar. I have tried many solutions and nothing works out. Below are some of the solutions that I tried.
Requirement is to remove white underline in the image
Ist Solution:
//Removing underline
int searchPlateId = searchView.getContext().getResources().getIdentifier("android:id/search_plate", null, null);
View searchPlate = searchView.findViewById(searchPlateId);
if (searchPlate!=null) {
searchPlate.setBackgroundColor (Color.TRANSPARENT);
int searchTextId = searchPlate.getContext ().getResources ().getIdentifier ("android:id/search_src_text", null, null);
}
IInd Solution:
EditText searchEdit = ((EditText)searchView.findViewById(android.support.v7.appcompat.R.id.search_src_text));
searchEdit.setBackgroundColor(Color.TRANSPARENT);
The above code works to change the background of EditText but still underline is displaying below the close icon in SearchBar.
Complete code that I am using for SearchBar widget as follows:
#Override
public void onCreateOptionsMenu(Menu menu, MenuInflater infl) {
super.onCreateOptionsMenu(menu, infl);
MenuInflater inflater = getActivity().getMenuInflater();
inflater.inflate(R.menu.action_search, menu);
final SearchView searchView = (SearchView) MenuItemCompat
.getActionView(menu.findItem(R.id.search));
SearchManager searchManager = (SearchManager) getActivity ().getSystemService (getActivity ().SEARCH_SERVICE);
searchView.setSearchableInfo (searchManager.getSearchableInfo (getActivity ().getComponentName ()));
//changing edittext color
EditText searchEdit = ((EditText)searchView.findViewById(android.support.v7.appcompat.R.id.search_src_text));
searchEdit.setTextColor(Color.WHITE);
}
action_search.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:compat="http://schemas.android.com/apk/res-auto">
<item android:id="#+id/search"
android:title="Search"
android:icon="#drawable/abc_ic_search_api_mtrl_alpha"
compat:showAsAction="ifRoom|collapseActionView"
compat:actionViewClass="android.support.v7.widget.SearchView" />
</menu>
possible duplicate of this

If you are using SearchView then use for API below 21
android:queryBackground="#android:color/transparent"
you can use below code if you are using API 21 or more
app:queryBackground="#android:color/transparent"

Once try as follows
View v = searchView.findViewById(android.support.v7.appcompat.R.id.search_plate);
v.setBackgroundColor(Color.parseColor("here give actionbar color code"));
Hope this will helps you.

Just add this line if you are using a v7 or androidx widget
app:queryBackground="#android:color/transparent"

Or you can do this through styles:
<style name="SearchViewMy" parent="Widget.AppCompat.Light.SearchView">
<item name="submitBackground">#color/primaryColor</item>
<item name="queryBackground">#color/primaryColor</item>
</style>
queryBackground is attribute for the query background. If you support voice search you may want to remove the line also under that mic button. Thats what submitBackground attribute is for.
Then of course apply the style to your theme.
<style name="Theme.App" parent="Theme.AppCompat.Light.NoActionBar.FullScreen">
<item name="searchViewStyle">#style/SearchViewMy</item>
</style>

For AndroidX I used this based on other answers here,
searchView.findViewById(androidx.appcompat.R.id.search_plate)
.setBackgroundColor(Color.TRANSPARENT)

if you want to remove the underline from SearchView, then just copy paste the below code to your SearchView. it works
android:queryBackground="#null"
like this,
<SearchView
android:id="#+id/searchView"
android:layout_width="match_parent"
android:layout_height="100dp"
android:queryBackground="#null"
/>

You can try using the below code, works like a charm for me.
View v = searchView.findViewById(android.support.v7.appcompat.R.id.search_plate);
v.setBackgroundColor(ContextCompat.getColor(context,android.R.color.transparent));

The below piece of code works for me.
val searchView = menu?.findItem(R.id.action_search)?.actionView as SearchView
searchView.findViewById<View>(androidx.appcompat.R.id.search_plate).background = null

For androidx and kotlin:
menuInflater.inflate(R.menu.conversation_list_screen_menu, menu)
val searchItem = menu.findItem(R.id.action_search)
searchView = searchItem.actionView as SearchView
searchView?.findViewById<View>(androidx.appcompat.R.id.search_plate)?.setBackgroundColor(Color.TRANSPARENT)

The code for changing the background color of SearchView edit text is below
public static void setSearchViewEditTextBackgroundColor(Context context, SearchView searchView, int backgroundColor){
int searchPlateId = context.getResources().getIdentifier("android:id/search_plate", null, null);
ViewGroup viewGroup = (ViewGroup) searchView.findViewById(searchPlateId);
viewGroup.setBackgroundColor(ComponentUtils.getColor(context, backgroundColor));
}
If your action bar background color is white then call the above method as follow.
setSearchViewEditTextBackgroundColor(this, searchView, R.color.white);
Now the underline from SearchView edit text will disappear.

First you should get the bottom line simply like this:
searchPlate = (View) findViewById(R.id.search_plate);
Then you should set background color to transparent like this:
searchPlate.setBackgroundColor(Color.TRANSPARENT);
This works perfectly for androidx.appcompat.widget.SearchView!

How to set custom font to android toolbar's subtitle?

i want to get the subtitle´s textview in an android's toolbar to change it's font. Actually i'm doing it with the title, getting it on this way:
Field f = toolbar.getClass().getDeclaredField("mTitleTextView");
f.setAccessible(true);
titleTextView = (TextView) f.get(toolbar);
I've tried with the same code but trying to get "mSubtitleTextView" but that's not the solution.
Thanks!!

You can get the subtitle TextView like this:
View subTitleView = toolbar.getChildAt(1);
If you don't add any views to the toolbar, his default structure is:
[0] - (TextView) title
[1] - (TextView) subtitle
[2] - (ActionMenuView) menu
Hope it helps!

Definitely not the best way, but in a pinch this will work. You will have to figure out a way to implement myTypefaceSpan though; I'm using Calligraphy so it ties together decently for me.
CalligraphyTypefaceSpan myTypefaceSpan = new CalligraphyTypefaceSpan(
TypefaceUtils.load(this.getAssets(), "fonts/custom_font.ttf"));
public static void setToolbarSubtitle(String subtitle, Context context) {
SpannableStringBuilder sBuilder = new SpannableStringBuilder();
sBuilder.append(subtitle);
sBuilder.setSpan(MainActivity.myTypefaceSpan, 0, sBuilder.length(),
Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
((MainActivity)context).getSupportActionBar().setSubtitle(sBuilder);
}

Change SearchView little magnifier icon

I want to change the little magnifier icon that looks like an EditText's drawableLeft on a SearchView.
I have tried the following:
This link shows the layout xml file for the whole Search Widget. So using this method (similar to reflection) I changed every icon excepting the little magnifier one:
int submitButtonId = searchView.getContext().getResources().getIdentifier("android:id/search_go_btn", null, null);
ImageView imageView = (ImageView) searchView.findViewById(submitButtonId);
imageView.setImageResource(submitIcon);
I tried changing both android:id/search_mag_icon and android:id/search_button, but the little magnifier inside the EditText is still gray (I just want a white one).
Still not beating, I proceed to make some hypothesis:
Since it didn't work it must be both ImageViews (corresponding to android:id/search_mag_icon and android:id/search_button) Then it must mean the icon is either a drawablePadding background or set up programatically.
"There is no android:drawableLeft nor android:drawableRight in the layout file so the first option is wrong...
Ergo, I proceed to confirm if it is indeed a background. NOPE, the background just covers the blue lines.
So, if the little magnifier is not an ImageView nor a drawableLeft/Right nor a background, It must have been set programmatically (Look for the nested class SearchAutoComplete, BUT NO!!!
So, how do I change this little magnifier icon? I have literally tried everything

Well this question took me about half an hour to write cause I wanted to rule out things I had already done, but I found the answer 5 mins after posting it: http://nlopez.io/how-to-style-the-actionbar-searchview-programmatically/
PS: yep, reflection all the way

In case someone is having this issue, What worked for me was:
searchView.setIconifiedByDefault(false); //This is what does the trick. Removing the magnifier icon.
ImageView searchHintIcon = (ImageView) searchView.findViewById(R.id.search_mag_icon);
searchHintIcon.setImageResource(R.drawable.ic_search_black);
Here is the whole method:
#Override
public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
inflater.inflate(R.menu.home_search, menu);
// Associate searchable configuration with the SearchView
SearchManager searchManager = (SearchManager) getActivity().getSystemService(Context.SEARCH_SERVICE);
searchView = (SearchView) menu.findItem(R.id.search_action).getActionView();
//If, this one returns null, use second option.
SearchableInfo searchableInfo = searchManager.getSearchableInfo(getActivity().getComponentName());
if (searchableInfo == null) {
searchableInfo = searchManager.getSearchableInfo(new ComponentName(getApplicationContext(), SearchActivity.class));
}
searchView.setSearchableInfo(searchableInfo);
searchView.setIconifiedByDefault(false);
try {
EditText searchEditText = (EditText) searchView.findViewById(android.support.v7.appcompat.R.id.search_src_text);
searchEditText.setTextColor(getResources().getColor(R.color.black));
searchEditText.setHintTextColor(getResources().getColor(R.color.black));
ImageView searchHintIcon = (ImageView) searchView.findViewById(R.id.search_mag_icon);
searchHintIcon.setImageResource(R.drawable.ic_search_black);
Field f = TextView.class.getDeclaredField("mCursorDrawableRes");
f.setAccessible(true);
f.set(searchEditText, 0);
} catch (Exception e) {
e.printStackTrace();
}
}

How to implement Action Bar with Fragment? [duplicate]

I would like to dynamically change the "home" icon in the ActionBar. This is easily done in v14 with ActionBar.setIcon(...), but I can't find anyway to accomplish this in previous versions.

If your actionbar works like Sherlock and is based on menu items, this is my solution:
#Override
public boolean onPrepareOptionsMenu(Menu menu) {
MenuItem switchButton = menu.findItem(R.id.SwitchSearchOption);
if(searchScriptDisplayed){
switchButton.setIcon(R.drawable.menu_precedent);
}else{
switchButton.setIcon(R.drawable.icon_search);
}
return super.onPrepareOptionsMenu(menu);
}

If you are using the ActionbarCompat code provided by google, you can access the home icon via the ActionBarHelperBase.java class for API v4 onwards.
//code snippet from ActionBarHelperBase.java
...
private void setupActionBar() {
final ViewGroup actionBarCompat = getActionBarCompat();
if (actionBarCompat == null) {
return;
}
LinearLayout.LayoutParams springLayoutParams = new LinearLayout.LayoutParams(
0, ViewGroup.LayoutParams.MATCH_PARENT);
springLayoutParams.weight = 1;
// Add Home button
SimpleMenu tempMenu = new SimpleMenu(mActivity);
SimpleMenuItem homeItem = new SimpleMenuItem(tempMenu,
android.R.id.home, 0, mActivity.getString(R.string.app_name));
homeItem.setIcon(R.drawable.ic_home_ftn);
addActionItemCompatFromMenuItem(homeItem);
// Add title text
TextView titleText = new TextView(mActivity, null,
R.attr.actionbarCompatTitleStyle);
titleText.setLayoutParams(springLayoutParams);
titleText.setText(mActivity.getTitle());
actionBarCompat.addView(titleText);
}
...
You should be able to modify the code to the home button accessible to the activities that extend ActionBarActivity and change it that way.
Honeycomb seems a little harder and it doesn't seem to give such easy access. At a guess, its id should also be android.R.id.home so you may be able to pull that from the view in ActionBarHelperHoneycomb.java

I would say you do something like this :
getSupportActionBar().setHomeButtonEnabled(true);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_menu_drawer);
see the link How to change the icon actionBarCompat

The ActionBar will use the android:logo attribute of your manifest, if one is provided. That lets you use separate drawable resources for the icon (Launcher) and the logo (ActionBar, among other things).