Android Tutorial 1 – Customised List View Adapters

Step 1 Creating your layout for each row in a list-view

listview xml

right click on layout hover over new and choose android XML file

You need an android XML that basically defines the layout of each entry of the list you want you can literally include anything you want an image, text, buttons.  This XML needs the height and width set to wrap content and orientation as horizontal:

listview xml example

If you want to set dividers or shade certain parts of the row in certain colours use linear horizontal layouts.  The above consists of TextView1, ImageView1 and Button1.

Step 2 Creating your custom adapter

java files

right click on the relevant package hover over new and click on class

You then need your own custom list view adapter class to replace the simple cursor adapter you would normally use:

package com.example.helpproject;

import java.util.ArrayList;

import com.example.helpproject.R;

import android.content.Context;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.view.View.OnClickListener;

import android.widget.BaseAdapter;

import android.widget.Button;

import android.widget.TextView;

import android.widget.ImageView; // you wont necessarily need all these imports

public class customList extends BaseAdapter{

ArrayList list//CustData is my very own custom object used to populate each row in the list

LayoutInflater li;   //needed in order to link your android xml layout for the row created above to this BaseAdapter

Context con;

public customList(ArrayList data, Context c) {

// depending on the data you want to show in this list you will more // than likely need to create a custom class, need help with that? // comment below // alternatively you can have a list for each view in the row e.g. String, Bitmap, Integer

list = data; //assign the data to the relevant local variable to use later

con = c;

}

@Override public int getCount() {

// TODO Auto-generated method stub

return list.size(); //basically returns the number of items that are in the in your data

}

@Override public Object getItem(int position) {

// TODO Auto-generated method stub

return list.get(position); // return the item in a specific position in the list

}

@Override public long getItemId(int position) {

// TODO Auto-generated method stub

return position;

}

@Override public View getView(int position, View convertView, ViewGroup parent) {

if(li == null) li = (LayoutInflater) con.getSystemService(Context.LAYOUT_INFLATER_SERVICE); //initialize the inflater if not already done

if(convertView==null) convertView = li.inflate(R.layout.custom_list_view,parent,false); //assign the android xml view to the local variable for the view if it has not already been assigned

// initialize local variables for the xml controls in the android xml you created e.g. textview imageview labels ImageView rowImage;

TextView rowText;

Button rowButton;

// assign the relevant ids to these newly created local controls

rowImage = (ImageView)convertView.findViewById(R.id.imageView1);

rowText = (TextView)convertView.findViewById(R.id.textView1);

rowButton = (Button)convertView.findViewById(R.id.button1);

CustData current = list.get(position); // assign the relevant data from your array as relevant to each control e.g. the image and the text need help? do ask in the comments below

rowImage.setImageBitmap(current.getImage());

rowText.setText(current.getUR());

rowButton.setOnClickListener(new OnClickListener(){

@Override public void onClick(View v) {

// enter code here for when the button is clicked if you wish to refer to a code in the activities main class ask me I have figured out how to do that

}

});

return convertView; // send the item into the list

}

} 3. You then assign the adapter to your listview in a similar fashion to the usual method:

Viewer = (ListView) this.findViewById(R.id.listView1);

customList adapter = new customList(dummy,this);

Viewer.setAdapter(adapter);

Here is the end result:

end example

It is a bit messy but if you take time setting up the XML for the list rows and have real life data it can look like:

wpid-screenshot_2015-06-03-01-07-4601.png.png

There are some things not covered which need to be done in the background.  Your Array-lists need to be populated one way or another and if you want to create a custom class so all you need to use is one list in your list-view adapter class you need to create that too.  If you don’t know how to do this or need help ask in the comments and I will definitely try and help. I hope you find my first tutorial ever, yes ever (do praise my excellence :D). Please comment below on the structure and the content.  I want this to become a regular thing for me but if it doesn’t draw attention I will be less motivated not because I can’t but because it is not helping anyone. Have a great weekend and enjoy the rain.

Advertisements

One thought on “Android Tutorial 1 – Customised List View Adapters

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s