Replication Of Apple's Search In Android

I want to create a UI similar to as shown here http://appsreviews.com/wp-content/uploads/2010/08/Cures-A-Z-App-for-iPhone.jpg I started out with trying to put two custom lists side

Solution 1:

If the index on the side is what you're looking for, you should try this: http://hello-android.blogspot.com/2010/11/sideindex-for-android.html

Solution 2:

If you want to add to elements side by side which together fill their parent:

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:orientation="horizontal"android:layout_width="match_parent"android:layout_height="match_parent"><ListViewandroid:id="@+id/ListView01"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="90"android:background="#FFFF0000"/><ListViewandroid:id="@+id/ListView02"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="10"android:background="#FF00FF00"/></LinearLayout>

You had "wrap_parent" as the height of the second element. If it wasn't being filled properly it would have the height of 0 - I've changed it to match parent. I've also added a system for using "percentage" filling.

Also, all other "fill_parent" tags I've changed to "match_parent" - not because it changes the functionality of the code but because "fill_parent" is deprecated because as a label it is misleading.

Also, I've added a background to the elements which will more helpfully debug where your problem is.

I would also suggest that what you should be aiming for is infact one View (NOT a ListView even though I have kept it for this example) which would be placed above the other (Just as the Apple search has their alphabet):

<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><ListViewandroid:id="@+id/ListView01"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#FFFF0000"/><!-- Since the contents of the view don't change it seems wasteful to create this as a listview --><ListViewandroid:id="@+id/ListView02"android:layout_width="20dp"android:layout_height="match_parent"android:background="#FF00FF00"android:layout_alignParentRight="true"android:layout_marginRight="5dp"/></RelativeLayout>

Solution 3:

Found a work around now use a textview and a listview nested in a framelayout like this:

<FrameLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent"><LinearLayoutandroid:orientation="vertical"android:layout_width="fill_parent"android:layout_height="fill_parent"><ListViewandroid:id="@+id/ListView01"android:layout_width="fill_parent"android:layout_height="fill_parent"android:cacheColorHint="#00000000" /><TextViewandroid:id="@android:id/empty"android:layout_width="fill_parent"android:layout_height="fill_parent"android:text="textview" /></LinearLayout><LinearLayoutandroid:orientation="vertical"android:background="@android:color/transparent"android:id="@+id/sideIndex"android:paddingLeft="280dip"android:layout_width="300dip"android:layout_height="fill_parent"android:gravity="center_horizontal"><TextViewandroid:text="T"android:id="@+id/textView1"android:layout_width="wrap_content"android:layout_height="wrap_content"></TextView></LinearLayout></FrameLayout>

More can be found out here http://dotslasha.in/wp/143/creating-floating-views-in-android . Ty and Cheers !! :)

Solution 4:

You don't need to implement this yourself, Google has helpfully given you API to use their search functionality.

The documentation on the subject should be enough to get you from start to finish. It's available here: http://developer.android.com/guide/topics/search/search-dialog.html

Solution 5:

In the second ListView you have got one big padding: android:paddingLeft="282dp". I assume you are not coding for tablets in landscape only, so just remove the padding-attribute.