CODEWITHSUNDEEP
androidandroid-layoutandroid-listviewandroid-arrayadapter
GAMA
GAMA

Reputation: 5996

Dynamically adding custom row to listview

By referring this, I created following:

main.xml

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

    <Button
        android:id="@+id/addBtn"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:onClick="addItems"
        android:text="Add New Item" />

    <ListView
        android:id="@+id/list"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:drawSelectorOnTop="false" />

</LinearLayout>

MainActivity.java

public class MainActivity extends Activity {
    ListView list;   
    ArrayList<String> listItems = new ArrayList<String>();    
    ArrayAdapter<String> adapter;   
    int clickCounter = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        list = (ListView) findViewById(R.id.list);
        adapter = new ArrayAdapter<String>(this,
                android.R.layout.simple_list_item_1, listItems);
        list.setAdapter(adapter);

        list.setOnItemClickListener(new android.widget.AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view,
                    int position, long id) {
                String item = list.getItemAtPosition(position).toString();
                Log.i("MainActivity", "Selected = " + item);
            }
        });
    }

    public void addItems(View v) {
        listItems.add("Clicked : " + clickCounter++);
        adapter.notifyDataSetChanged();
    }
}

And it's working perfectly. But as per requirements, my each listview row won't just be a single string. Instead, it'll be collection of views consisting of imageview and textviews stored in row.xml.

Now my queries are:

Any help appreciated.

Upvotes: 5

Views: 17203

Answers (3)

Paresh Mayani
Paresh Mayani

Reputation: 128428

But as per requirements, my each listview row won't just be a single string. Instead, it'll be collection of views consisting of imageview and textviews stored in row.xml.

=> The ListView you are displaying is using normal adapter. If you want your item contains multiple views like Imageview, Textview or any view, then you have to define Custom adapter class by extending either BaseAdapter or ArrayAdapter.

What will replace adapter = new ArrayAdapter(this,android.R.layout.simple_list_item_1, listItems); ? Will it be adapter = new ArrayAdapter(this,R.layout.row, listItems); ??

=> Here ArrayAdapter will not work because your row xml layout may contains different views like ImageView, TextView, Button or any other widget. So I would suggest you to define your own adapter class where you have to override getView() method.

How do I refer to imageview and textviews of each row? How do I set and get data from them? How do I recognize their click events?

=> As I said above, once you define custom adapter class, you will have to override getView() method where you can find any views of your row xml layout file, reference it and set/display whatever data you want.

Is use of Adapter must? or can I get away with it?

=> Yes its must, without adapter you won't be able to display in data-binded widgets like GridView, ListView, Spinner, Gallery, etc.

Example for defining custom adapter:

  1. My talk on ListView
  2. http://www.vogella.com/articles/AndroidListView/article.html

Upvotes: 4

Shakti Malik
Shakti Malik

Reputation: 2407

Here is code from my project

Consider your list have two text field and one ImageView as following "row.xml" file. Copy this to your res folder

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

    <TextView
        android:id="@+id/row_q"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:text="Solve[{x^2==4,x+y^2==6},{x,y}]"
        android:textAppearance="@android:style/TextAppearance.Small"
        android:textStyle="bold|italic" />

<TextView
    android:id="@+id/row_a"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/AliceBlue"
    android:gravity="center_vertical"
    android:paddingLeft="10dp"
    android:textAppearance="@android:style/TextAppearance.Small" />

<ImageView
    android:id="@+id/row_a_math"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true"
    android:scaleType="fitXY"/>

<LinearLayout
android:id="@+id/graph_layout"
android:layout_width="match_parent"
android:layout_height="200dp"
android:visibility="gone" >        
</LinearLayout>

Create following class in your activity to store this data 

private class QuesSolnInfo { 
    public String ques; 
    public String ans; 
    public Bitmap ans_b; 

    public QuesSolnInfo(String ques, String ans, Bitmap ans_b) { 
        this.ques = ques;  
        this.ans = ans; 
        this.ans_b = ans_b; 
    } 
}

//Make following as class members 

OutputStringArrayAdapter _outputArrayAdapter = null; 
ArrayList<QuesSolnInfo> _outputArrayList = null;

//Initialize them in onCreate Method 

_outputArrayAdapter = new OutputStringArrayAdapter(getActivity(), _outputArrayList); 
_outputListView.setAdapter(_outputArrayAdapter);

Definitition of ArrayAdapter 

 protected class OutputStringArrayAdapter extends ArrayAdapter<QuesSolnInfo> { 
    OutputStringArrayAdapter(Context context, ArrayList<QuesSolnInfo> stringArrayList) { 
        super(context, R.layout.list, stringArrayList); 
    } 

    public View getView(int position, View convertView, ViewGroup parent) { 
        if (convertView == null) { 
            convertView = LayoutInflater.from(getContext()).inflate(R.layout.row, null); 
        } 

        TextView t_ques = (TextView) convertView.findViewById(R.id.row_q); 
        t_ques.setText(getItem(position).ques); 

        boolean debug = true; 
        TextView t_ans = (TextView) convertView.findViewById(R.id.row_a); 

        String texx = getItem(position).ans;
        t_ans.setText(texx);       

        final ImageView w = (ImageView) convertView.findViewById(R.id.row_a_math); 
        w.setImageBitmap(getItem(position).ans_b); 
        // Show answer in webview               
        return convertView; 
    }        
}

Now to add any element to your list do following 

_outputArrayList.add(0, new QuesSolnInfo(string1.string2, bitmap0)); 
_outputArrayAdapter.notifyDataSetChanged();

Upvotes: 1

jfs
jfs

Reputation: 16768

These are the basic steps:

  • Create a custom layout for your row (maybe with an ImageView and TextView in it). You used android.R.layout.simple_list_item_1 in your example which if you look into the Android source is just a layout with a single TextView.
  • Create a class that extends BaseAdapter. This will be your list adapter. You can pass the data to your adapter through the constructor or a method. Create a field where you will store the data.

Now to answer your questions:

  • How do I refer to imageview and textviews of each row?
  • How do I set and get data from them?
  • How do I recognize their click events?

When you extend BaseAdapter you will implement the method public View getView (int position, View convertView, ViewGroup parent). In this method you have to inflate your custom row layout to create the view. Then find the ImageView and TextView using the findViewById method. When you have the ImageView and TextView you call setText or setImageSource to set your data and setOnClickListener for the click events.

Upvotes: 1

Related Questions