Two ListViews Side by Side in Android

The following XML shows how to place two ListViews side by side, add some seperator views and button bars for any actions needed.
Even though fragment now make the creation and maintenance this type of layout much easier, simple application might benefit from this without having to include the compatibility library.

The result will look like this:

(The layout file is after the break)

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

	<LinearLayout 
		android:id="@+id/main_top_bit"
		android:layout_width="fill_parent" 
		android:layout_height="wrap_content"
		android:orientation="vertical">

		<LinearLayout 
			android:orientation="horizontal"
			android:layout_width="fill_parent" 
			android:layout_height="fill_parent"
			android:background="@color/orange">

			<LinearLayout android:layout_width="wrap_content"
				android:layout_height="wrap_content" android:orientation="horizontal">

				<Button 
					android:id="@+id/button_1" 
					style="@style/landscape_top_button"
					android:text="button1" />
				<Button 
					android:id="@+id/button_2" 
					style="@style/landscape_top_button"
					android:text="button2"/>
			</LinearLayout>


		</LinearLayout>
		<View android:id="@+id/main_horizontal_bar"
			android:layout_height="3dip" android:layout_width="fill_parent"
			android:background="@color/gray" android:layout_marginTop="1dip" />
	</LinearLayout>

	<LinearLayout 
		android:id="@+id/lower_linear_layout"
		android:orientation="horizontal" 
		android:layout_width="fill_parent"
		android:layout_height="fill_parent" 
		android:layout_below="@+id/main_top_bit">

		<RelativeLayout 
			android:layout_below="@+id/lower_linear_layout"
			xmlns:android="http://schemas.android.com/apk/res/android"
			android:layout_width="150dip" 
			android:layout_height="fill_parent"
			android:layout_alignParentLeft="true">

			<LinearLayout 
				android:layout_width="fill_parent"
				android:layout_height="wrap_content" 
				android:orientation="horizontal"
				android:background="@color/teal"
				android:id="@+id/org_left_linearlayout2">

				<Button 
					android:id="@+id/button_3" 
					style="@style/landscape_top_button"
					android:text="button3"/>
				<Button 
					android:id="@+id/button_4" 
					style="@style/landscape_top_button"
					android:text="button4" />
			</LinearLayout>

			<ListView 
				android:background="@color/green" 
				android:id="@+id/lstLeft" 
				android:layout_width="fill_parent"
				android:layout_height="wrap_content"
				android:layout_below="@+id/org_left_linearlayout2"
				android:layout_above="@+id/org_left_bottom_rl"
				android:cacheColorHint="#00000000"/>

			<RelativeLayout 
				android:id="@+id/org_left_bottom_rl"
				android:layout_width="wrap_content" 
				android:layout_height="wrap_content"
				android:layout_alignParentBottom="true"
				android:background="@color/purple" >

				<Button 
					android:text="button5" 
					android:id="@+id/button_5"
					android:layout_alignParentLeft="true" 
					android:layout_width="fill_parent"
					android:layout_height="wrap_content">
				</Button>
			</RelativeLayout>
		</RelativeLayout>

		<View 
			android:layout_width="3dip" 
			android:layout_height="fill_parent"
			android:background="@color/gray">
		</View>

		<RelativeLayout 
			android:layout_below="@+id/lower_linear_layout"
			xmlns:android="http://schemas.android.com/apk/res/android"
			android:layout_width="fill_parent" 
			android:layout_height="fill_parent"
			
			android:layout_alignParentLeft="true">

			<LinearLayout 
				android:layout_width="fill_parent"
				android:layout_height="wrap_content" 
				android:orientation="horizontal"
				android:background="@color/olive"
				android:id="@+id/org_right_linearlayout2">

				<Button 
					android:id="@+id/button_6" 
					style="@style/landscape_top_button"
					android:text="button6" />
				<Button 
					android:id="@+id/button_7" 
					style="@style/landscape_top_button"
					android:text="button7" />
			</LinearLayout>

			<ListView 
				android:id="@+id/lstRight"
				android:background="@color/blue" 
				android:layout_width="fill_parent"
				android:layout_height="wrap_content"
				android:layout_below="@+id/org_right_linearlayout2"
				android:layout_above="@+id/org_right_bottom_rl"
				android:cacheColorHint="#00000000"/>

			<RelativeLayout 
				android:id="@+id/org_right_bottom_rl"
				android:layout_width="wrap_content" 
				android:layout_height="wrap_content"
				android:background="@color/red"
				android:layout_alignParentBottom="true">

				<Button 
					android:text="button8" 
					android:id="@+id/button_8"
					android:layout_alignParentRight="true" 
					android:layout_width="fill_parent"
					android:layout_height="wrap_content">
				</Button>
			</RelativeLayout>
		</RelativeLayout>
	</LinearLayout>
</LinearLayout>

The trick is that you will need to call the relative functions for each list explicitly. In the following example I am using a standard Activity instead of a ListActivity:

public class MainActivity extends Activity {
	private final String TAG =  this.getClass().getName();
	ListView leftList;
	ListView rightList;
	
	
	 static final String[] FRUITS = new String[] {"Apple", "Bananna", "Cherry", "Pear", "Strawberry"};
	 static final String[] VEGETABLES = new String[] {"Asparagus", "Bamboo shoots", "Celery", "Ginger", "Spinach"};
	 
	@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        leftList = (ListView) findViewById(R.id.lstLeft);
        rightList = (ListView) findViewById(R.id.lstRight);      
        
        populateLeftList();
        populateRightList();
    }
    
	public void populateLeftList(){
		leftList.setAdapter(new ArrayAdapter<string>(this, android.R.layout.simple_list_item_1, FRUITS));  
	}
	
	public void populateRightList(){
		rightList.setAdapter(new ArrayAdapter<string>(this, android.R.layout.simple_list_item_1, VEGETABLES));
	}
}