CODEWITHSUNDEEP
androidandroid-layout
Ashwin
Ashwin

Reputation: 1230

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 by side like in this code

import java.util.ArrayList;
import java.util.List;
import java.util.WeakHashMap;
import android.app.Activity;
import android.content.Intent;
import android.database.Cursor;
import android.database.sqlite.SQLiteDatabase;
import android.database.sqlite.SQLiteException;
import android.os.Bundle;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.AdapterView.OnItemClickListener;



public class Emp extends Activity {

    /** Called when the activity is first created. */

    private String tableName = DBHelper.tableName;

    private SQLiteDatabase newDB;


public static WeakHashMap<String, Empbook> temp = new WeakHashMap<String, Empbook>();

final List<Empbook> listOfEmpbook = new ArrayList<Empbook>();
final List<String> listOfAlphabets = new ArrayList<String>();
TextView txt;
EmpbookAdapter adapter = new EmpbookAdapter(this, listOfEmpbook);

Integer pos;
Integer count=0;

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    txt=(TextView)findViewById(R.id.textView1);
    ListView list = (ListView) findViewById(R.id.ListView01);
    ListView alist = (ListView) findViewById(R.id.ListView02);

    list.setClickable(true);
    alist.setClickable(true);
    AlphabetListAdapter alphabetadapter = new AlphabetListAdapter(this,
            listOfAlphabets);
    list.setAdapter(adapter);
            alist.setAdapter(alphabetadapter);

the alphabetadapter is for the list displaying alphabets on the right in the screen. My XML is as follows:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <TextView android:text="TextView" android:id="@+id/textView1"
        android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
    <ListView android:id="@+id/ListView01" android:layout_width="280dp"
        android:orientation="vertical" android:layout_height="wrap_content"></ListView>
    <ListView android:id="@+id/ListView02" android:layout_width="wrap_content"
        android:orientation="vertical" android:paddingLeft="282dp"
        android:layout_height="wrap_content"></ListView>
</LinearLayout>

The problem that's occurring is that only one view at a time(the one which is put earlier in the above xml is displayed while the other just doesn't appear).

Can someone please push me in the right direction?

EDIT: I tried to set the weights of the lists setting one to zero and setting the other to 1,it works partially now i can see both lists however one of the list isn't getting populated....will update if i work it out.

Posted an answer below (One listview dropped though.) Check it out.

Upvotes: 1

Views: 2051

Answers (6)

Moog
Moog

Reputation: 10193

Remove the text view which is the first element (you can replace this by using addHeaderView() or wrapping this linearlayout onside a vertical one).

Look carefully at how the width and height are set in the following code:

   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="horizontal" android:layout_width="match_parent"
        android:layout_height="match_parent">
        <ListView
          android:id="@+id/ListView01"
          android:orientation="vertical"
          android:layout_width="wrap_content"
          android:layout_height="match_parent"
          android:layout_weight="1"
        ></ListView>
        <ListView
          android:id="@+id/ListView02"
          android:orientation="vertical"
          android:layout_width="wrap_content"
          android:layout_height="match_parent"
          android:layout_weight="0"
        ></ListView>
    </LinearLayout>

In my experience, the weight will only work properly if the width is set to wrap_content.

Upvotes: 0

Ashwin
Ashwin

Reputation: 1230

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

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" android:layout_height="fill_parent">
    <LinearLayout android:orientation="vertical"
        android:layout_width="fill_parent" android:layout_height="fill_parent">

        <ListView android:id="@+id/ListView01" android:layout_width="fill_parent"
            android:layout_height="fill_parent" android:cacheColorHint="#00000000" />
        <TextView android:id="@android:id/empty"
            android:layout_width="fill_parent" android:layout_height="fill_parent"
            android:text="textview" />

    </LinearLayout>

    <LinearLayout android: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">
        <TextView android: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 !! :)

Upvotes: 1

Graeme
Graeme

Reputation: 25864

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" 
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ListView
      android:id="@+id/ListView01"
      android:layout_width="0dp"
      android:layout_height="match_parent"
      android:layout_weight="90"
      android:background="#FFFF0000"/>    
    <ListView
      android: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):

<RelativeLayout  xmlns:android="http://schemas.android.com/apk/res/android"                 
                android:layout_width="match_parent"
                android:layout_height="match_parent">
    <ListView android: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 -->
    <ListView android:id="@+id/ListView02"
              android:layout_width="20dp"
              android:layout_height="match_parent"
              android:background="#FF00FF00"
              android:layout_alignParentRight="true"
              android:layout_marginRight="5dp"/>
</RelativeLayout>

Upvotes: 1

Shane Oliver
Shane Oliver

Reputation: 942

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

Upvotes: 1

wurzelgemuese
wurzelgemuese

Reputation: 113

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.

Upvotes: 0

Graeme
Graeme

Reputation: 25864

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

Upvotes: 0

Related Questions