CODEWITHSUNDEEP
androidandroid-layoutandroid-edittextautocompletetextview
Nitish
Nitish

Reputation: 3155

Android: Search box design

I want to design a search box in my app which would look as follows:
search icon

When I click on it, it should expand as follows:

search box

But, I am not getting how to achieve this.

Upvotes: 0

Views: 2238

Answers (4)

breadbin
breadbin

Reputation: 584

Depending on how the search box is used in your app, it might suit best to use Action Views in the ActionBar. This is Google's suggested way of including an expandable, responsive search box in an Activity.

For Android versions before SDK 11, you can achieve all the same functionality with a compatibility library, ActionBarSherlock. While I haven't used expandable search bars in ActionBarSherlock myself, it looks like it is possible here using a SearchView.

Hope that helps!

Upvotes: 0

Afsal B Bavummal
Afsal B Bavummal

Reputation: 348

Create An Linear layout. set its background as your full edit box image. inside that linear layout add one editbox and button. set the background of button as android:background="@drawable/searchbtn". set the background of edit box as a none image(transparent image).its done.

Upvotes: 0

Deepanker Chaudhary
Deepanker Chaudhary

Reputation: 1704

You Should use RelativeLayout & set ImageView align_parent_top & align_parent_right or if you use LinearLayout then you can try in this way:---

<LinearLayout
    android:id="@+id/ll_my_profile"
    android:layout_width="fill_parent"
    android:layout_height="45dp"
    android:layout_marginLeft="10dp"
     android:clickable="true"
    android:layout_marginRight="10dp"
    android:background="@drawable/txt_box_bg"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/my_profile"
        android:layout_width="0dip"
        android:layout_height="45dp"
        android:layout_weight="1"
        android:gravity="left"
        android:hint="My Profile"
        android:padding="10dp"
        android:textColor="#000000"
        android:textSize="18dp" />

    <ImageView
        android:id="@+id/img_for_setting"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right|center_vertical"
        android:background="@drawable/arrow" />
</LinearLayout>

Upvotes: 1

Kumaran
Kumaran

Reputation: 180

have you tried mobile Jquery utilities ? it should not be difficult to achieve this.

Upvotes: 0

Related Questions