Question

I’ve tried researching about this for many days. I’ve really really no idea how to start on doing a very similar style as below. I know it consists of one button and a edittext. However, i do not know how to begin with. Do anybody have a sample code for similar styled bar?

Answer 1

The android search bar is a mix of native and custom elements.

The Layout used by the search bar can be found in the android source code at this path (for the 2.1 version I can on my hard drive):

frameworks/base/core/res/res/layout/search_bar.xml

You can found the detail of the layout below:

<view
    xmlns:android="http://schemas.android.com/apk/res/android"
    class="android.app.SearchDialog$SearchBar"
    android:id="@+id/search_bar"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:focusable="true"
    android:descendantFocusability="afterDescendants">

    <!-- Outer layout defines the entire search bar at the top of the screen -->
    <LinearLayout
        android:id="@+id/search_plate"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:paddingLeft="12dip"
        android:paddingRight="12dip"
        android:paddingTop="7dip"
        android:paddingBottom="16dip"
        android:background="@drawable/search_plate_global" >

        <!-- This is actually used for the badge icon *or* the badge label (or neither) -->
        <TextView 
            android:id="@+id/search_badge"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="2dip"
            android:drawablePadding="0dip"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textColor="?android:attr/textColorPrimaryInverse" />

        <!-- Inner layout contains the app icon, button(s) and EditText -->

       <LinearLayout
            android:id="@+id/search_edit_frame"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/search_app_icon"
                android:layout_height="36dip"
                android:layout_width="36dip"
                android:layout_marginRight="7dip"
                android:layout_gravity="center_vertical"
            />

            <view class="android.app.SearchDialog$SearchAutoComplete"
                android:id="@+id/search_src_text"
                android:background="@drawable/textfield_search"
                android:layout_height="wrap_content"
                android:layout_width="0dip"
                android:layout_weight="1.0"
                android:paddingLeft="8dip"
                android:paddingRight="6dip"
                android:drawablePadding="2dip"
                android:singleLine="true"
                android:ellipsize="end"
                android:inputType="text|textAutoComplete"
                android:dropDownWidth="fill_parent"
                android:dropDownHeight="fill_parent"
                android:dropDownAnchor="@id/search_plate"
                android:dropDownVerticalOffset="-9dip"
                android:popupBackground="@android:drawable/search_dropdown_background"
            />

            <!-- This button can switch between text and icon "modes" -->
            <Button 
                android:id="@+id/search_go_btn"
                android:background="@drawable/btn_search_dialog"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
            />

            <ImageButton
                android:id="@+id/search_voice_btn"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:layout_marginLeft="8dip"
                android:background="@drawable/btn_search_dialog_voice"
                android:src="@android:drawable/ic_btn_speak_now"
            />
        </LinearLayout>
    </LinearLayout>
</view>

All the drawables and styles are also in the source code.

To make exactly the same thing, you will have to copy the different elements in your own project.

You may also have to have a look the different classes:

• SearchDialog.SearchBar
• SearchDialog.SearchAutoComplete