Question

I am working on the android project in which I need to draw a UI something like below. I need to divide the android screen in two half. In the Top Half I need to show the google maps. And in the Bottom Half I need to show the user information as soon as anyone clicked on the Google Maps. Top Half part is done and its working for me.

Problem Statement:-

I need to dynamically keep on creating the linear layout in the bottom half part depending on how many markers(users) are there on the maps. Below is the screen shot in which I have created two layouts in the bottom half part considering two user's are there on the google maps. But how can I make this thing to work dynamically, suppose if I have three user's on the google maps currently, then in the bottom half part three layout will get plotted automatically. I hope I am clear enough.

Answer 1

Yes you can do use a listview and create custom adapter. set your map as header in listview and use your listview rows for data representation.

Another thing which you can do is create listview and maps seperate. Align your listview just below to the map

Here i am giving you a simple example the code below will create listview. You may need to I have created custom adapter for your purpose.

public class my_map_activity extends Activity {

    ArrayList<String> name = null;
    ArrayList<String> gender = null;
    ArrayList<String> latitude = null;
    ArrayList<String> longitude = null;
    Context activity_context = null;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        ListView user_listview = (ListView) findViewById(R.id.user_listview);

        name = new ArrayList<String>();
        gender = new ArrayList<String>();
        latitude = new ArrayList<String>();
        longitude = new ArrayList<String>();

        for (int i = 0; i < 10; i++) {
            name.add ("test user " + i);
            gender.add ("Male");
            latitude.add (""+ i);
            longitude.add (""+ i);
        }

        custom_adapter list_adapter = new custom_adapter (this, android.R.layout.simple_list_item_1, name, gender, latitude, longitude);
        user_listview.setAdapter(list_adapter);
    }
}

Here is my main.xml file. Which will tell you how to create that layout. I am using Relative layout as my parent layout.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/RelativeLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >




    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="250dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:src="@drawable/ic_launcher" />

    <ListView
        android:id="@+id/user_listview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/imageView1" >
    </ListView>

</RelativeLayout>

here i am posting you my custom adapter code which you can use for your listview purpose.

public class custom_adapter extends ArrayAdapter<String>{

    ArrayList<String> name = null;
    ArrayList<String> gender = null;
    ArrayList<String> latitude = null;
    ArrayList<String> longitude = null;
    Context activity_context = null;

    public custom_adapter(Context context,
                          int resource,
                          ArrayList<String> name ,
                          ArrayList<String> gender,
                          ArrayList<String> latitude,
                          ArrayList<String> longitude) {
        super(context, resource, name );
        this.name = name;
        this.gender = gender;
        this.latitude = latitude;
        this.longitude = longitude;
        activity_context = context;
    }


    static class ViewHolder
    {
        public TextView txt_name;
        public TextView txt_gender;
        public TextView txt_latitude;
        public TextView txt_longitude;
        public ImageView img_view;
    }


    @Override
    public View getView (final int position,
                         View      convertView,
                         ViewGroup parent)
    {
        View rowView = convertView;
        ViewHolder holder = null;

        if (rowView == null) {
            LayoutInflater inflater = (LayoutInflater)activity_context.getSystemService(
                                               Context.LAYOUT_INFLATER_SERVICE);
            rowView = inflater.inflate(R.layout.row_file, null, false);
            holder = new ViewHolder();
            holder.txt_name = (TextView) rowView.findViewById(R.id.textView1);
            holder.txt_gender = (TextView) rowView.findViewById(R.id.textView2);
            holder.txt_latitude = (TextView) rowView.findViewById(R.id.textView3);
            holder.txt_longitude = (TextView) rowView.findViewById(R.id.textView4);
            holder.img_view = (ImageView) rowView.findViewById(R.id.imageView1);
            rowView.setTag(holder);

        } else {
            holder = (ViewHolder) rowView.getTag();
        }

        if (holder != null) {
            holder.txt_name.setText(name.get(position));
            holder.txt_gender.setText(gender.get(position));
            holder.txt_latitude.setText(latitude.get(position));
            holder.txt_longitude.setText(longitude.get(position));
        }
        return rowView;
    }
}

Here is the layout which you can inflate in your custom adapter and set it on listview.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/RelativeLayout1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:src="@drawable/ic_launcher" android:layout_marginTop="10dp" android:layout_marginLeft="10dp" android:contentDescription="TODO"/>


    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@+id/imageView1"
        android:text="Medium Text"
        android:textAppearance="?android:attr/textAppearanceMedium" />


    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/textView1"
        android:layout_toRightOf="@+id/imageView1"
        android:text="Medium Text"
        android:textAppearance="?android:attr/textAppearanceMedium" />


    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView2"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/textView2"
        android:text="Medium Text"
        android:textAppearance="?android:attr/textAppearanceMedium" />


    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView3"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/textView3"
        android:text="Medium Text"
        android:textAppearance="?android:attr/textAppearanceMedium" />

</RelativeLayout>

So i have given you all four files. Here i am explaining what every file will do.

1. my_map_activity : This is the main activity which contains listivew and map both. I am using a big imageview. Instead of that imageview you can place your map.

2. main.xml : This is layout file which contains both listview and map.

3. custom_adapter : This is the custom adapter which i have created for you. I am extending array adapter. In this i am taking data from arraylist and inflating the row layout and the i am setting respective values.

4. row_layout : This is the row layout which will contain imageview for user, name, gender and all other thing.

So i have created several things for you if you need any help then you can ask and try to get the concept of each file how i am using.