Android: Search box design

Question

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.

score 1 · Answer 1 · answered Dec 17 '12 at 08:54

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>

My requirement is, initially the edittext should appear as the first image that I posted above and when I click on it, it should expand as I have illustrated in the second image. — Nitish, Dec 17 '12 at 09:07
for this just use RelativeLayout & make RelativeLayout orientation horizontal & take an edittext & imageview & in image view put in this way:- — Deepanker Chaudhary, Dec 17 '12 at 09:21

score 0 · Answer 2 · answered Dec 17 '12 at 08:52

0

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

answered Dec 17 '12 at 08:52

Kumaran

180
2
15

breadbin · Answer 3 · 2012-12-17T09:28:14.173

0

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!

edited Dec 17 '12 at 09:28

answered Dec 17 '12 at 09:05

breadbin

584
1
11
19

Thanks, for quick response. But, min Sdk version of my app is 8, while this has been introduced since api level 11. Is it available in compatibility package? – Nitish Dec 17 '12 at 09:21
Just edited my answer with details on the compatibility library that should give you the functionality you need on SDK version 8. – breadbin Dec 17 '12 at 09:28

score 0 · Answer 4 · answered Dec 17 '12 at 09:05

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.

Android: Search box design

4 Answers4