Showing graphical instead of strings in an imagelist with title

Question

At the moment I am getting items out of my database and add them to a string called result which I return and set to my TextView:

protected void onCreate(Bundle savedInstanceState) {
    // TODO Auto-generated method stub
    super.onCreate(savedInstanceState);
    setContentView(R.layout.level);
    loadDataBase();

    int level = Integer.parseInt(getIntent().getExtras().getString("level"));

    questions = new ArrayList<Question>();
    questions = myDbHelper.getQuestionsLevel(level);

    tvQuestion = (TextView) findViewById(R.id.tvQuestion);

    i = 0;
        String data = getAllItems();
        tvQuestion.setText(data);
}
private String getAllItems() {
    result = "";

    for (i = 0; i<9; i++){
        result = result + questions.get(i).getQuestion() + "\n";
    }

    return result;
    // TODO Auto-generated method stub

}

The thing is, all these items also have a title(string) and graphical thumb (string) in the database. I would like to show them as illustrated in the picture below, each with an onclicklistener on it, instead of a boring list of items below eachother. Each item has a picture and title. Since my beginning programming skills, I am wondering how to do this best, and if you know any good tutorials on it which explain it well? Thanks!

Answer 1

if i understood your question you need to create a customize an adapter.

Create a new simple class like this which holds an string and a picture

    Class ObjectHolder {
      int Image;
      String Title;
    }

and create a getter and setter for this two

then create custom ArrayAdapter

    Class CustomArrayAdapter extends ArrayAdapter<ObjectHolder> {


      public CustomArrayAdapter(Context C, ObjectHolder[] Arr) {
        super(C, R.layout.caa_xml, Arr);
      }

    @Override
    public View getView(int position, View v, ViewGroup parent)
    {
    View mView = v ;
    if(mView == null){
        LayoutInflater vi = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        mView = vi.inflate(R.layout.cpa_xml, null);
    }
    TextView text = (TextView) mView.findViewById(R.id.tv_caarow);
    ImageView image = (ImageView) mView.findViewById(R.id.iv_caarow);
    if(mView != null )
    {   text.setText(getItem(position).getText());
        image.setImageResource(getItem(position).getImage());
    return mView;
    }
    }

and create caa_xml.xml in res\layout\

   <?xml version="1.0" encoding="utf-8"?>
   <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content" >
     <ImageView
       android:id="@+id/iv_caarow"
       android:src="@drawable/icon"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />
     <TextView
       android:id="@+id/tv_caarow"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:paddingBottom="15dip"
       android:layout_BottomOf="@+id/iv_caarow" />
   </RelativeLayout>

and use it like this.

   GridView GV= (GridView) findViewById(R.Id.gv); // reference to xml or create in java
   ObjectHolder[] OHA;
   // assign your array, any ways!
   mAdapter CustomArrayAdapter= CustomArrayAdapter(this, OHA);
   GridView.setAdapter(mAdapter);