Apps Displaying a Button and EditBox after a ListView

[Orby]

Hi, i'm new to Android and having a lot of trouble displaying a Button and a EditBox after a Listview. I've attached a sample paint image of what i'm trying to achieve and included my code below.

Any help would be appreciated.

Thanks

My XML File:

<?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:orientation="horizontal"
         	android:layout_width="fill_parent"
         	android:layout_height="fill_parent"
         	android:layout_weight="1">
		<TextView
			android:id="@+id/selection"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:textAppearance="?android:attr/textAppearanceLarge"/>
		<ImageView
			android:id="@+id/icon"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:src="@drawable/icon"/>	
  		</LinearLayout>
  		<LinearLayout
         	android:orientation="vertical"
         	android:layout_width="fill_parent"
         	android:layout_height="fill_parent">
  			<EditText android:id="@+id/edittext"
    			android:layout_width="fill_parent"
    			android:layout_height="wrap_content"
    			android:text="add text"/>      	
        	<Button 
    			android:id="@+id/btn_search"
        		android:layout_width="fill_parent"
        		android:layout_height="wrap_content"
       			android:text="Search"/>
       		</LinearLayout>  
 </LinearLayout>

My Code so far:

public class recipes extends ListActivity {

	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		main_array = getResources().getStringArray(R.array.main_array);
		setListAdapter(new MyCustomAdapter(recipes.this, R.layout.row, main_array));

		}
	
	public void onListItemClick(ListView parent, View v, int position, long id){
		Intent intent = new Intent(v.getContext(), Activity2.class);
		intent.putExtra("selected_item", position);
		intent.putExtra("selected_name", main_array[position]);
		startActivityForResult(intent, 0);		
	}

		
	public class MyCustomAdapter extends ArrayAdapter<String> {

		
		public MyCustomAdapter(Context context, int textViewResourceId, String[] objects) {
			super(context, textViewResourceId, objects);
		}

		@Override
		public View getView(int position, View convertView, ViewGroup parent) {
			LayoutInflater inflater=getLayoutInflater();
			View row = inflater.inflate(R.layout.row, parent, false);
			TextView selection = (TextView)row.findViewById(R.id.selection);
			selection.setText(recipes.main_array[position]);
			ImageView image =(ImageView)row.findViewById(R.id.icon);			
			return row;
		
		}
	}
	}

 

[alostpacket]

If you are doing a search function it's recommended that you use the built in search.

Search | Android Developers

For a footer, you should use a RelativeLayout:

how to create fixed footer in android layout? - Stack Overflow

 

[Orby]

Hi alostpacket, thanks for your response! I tried this and its still overlapping the EditBox and Search Button on List Items. Can you please explain what i need to include in my code to make the Button and EditBox appear after the ListView?

Thanks

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical"
	android:layout_width="fill_parent"
    android:layout_height="fill_parent">
	<LinearLayout
		android:orientation="horizontal"
		android:layout_width="fill_parent"
   		android:layout_height="fill_parent">
		<ImageView
			android:id="@+id/icon"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:src="@drawable/icon"/>	
		<TextView
			android:id="@+id/selection"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:textAppearance="?android:attr/textAppearanceLarge"/>
  	</LinearLayout>
	<LinearLayout
			android:orientation="vertical"
			android:layout_width="fill_parent"
   			android:layout_height="fill_parent">
		<EditText android:id="@+id/edittext"
    		android:layout_width="fill_parent"
    		android:layout_height="wrap_content"
    		android:text="add text"/>      	
       	<Button 
   			android:id="@+id/btn_search"
       		android:layout_width="fill_parent"
       		android:layout_height="wrap_content"
       		android:text="Search"/>	
  	</LinearLayout>
</RelativeLayout>

 

[Boogs]

I think it's recommended that you provide two XML files, one for the layout of the list view and your edit text and button, and another which describes the row of the edit text.

For example:

XML #1 (abbreviated):

<LinearLayout
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:orientation="vertical" >
   <ListView
      android:id="@+id/list"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:layout_weight="1" />
   <TextView
      android:id="@+id/empty"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:layout_weight="1" />
   <EditText
      android:id="@+id/your_edit_text"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content" />
   <Button
      android:id="@+id/your_button"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content" />
</LinearLayout>

This does 2 things: first, it allows the ListActivity to manage your list view (and if it's empty, then it will display whatever text is given in your @id/empty TextView), and secondly, it abstracts the row from the list view. So, you can either A) reuse your XML for another activity, or B) make it easier to read.

Your second XML file which describes the row of each list view item would be something like:

XML #2 (abbreviated):

<LinearLayout
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:orientation="horizontal" >
   <TextView
      android:id="@+id/text"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_weight="1" />
   <ImageView
      android:id="@+id/image"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content" />
</LinearLayout>

Then, in your code, you can do way with the getView() code in your adapter. I recommend using a SimpleAdapter to get the job done:

List<HashMap<String, Object>> data = new ArrayList<HashMap<String, Object>>();

String[] yourStringArray = getResources().getStringArray(R.array.your_array);

for (int i = 0; i < yourStringArray.length; ++i) {
   HashMap<String, Object> map = new HashMap<String, Object>();
   map.put("text", yourStringArray[i]);
   map.put("image", some_link_to_your_image);
   data.put(map);
}

new SimpleAdapter(
   this,
   data,
   R.layout.row,
   new String[] {"text", "image"},
   new int[] {R.id.text, R.id.image});