Custom ListView with Android
Custom Listview is diffrent from SImple Listview in terms of complexity.
Like simple Listview, custom ListView also uses Adapter to insert data from data source like as string array, array,
database etc.
Now in this tutorail you will learn about how to customize list view with an image and text with title and its subtitle.
So lets start from creating a project first,Open Android Studio,
select File > New > New Project. Put name your project CustomListView.
Application Name : CustomListView
Project Name : CustomListView
Package Name : com.stacklearning.Customlistview
Open layout file :
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.stacklearning.customlistview.MainActivity">
<ListView android:id="@+id/list" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="50dp">
</ListView>
</RelativeLayout>
Open your MainActivity.java and paste the following code.
package com.stacklearning.customlistview;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
ListView list;
String[] maintitle ={
"JellyBean","KitKat",
"Lollipop","Marshmallow",
"Nougat",
};
String[] subtitle ={
"Sub Title 1","Sub Title 2",
"Sub Title 3","Sub Title 4",
"Sub Title 5",
};
Integer[] imgid={
R.drawable.jellybean,R.drawable.kitkat,
R.drawable.lollipop,R.drawable.marshmallow,
R.drawable.nougat,
};
@Override protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
MyListAdapter adapter=new MyListAdapter(this, maintitle, subtitle,imgid);
list=(ListView)findViewById(R.id.list);
list.setAdapter(adapter);
list.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
// TODO Auto-generated method stub if(position == 0) {
//code specific to first list item Toast.makeText(getApplicationContext(),"JellyBean",Toast.LENGTH_SHORT).show();
}
else if(position == 1) {
//code specific to 2nd list item Toast.makeText(getApplicationContext(),"KitKat",Toast.LENGTH_SHORT).show();
}
else if(position == 2) {
Toast.makeText(getApplicationContext(),"Lollipop",Toast.LENGTH_SHORT).show();
}
else if(position == 3) {
Toast.makeText(getApplicationContext(),"Marshmallow",Toast.LENGTH_SHORT).show();
}
else if(position == 4) {
Toast.makeText(getApplicationContext(),"Nougat",Toast.LENGTH_SHORT).show();
}
}
});
}
}
Create an additional mylist.xml file in layout folder which contains view components displayed in listview.
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="match_parent">
<ImageView android:id="@+id/icon" android:layout_width="60dp" android:layout_height="60dp" android:padding="5dp" />
<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical">
<TextView android:id="@+id/title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Medium Text" android:textStyle="bold" android:textAppearance="?android:attr/textAppearanceMedium" android:layout_marginLeft="10dp" android:layout_marginTop="5dp" android:padding="2dp" android:textColor="#4d4d4d" />
<TextView android:id="@+id/subtitle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView" android:layout_marginLeft="10dp"/>
</LinearLayout>
</LinearLayout>
Create another java class MyListAdapter.java which extends ArrayAdapter class. This class customizes our listview.
package com.stacklearning.customlistview;
import android.app.Activity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;
/** * Created by vspl on 6/3/18. */
public class MyListAdapter extends ArrayAdapter<String> {
private final Activity context;
private final String[] maintitle;
private final String[] subtitle;
private final Integer[] imgid;
public MyListAdapter(Activity context, String[] maintitle,String[] subtitle, Integer[] imgid) {
super(context, R.layout.mylist, maintitle);
// TODO Auto-generated constructor stub
this.context=context;
this.maintitle=maintitle;
this.subtitle=subtitle;
this.imgid=imgid;
}
public View getView(int position, View view, ViewGroup parent) {
LayoutInflater inflater=context.getLayoutInflater();
View rowView=inflater.inflate(R.layout.mylist, null,true);
TextView titleText = (TextView) rowView.findViewById(R.id.title);
ImageView imageView = (ImageView) rowView.findViewById(R.id.icon);
TextView subtitleText = (TextView) rowView.findViewById(R.id.subtitle);
titleText.setText(maintitle[position]);
imageView.setImageResource(imgid[position]);
subtitleText.setText(subtitle[position]);
return rowView;
};
}
OutPut:
DOWNLOAD CODE
