Android custom layout for search widget

Question

I want to have a search field in my actionbar in my Android app. I can do it without difficulty with default design. but I want to have the attached image design for my search bar. Is there any way to have a custom design for my search field?
I want to to be like the left image and when clicked , turn into the right image with a simple animation.
Thanks very much

Answer 1

You can create your custom EditText by creating a class implementing TextWatcher and create your own layout like:

public class MyEditText extends LinearLayout implements TextWatcher {
private EditText editText;

public MyEditText(Context context) {
    super(context);
    initializeView(context, null);
}

...

@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
}

@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
}

@Override
public void afterTextChanged(Editable s) {

}

public EditText getEditText() {
    return editText;
}


private void initializeView(Context context, AttributeSet attrs) {
    LayoutInflater inflater = LayoutInflater.from(context);
    View view = inflater.inflate(R.layout.view_my_edittext, this, false);

    editText = (EditText) view.findViewById(android.R.id.edit);

}
}

With a layout like:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:focusable="false">

<EditText
    android:id="@android:id/edit"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginRight="@dimen/drawable_size"
    android:layout_marginEnd="@dimen/drawable_size"
    android:background="@null"
    android:focusable="true" />

<TextView
    android:id="@android:id/hint"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawableLeft="@drawable/logo"
    android:focusable="false" />

</FrameLayout>