Implementing Search in Zomato

The search screen in Zomato opens up when you click on the search icon on the Toolbar on the home page. Clicking on the search icon will produce a ripple effect, which helps a user to get a better experience:

When you click on the search icon, it opens up a new screen of search. When this screen opens up, there is a smooth transition that takes place as each of the components appears on the screen. The search icon first opens up smoothly to form the toolbar:

The search icon's in-between transition shows that the ripple wave grows gradually until it completely covers the toolbar:

Once the search icon translates to form the toolbar, the EditText translates down from the top to the bottom and the quick search options simultaneously translate up, creating a smooth transition effect:

The XML layout of the search view is shown in the following code:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:background="@color/app_bg_color"> 
 
    <LinearLayout 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:orientation="vertical"> 
 
        <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content" 
            android:background="@color/colorPrimary" 
            android:gravity="center_vertical" 
            android:minHeight="?attr/actionBarSize" 
            android:orientation="horizontal"> 
 
            <ImageButton 
                android:layout_width="wrap_content" 
                android:layout_height="wrap_content" 
                android:background="?attr/selectableItemBackground" 
                android:padding="10dp" 
                android:onClick="closeClick" 
                android:src="@drawable/im_close" 
                android:tint="@color/white" /> 
 
            <LinearLayout 
                android:layout_width="0dp" 
                android:layout_height="wrap_content" 
                android:layout_weight="1" 
                android:orientation="vertical" 
                android:paddingLeft="8dp" 
                android:paddingRight="8dp"> 
 
                <TextView 
                    android:id="@+id/title" 
                    android:layout_width="wrap_content" 
                    android:layout_height="wrap_content" 
                    android:text="Panaji" 
                    android:textColor="@color/white" 
                    android:textSize="18sp" 
                    android:textStyle="normal" /> 
 
            </LinearLayout> 
 
        </LinearLayout> 
 
        <LinearLayout 
            android:id="@+id/searchViewLay" 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content" 
            android:background="@drawable/ripple_white_button" 
            android:gravity="center" 
            android:padding="10dp"> 
 
            <ImageView 
                android:layout_width="wrap_content" 
                android:layout_height="wrap_content" 
                android:padding="5dp" 
                android:src="@drawable/im_search_72" /> 
 
            <EditText 
                android:id="@+id/searchText" 
                android:layout_width="match_parent" 
                android:layout_height="wrap_content" 
                android:background="@color/transparent" 
                android:hint="Type to filter by location" 
                android:padding="10dp" 
                android:textSize="14dp" /> 
 
        </LinearLayout> 
 
        <RelativeLayout 
            android:layout_width="match_parent" 
            android:layout_height="match_parent"> 
 
            <android.support.v7.widget.RecyclerView 
                android:id="@+id/searchList" 
                android:layout_width="match_parent" 
                android:layout_height="match_parent" /> 
 
        </RelativeLayout> 
 
    </LinearLayout> 
 
</RelativeLayout> 

The major components on this screen are the EditText, for typing the text for searching. Another important component is the RecyclerView, which displays the list of all the details. Here, we are concerned more about the way the UX for the search gives a smooth experience to a user. For this, various animations are used:

//ANIMATIONS 
private void enterViews() { 
   showTop(searchViewLay); 
   showBottom(mightLike, new AnimatorListenerAdapter() { 
         @Override 
         public void onAnimationStart(Animator animation) { 
               super.onAnimationStart(animation); 
         } 
   }); 
} 

The enterViews method animates the are being used f

The showTop method inside the enterViews method is described as follows:

private void showTop(View view) { 
   view.setVisibility(View.VISIBLE); 
   Animator iconAnim = ObjectAnimator.ofPropertyValuesHolder(view, 
               PropertyValuesHolder.ofFloat(View.TRANSLATION_Y, -view.getHeight(), 0f)); 
   iconAnim.setDuration(VIEW_ANIMATION); 
   iconAnim.start(); 
} 

The showTop method makes the view visible. The view being passed to the method as a parameter is the searchViewLayout, which means that it makes the search view visible. Then it adds the animation to that particular search view layout. The animation is set to make a translate animation, which means that the search view layout will be translated along the Y axis for a distance of the searchViewLayout's height, for the duration of VIEW_ANIMATION's time. Then, the animation is started using the start() method. The following is the explanation of the showBottom method inside the enterViews method:

private void showBottom(View view, Animator.AnimatorListener listener) {
view.setVisibility(View.VISIBLE);
Animator iconAnim = ObjectAnimator.ofPropertyValuesHolder(view,
PropertyValuesHolder.ofFloat(View.TRANSLATION_Y, view.getHeight(), 0f));
iconAnim.setDuration(VIEW_ANIMATION);
iconAnim.addListener(listener);
iconAnim.start();
}

The showBottom() method, similar to the showTop() method, will do the same translation animation for the mightLike layout. This animation will have a listener, which will let you know when the animation starts and when it ends. The exitViews() method will be called when the search view has to be closed. These animations will show up just before the search view closes:

//EXIT 
private void exitViews() { 
   hideTop(searchViewLay); 
   hideBottom(mightLike, new AnimatorListenerAdapter() { 
         @Override 
         public void onAnimationStart(Animator animation) { 
               super.onAnimationStart(animation); 
         } 
 
         @Override 
         public void onAnimationEnd(Animator animation) { 
               super.onAnimationEnd(animation); 
         } 
   }); 
   new Handler().postDelayed(new Runnable() { 
         @Override 
         public void run() { 
               finish(); 
               overridePendingTransition(0, 0); 
         } 
   }, 50); 
 
} 

Here, both the searchViewLay and the mightLike layouts should be hidden, showing the closing animations:

private void hideTop(final View view) { 
   view.setVisibility(View.VISIBLE); 
   Animator iconAnim = ObjectAnimator.ofPropertyValuesHolder(view, 
               PropertyValuesHolder.ofFloat(View.TRANSLATION_Y, 0f, -view.getHeight()), 
               PropertyValuesHolder.ofFloat(View.ALPHA, 1f, 0f)); 
   iconAnim.setDuration(VIEW_ANIMATION); 
   iconAnim.start(); 
} 

In the hideTop() method, the searchViewLay will be made to animate along the Y-axis in the opposite direction with respect to the preceding translation:

private void hideBottom(final View view, Animator.AnimatorListener listener) { 
   view.setVisibility(View.VISIBLE); 
   Animator iconAnim = ObjectAnimator.ofPropertyValuesHolder(view, 
               PropertyValuesHolder.ofFloat(View.TRANSLATION_Y, 0f, view.getHeight()), 
               PropertyValuesHolder.ofFloat(View.ALPHA, 1f, 0f)); 
   iconAnim.setDuration(VIEW_ANIMATION); 
   iconAnim.addListener(listener); 
   iconAnim.start(); 
}