In this tutorial you will learn about the Android Custom List View and its application with practical example.
Android Custom List View
In our last module we have discussed List View already. Here we are going to discuss about custom List View using Base Adapter. For Custom ListView we have to create Bean class, Adapter class And an Activity.
We have discussed ListView attributes in our last module so we need to do create layout here:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?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" > <ListView android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/listview" android:divider="@color/black" android:dividerHeight="2dp" /> </RelativeLayout> |
Bind this layout with your Activity as like I did at last.
Beans : JavaBeans are classes that encapsulate many objects into a single object. It contains constructor, Getter, Setter Methods. With the help of Setter and Getter method user can set and get data. It also have zero argument constructor. Check out below code for more details.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
package com.example.myapplication; public class ListViewBean { int image; String langName; public ListViewBean() { } public ListViewBean(int image,String langName) { super(); this.image = image; this.langName=langName; } public int getImage() { return image; } public void setImage(int image) { this.image = image; } public String getLangName() { return langName; } public void setLangName(String langName) { this.langName = langName; } } |
Base Adapter: BaseAdapter which extends object and implements ListAdapter and Spinner Adapter. It can be used in ListView, GridView and Spinner. BaseAdapter is very generic adapter which allows you to do pretty much whatever you want . Its custom Adapter from which you can do whatever you want to do with grid and list, But you need to do some coding for it. Check below coding for Base Adapter.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
package com.example.myapplication; import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.ImageView; import android.widget.TextView; import java.util.ArrayList; import java.util.List; public class ListViewBaseAdapter extends BaseAdapter { public ArrayList<ListViewBean> arraylistListener; private List<ListViewBean> mListenerList; Context mContext; public ListViewBaseAdapter(List<ListViewBean> mListenerList, Context context) { mContext = context; this.mListenerList = mListenerList; this.arraylistListener = new ArrayList<ListViewBean>(); this.arraylistListener.addAll(mListenerList); } public class ViewHolder { ImageView mItemPic; TextView mLangName; } @Override public int getCount() { return mListenerList.size(); } @Override public Object getItem(int position) { return mListenerList.get(position); } @Override public long getItemId(int position) { return position; } @Override public View getView(final int position, View view, ViewGroup parent) { final ViewHolder holder; if (view == null) { view = LayoutInflater.from(mContext).inflate(R.layout.layout_lv_adapter, null); holder = new ViewHolder(); holder.mItemPic = (ImageView) view.findViewById(R.id.im_test); holder.mLangName=(TextView)view.findViewById(R.id.tv_langName); view.setTag(holder); } else { holder = (ViewHolder) view.getTag(); } try { int image = mListenerList.get(position).getImage(); holder.mItemPic.setImageResource(image); holder.mLangName.setText(mListenerList.get(position).getLangName()); }catch (Exception ex){ } return view; } } |
Use below xml for the Adapter:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<?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="wrap_content"> <ImageView android:layout_width="80dp" android:layout_height="80dp" android:id="@+id/im_test" android:layout_marginTop="10dp" android:layout_marginLeft="10dp" android:layout_marginBottom="10dp" android:layout_marginRight="10dp" android:src="@drawable/android"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@+id/im_test" android:text="Android" android:id="@+id/tv_langName" android:layout_alignTop="@+id/im_test" android:layout_marginTop="20dp" android:textColor="#000000" android:textSize="20sp" /> </RelativeLayout> |
Now We have to do coding for activity, Firstly you have to define global variable for List View, After declaration we need fetch it from xml by unique id. Also declare Array List of Bean and Adapter class as like I did. Now Add data in Array List and bind it with Adapter. At final stage you have to bind ListView with Adapter. Now you can run your code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
package com.example.myapplication; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.widget.ListView; import java.util.ArrayList; public class MainActivity extends AppCompatActivity { ListView lv; ListViewBaseAdapter adapter; ArrayList<ListViewBean> arr_bean; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); lv = (ListView) findViewById(R.id.listview); arr_bean=new ArrayList<ListViewBean>(); arr_bean.add(new ListViewBean(R.drawable.android, "Android")); arr_bean.add(new ListViewBean(R.drawable.java, "Java")); arr_bean.add(new ListViewBean(R.drawable.python,"Python")); arr_bean.add(new ListViewBean(R.drawable.mysql, "MySQL")); arr_bean.add(new ListViewBean(R.drawable.php, "PHP")); adapter=new ListViewBaseAdapter(arr_bean,this); lv.setAdapter(adapter); } } |
So here is the output :
