How implement the Google Play like search bar

Question

I need to implement a search in my app and it should look like this

would someone please care enough to explain to me how its done.?? Thanks in advance

Answer 1

You can create a custom layout for that. 1. take a relative layout and give it a rounded bordered background to it. 2. add hamburger icon to left in it. 3. add mic icon to right in it. 4. Add edittext to it in the center. and then handle to click on both hamburger icon and mic icon manually.

I have some code which is not exactly same but you can edit and change it accordingly.

<RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginLeft="@dimen/activity_horizontal_margin"
            android:layout_marginRight="@dimen/activity_horizontal_margin"
            android:background="@drawable/editext_border">

            <ImageView
                android:id="@+id/iv_search_mic"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_centerVertical="true"
                android:src="@drawable/ic_mic_green" />

            <EditText
                android:id="@+id/ed_home_searchbar"
                fontPath="fonts/weblysleekuisl.ttf"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_toLeftOf="@+id/iv_search_icon"
                android:layout_toRightOf="@+id/iv_search_mic"
                android:background="@android:color/transparent"
                android:hint="@string/action_search"
                android:imeOptions="actionSearch"
                android:padding="10dp"
                android:singleLine="true"
                android:textColor="@color/colorText"
                android:textCursorDrawable="@drawable/color_cursor"
                android:textSize="@dimen/text_xxsmall" />

            <ImageView
                android:id="@+id/iv_search_icon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:src="@drawable/ic_search_green" />

        </RelativeLayout>

and then handle the click event like open google voice search on mic click

searchMic.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                OnSwap.getInstance().trackEvent(TAG, "searchMic", "searchMic Clicked");
                Intent intent = new Intent(RecognizerIntent.ACTION_RECOGNIZE_SPEECH);
                intent.putExtra(RecognizerIntent.EXTRA_LANGUAGE_MODEL,
                        RecognizerIntent.LANGUAGE_MODEL_FREE_FORM);
                intent.putExtra(RecognizerIntent.EXTRA_PROMPT, "Search");
                startActivityForResult(intent, VOICE_INPUT_REQUEST_CODE);
            }
        });

and then onActivityResult method

if (requestCode == VOICE_INPUT_REQUEST_CODE) {
            if (resultCode == RESULT_OK) {
                ArrayList<String> matches = data.getStringArrayListExtra(
                        RecognizerIntent.EXTRA_RESULTS);
                int matchSize = matches.size();
                for (int index = 0; index < matchSize; index++) {
                    Log.i(TAG, String.valueOf(index) + ": " + matches.get(index));
                    if (index == 0) {
                        searchbar.setText(matches.get(index));
                    }
                }
            } else if (resultCode == PlaceAutocomplete.RESULT_ERROR) {
                Status status = PlaceAutocomplete.getStatus(this, data);
                // TODO: Handle the error.
                Log.i(TAG, status.getStatusMessage());
                Snackbar.make(locationTextView, status.getStatusMessage(), Snackbar.LENGTH_LONG).show();

            } else if (resultCode == RESULT_CANCELED) {
                Snackbar.make(locationTextView, "Canceled", Snackbar.LENGTH_LONG).show();
            }
        }