Tuesday, November 2, 2010

Customized ListView example android

Here is an example that will demonstrates you to create a customized listview using base-adapter.

1. Take a main class named 'settings'

like shown below.


import android.app.Activity;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.view.ViewGroup.MarginLayoutParams;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.TextView;

public class settings extends Activity{

ListView telnetlist;
TextView mytitletext;

public void onCreate(Bundle saved) {



super.onCreate(saved);


// Listview for showing telnet list
telnetlist=new ListView(this);
telnetlist.setVerticalScrollBarEnabled(false);
telnetlist.setScrollBarStyle(0);


LinearLayout.LayoutParams mLayParams=new LinearLayout.LayoutParams(MarginLayoutParams.FILL_PARENT,MarginLayoutParams.FILL_PARENT);
telnetlist.setLayoutParams(mLayParams);
telnetlist.setDivider(dividerD);
telnetlist.setDividerHeight(40);

telnetlist.setAdapter(new Settingsadapter(this));
telnetlist.setScrollingCacheEnabled(false);



setContentView(telnetlist);
}
}

2. create another class named 'Settingsadapter' which extends BaseAdapter like shown below.

package com.Tunneling;

import java.util.ArrayList;

import android.content.Context;
import android.graphics.Color;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.TextView;

public class Settingsadapter extends BaseAdapter{

private LayoutInflater mInflater;
ArrayList leftside=new ArrayList();
ArrayList leftbotttom=new ArrayList();
ArrayList teamcolor=new ArrayList();


// Displaying settings screen
public Settingsadapter(Context context) {
// Cache the LayoutInflate to avoid asking for a new one each time.
mInflater = LayoutInflater.from(context);


leftside.add("Hostname");
leftside.add("Username");
//leftside.add("Local Directory");

leftbotttom.add("Port");
leftbotttom.add("Password");
//leftbotttom.add("");

teamcolor.add(Color.WHITE);
teamcolor.add(Color.GRAY);
teamcolor.add(Color.WHITE);


}



public int getCount() {
return leftside.size();
}


public Object getItem(int position) {
return position;
}


public long getItemId(int position) {
return position;
}

@Override
public View getView(final int position, View convertView, ViewGroup parent) {
final ViewHolder holder;


if (convertView == null) {
convertView = mInflater.inflate(R.layout.telnetsettings, null);

holder = new ViewHolder();
holder.line = (ImageView) convertView.findViewById(R.id.line);

holder.hostname = (TextView) convertView.findViewById(R.id.hostname);
holder.hostaddress = (EditText) convertView.findViewById(R.id.hostaddress);
holder.port = (TextView) convertView.findViewById(R.id.port);
holder.portno = (EditText) convertView.findViewById(R.id.portno);


convertView.setTag(holder);
} else {

holder = (ViewHolder) convertView.getTag();
}



holder.hostname.setText(leftside.get(position));

holder.port.setText(leftbotttom.get(position));




return convertView;
}

class ViewHolder {
ImageView line;
TextView hostname,port;
EditText hostaddress,portno;


}
}

3. And here is xml used for customized layout



android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/settingslist"
android:background="@drawable/settingsbackground"
android:layout_marginTop="30dp"
>
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/hostname"
android:textSize="15dp"
android:paddingTop="10dp"
android:paddingLeft="10dp"
android:textColor="#000000"
android:textStyle="bold"
>

android:layout_width="130dp"
android:layout_height="@dimen/edittextheight"
android:id="@+id/hostaddress"
android:textSize="15dp"
android:paddingTop="12dp"
android:textStyle="bold"
android:layout_marginLeft="110dp"
android:textColor="#000000"
android:layout_marginTop="5dp"
>


android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingTop="10dp"
android:src="@drawable/line"
android:id="@+id/line"
android:text="image"
android:layout_marginLeft="10dp"
android:layout_below="@id/hostname"
>
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/port"
android:textSize="15dp"
android:paddingTop="10dp"
android:paddingLeft="10dp"
android:textColor="#000000"
android:layout_below="@id/line"
android:textStyle="bold"
>

android:layout_width="130dp"
android:layout_height="@dimen/edittextheight"
android:id="@+id/portno"
android:textSize="15dp"
android:paddingTop="10dp"
android:textColor="#000000"
android:layout_below="@id/line"
android:layout_marginLeft="110dp"
android:textStyle="bold"

>




above replace dimen with value 40dp.


This will end up in creating an customized listview.


Thanks