What we will do ?
-> We will prepare a custom list with icon and sub-item included with original item in a list.
Step 1 : Create a New Application. Click on File->New->Android Application Project.
Step 2 : Give a name to your application as CustomListdemo and package name as com.mia.customlistdemo.
Click Next continuously and then click Finish.
Step 3 : Drag a ListView in the activity_main.xml from Palette->Composite.
activity_main.xml
Step 4 : Create a new Android XML File in layout. Right-click on layout->New->Android XML File
activity_item.xml
Step 5 : The code for MainActivity.java from src->com.mia.customlistdemo is shown below.
MainActivity.java
Step 6 : Run the Project.
Explanation from activity_item.xml :
-> We will prepare a custom list with icon and sub-item included with original item in a list.
Step 1 : Create a New Application. Click on File->New->Android Application Project.
Step 2 : Give a name to your application as CustomListdemo and package name as com.mia.customlistdemo.
Step 3 : Drag a ListView in the activity_main.xml from Palette->Composite.
<?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"> <EditText android:id="@+id/searchBox" android:layout_width="fill_parent" android:layout_height="wrap_content" android:hint="SEARCH CAR" android:layout_margin="5dp" android:padding="10dp" /> <ListView android:id="@android:id/list" android:layout_width="fill_parent" android:layout_height="0dp" android:layout_weight="1"/> </LinearLayout>
Step 4 : Create a new Android XML File in layout. Right-click on layout->New->Android XML File
Give name as activity_item and click Finish.
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:id="@+id/photo" android:layout_width="55dp" android:layout_height="70dp" android:layout_margin="3dp" android:layout_alignParentLeft="true" android:scaleType="fitXY"/> <TextView android:id="@+id/name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@id/photo" android:textStyle="bold" android:layout_marginTop="5dp" android:textSize="18sp"/> <TextView android:id="@+id/team" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@id/photo" android:layout_below="@id/name" android:textColor="#0000FF" android:layout_marginBottom="5dp"/> </RelativeLayout>
Step 5 : The code for MainActivity.java from src->com.mia.customlistdemo is shown below.
MainActivity.java
package com.mia.customlistdemo;
import java.util.ArrayList;
import java.util.HashMap;
import android.app.ListActivity;
import android.content.Context;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;
public class MainActivity extends ListActivity {
//ArrayList thats going to hold the search results
ArrayList<HashMap<String, Object>> searchResults;
//ArrayList that will hold the original Data
ArrayList<HashMap<String, Object>> originalValues;
LayoutInflater inflater;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final EditText searchBox=(EditText) findViewById(R.id.searchBox);
ListView playersListView=(ListView) findViewById(android.R.id.list);
//get the LayoutInflater for inflating the customomView
//this will be used in the custom adapter
inflater=(LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
//these arrays are just the data that
//I'll be using to populate the ArrayList
//You can use our own methods to get the data
String names[]={"FIESTA","XJ","BOXSTER"};
String teams[]={"Ford","Jaguar","Porsche"};
Integer[] photos={R.drawable.picford,R.drawable.picjaguar,R.drawable.picporsche};
originalValues=new ArrayList<HashMap<String,Object>>();
//temporary HashMap for populating the
//Items in the ListView
HashMap<String , Object> temp;
//total number of rows in the ListView
int noOfPlayers=names.length;
//now populate the ArrayList players
for(int i=0;i<noOfPlayers;i++)
{
temp=new HashMap<String, Object>();
temp.put("name", names[i]);
temp.put("team", teams[i]);
temp.put("photo", photos[i]);
//add the row to the ArrayList
originalValues.add(temp);
}
//searchResults=OriginalValues initially
searchResults=new ArrayList<HashMap<String,Object>>(originalValues);
//create the adapter
//first param-the context
//second param-the id of the layout file
//you will be using to fill a row
//third param-the set of values that
//will populate the ListView
final CustomAdapter adapter=new CustomAdapter(this, R.layout.activity_item,searchResults);
//finally,set the adapter to the default ListView
playersListView.setAdapter(adapter);
searchBox.addTextChangedListener(new TextWatcher() {
public void onTextChanged(CharSequence s, int start, int before, int count) {
//get the text in the EditText
String searchString=searchBox.getText().toString();
int textLength=searchString.length();
searchResults.clear();
for(int i=0;i<originalValues.size();i++)
{
String playerName=originalValues.get(i).get("name").toString();
if(textLength<=playerName.length()){
//compare the String in EditText with Names in the ArrayList
if(searchString.equalsIgnoreCase(playerName.substring(0,textLength)))
searchResults.add(originalValues.get(i));
}}
adapter.notifyDataSetChanged();
}
public void beforeTextChanged(CharSequence s, int start, int count,
int after) {}
public void afterTextChanged(Editable s) {}
});
}
//define your custom adapter
private class CustomAdapter extends ArrayAdapter<HashMap<String, Object>>
{
public CustomAdapter(Context context, int textViewResourceId,
ArrayList<HashMap<String, Object>> Strings) {
//let android do the initializing :)
super(context, textViewResourceId, Strings);
}
//class for caching the views in a row
private class ViewHolder
{
ImageView photo;
TextView name,team;
}
ViewHolder viewHolder;
@Override
public View getView(int position, View convertView, ViewGroup parent) {
if(convertView==null)
{
convertView=inflater.inflate(R.layout.activity_item, null);
viewHolder=new ViewHolder();
//cache the views
viewHolder.photo=(ImageView) convertView.findViewById(R.id.photo);
viewHolder.name=(TextView) convertView.findViewById(R.id.name);
viewHolder.team=(TextView) convertView.findViewById(R.id.team);
//link the cached views to the convertview
convertView.setTag(viewHolder);
}
else
viewHolder=(ViewHolder) convertView.getTag();
int photoId=(Integer) searchResults.get(position).get("photo");
//set the data to be displayed
viewHolder.photo.setImageDrawable(getResources().getDrawable(photoId));
viewHolder.name.setText(searchResults.get(position).get("name").toString());
viewHolder.team.setText(searchResults.get(position).get("team").toString());
//return the view to be displayed
return convertView;
}
}
protected void onListItemClick(ListView l, View v, int position, long id) {
// TODO Auto-generated method stub
super.onListItemClick(l, v, position, id);
String str = searchResults.get(position).get("name").toString();
try{
if(str=="XJ"){
Toast.makeText(getApplicationContext(), "XJ\nJAGUAR", Toast.LENGTH_SHORT).show();
}
if(str=="FIESTA"){
Toast.makeText(getApplicationContext(), "FIESTA\nFORD", Toast.LENGTH_SHORT).show();
}
if(str=="BOXSTER"){
Toast.makeText(getApplicationContext(), "BOXSTER\nPORSCHE", Toast.LENGTH_SHORT).show();
}
}
catch(Exception e){
e.printStackTrace();
}
}
}
Step 6 : Run the Project.
Explanation of the code :
Explanation from activity_main.xml :
- We have a EditText and a ListView one below another simultaneously.The name of EditText is searchBox and name of ListView is list. The EditText is used search box.
<EditText android:id="@+id/searchBox" android:layout_width="fill_parent" android:layout_height="wrap_content" android:hint="SEARCH CAR" android:layout_margin="5dp" android:padding="10dp" /> <ListView android:id="@android:id/list" android:layout_width="fill_parent" android:layout_height="0dp" android:layout_weight="1"/>
Explanation from activity_item.xml :
- This activity is layout of a single list element. You can add other items to this activity to extra customize your list.
- Here we have a Relative layout with a ImageView and two TextViews.
- The name of ImageView is photo, name of list-item is name and name of list sub-item is team.
- photo is aligned to left,
- name is aligned to right of photo
- team is aligned to right of photo and below name.
- Explanation from MainActivity.java is commented in its code.
Stay Tuned with Made In Android
