Select Page

SearchView used to filter the needed items from the list based on the search term. There are lots of tutorials available for SearchView implementation. Here I want to share with you about, how to customize this view based on your need and add the circular reveal animation while expand/collapse the view.

Reveal animations provide users visual continuity when you show or hide a group of UI elements. Circular reveal animation enables you to animate a clipping circle to reveal or hide a view. API level 21+ only supports this animation.

How to customize SearchView ?

We can change the colors, icons and also the text. The following code snippet helps you to change all these things.

public void initSearchView()
{
final SearchView searchView =
(SearchView) search_menu.findItem(R.id.action_filter_search).getActionView();
// Enable Submit button
searchView.setSubmitButtonEnabled(true);
// Change search close button image
ImageView closeButton = (ImageView) searchView.findViewById(R.id.search_close_btn);
closeButton.setImageResource(R.drawable.ic_close);
// Set hint and the text colors
EditText txtSearch = ((EditText) searchView.findViewById(android.support.v7.appcompat.R.id.search_src_text));
txtSearch.setHint("Search..");
txtSearch.setHintTextColor(Color.DKGRAY);
txtSearch.setTextColor(getResources().getColor(R.color.colorPrimary));
// Set the cursor
AutoCompleteTextView searchTextView = (AutoCompleteTextView) searchView.findViewById(android.support.v7.appcompat.R.id.search_src_text);
try {
Field mCursorDrawableRes = TextView.class.getDeclaredField("mCursorDrawableRes");
mCursorDrawableRes.setAccessible(true);
mCursorDrawableRes.set(searchTextView, R.drawable.search_cursor); //This sets the cursor resource ID to 0 or @null which will make it visible on white background
} catch (Exception e) {
e.printStackTrace();
}
}

How to get the events ?

For handling SearchView events, just add QueryTextListener. In this listener contains the callback methods which handles the query text change and submit actions.

searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
@Override
public boolean onQueryTextSubmit(String query) {
callSearch(query);
searchView.clearFocus();
return true;
}
@Override
public boolean onQueryTextChange(String newText) {
callSearch(newText);
return true;
}
public void callSearch(String query) {
//Do searching
Log.i("query", "" + query);
}
});

How to add circular reveal animation ?

Here I am going to share the code for implementing circular animation. This code is applicable only for actionbar SearchVew because we need to find out the origin of the circle for the circular reveal animation. In actionbar menu contains both action buttons and overflow icon. So based on the occurrence of these, we need to change the origin points.

@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public void circleReveal(int viewID, int posFromRight, boolean containsOverflow, final boolean isShow)
{
final View myView = findViewById(viewID);
int width=myView.getWidth();
if(posFromRight>0)
width<span class="pl-k">-=</span>(posFromRight<span class="pl-k">*</span>getResources()<span class="pl-k">.</span>getDimensionPixelSize(<span class="pl-smi">R</span><span class="pl-k">.</span>dimen<span class="pl-k">.</span>abc_action_button_min_width_material))<span class="pl-k">-</span>(getResources()<span class="pl-k">.</span>getDimensionPixelSize(<span class="pl-smi">R</span><span class="pl-k">.</span>dimen<span class="pl-k">.</span>abc_action_button_min_width_material)<span class="pl-k">/</span> <span class="pl-c1">2</span>);
if(containsOverflow)
width-=getResources().getDimensionPixelSize(R.dimen.abc_action_button_min_width_overflow_material);
int cx=width;
int cy=myView.getHeight()/2;
Animator anim;
if(isShow)
anim = ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0,(float)width);
else
anim = ViewAnimationUtils.createCircularReveal(myView, cx, cy, (float)width, 0);
anim.setDuration((long)220);
// make the view invisible when the animation is done
anim.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
if(!isShow)
{
super.onAnimationEnd(animation);
myView.setVisibility(View.INVISIBLE);
}
}
});
// make the view visible and start the animation
if(isShow)
myView.setVisibility(View.VISIBLE);
// start the animation
anim.start();
}

Use the below code you can show and hide the SearchView.

// To reveal a previously invisible view
circleReveal(R.id.searchtoolbar,1,true,true);
// To hide a previously visible view
circleReveal(R.id.searchtoolbar,1,true,false);

I made a simple sample app using this concept, it’s over on GitHub if you want to check it out.

View on GithubDownload .zip

Feel free to comment and share, keep watching this space get more updates on Android Stuff!

Elsewhere

Jaison Fernando

Android Developer at NFN Labs
Elsewhere