Android - 创建自定义SearchView

Question

I am having a List Activity which include a SearchView and ListView. I wish to have SearchView similar to what is present in google maps android app.

Currently my SearchView code in activity_main.xml is

<SearchView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:queryHint="Search restaurants"
        android:iconifiedByDefault="false"
        android:id="@+id/searchView" />

Can someone guide me how to get a custom SearchView like above.

Answer 1

You can add a android.support.v7.widget.Toolbar from AppCompat Library in your layout. It acts like a custom ActionBar that can be placed anywhere. Then you can add a menu toggle, and a android.support.v7.widget.SearchView which can collapse/expand. finally, add some actions from a menu.xml .

Setting a custom Toolbar as your ActionBar replacement:

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.blah);

    Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
    setSupportActionBar(toolbar);
}

Answer 2

You have to create the layout with icons and EditText. Something like this:

<RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="@dimen/abc_action_bar_default_height"
        >

    <ImageButton
            android:id="@+id/btnGoToMap"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:padding="18dp"
            android:background="@android:color/transparent"
            android:src="@drawable/btn_go_to_map_selector"
            android:contentDescription="@string/contentDescription"
            />

    <ImageButton
            android:id="@+id/btnCleanSearch"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:paddingTop="18dp"
            android:paddingLeft="18dp"
            android:paddingBottom="18dp"
            android:paddingRight="27.5dp"
            android:background="@android:color/transparent"
            android:src="@drawable/btn_clean_search_selector"
            android:contentDescription="@string/contentDescription"
            />
    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:layout_marginLeft="60dp"
            android:layout_marginRight="60dp"
            >
        <ImageButton
                android:id="@+id/btnShowSearch"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="5dp"
                android:layout_gravity="center_vertical"
                android:background="@android:color/transparent"
                android:src="@drawable/btn_show_search_field_selector"
                android:contentDescription="@string/contentDescription"
                />
        <EditText
                android:id="@+id/fldSearchPhrase"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:inputType="text"
                android:singleLine="true"
                android:textSize="20sp"
                android:textColor="@android:color/black"
                >
                <requestFocus/>
        </EditText>
    </LinearLayout>

</RelativeLayout>

It's also more flexible and allow you to manage separate parts of your layout.