Android ListView and Custom ListView
Download as PPT, PDF0 likes418 views
This document provides steps to create a custom ListView in Android. It involves creating a layout file for list item rows, a DataModel class to store list item data, a CustomAdapter class to populate the ListView, and adding code to the activity's onCreate method to initialize the ListView. The CustomAdapter inflates the custom row layout, sets data from the DataModel, and adds an on click listener to each item. This allows clicking list items to display additional details in a Snackbar popup.
Android ListView and Custom ListView
- 2. Under the Composite palette drag a ListView onto the activity, give it an id 2
- 3. Right click on res/layout choose New/Other (or XML if it is there) 3
- 4. Choose Android/Android XML File (not just XML file) and click Next 4
- 5. Give the file a name – remember the file name convention small letters numbers underscores and periods. Choose a Root Element. Click Finish. 5
- 6. Resulting XML in Graphical Layout view and xml view 6
- 7. Code for String array, ArrayAdapter, and ListView 7
- 8. Result so far in emulator. Note that the list items are clickable 8
- 9. Code for the OnItemClickListener 9
- 10. Result 10
- 11. Custom List View Creating a View template Let’s create a xml layout that presents the items in a row in a customised way. Row_view.xml 11 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:padding="10dp"> <TextView android:id="@+id/name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:text="Marshmallow" android:textAppearance="?android:attr/textAppearanceSmall" android:textColor="@android:color/black" />
- 12. <TextView android:id="@+id/type" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/name" android:layout_marginTop="5dp" android:text="Android 6.0" android:textColor="@android:color/black" /> <ImageView android:id="@+id/item_info" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentEnd="true" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:src="@android:drawable/ic_dialog_info" /> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true"> <TextView 12
- 14. Create DataModel Class 14 public class DataModel { String name; String type; String version_number; String feature; public DataModel(String name, String type, String version_number, String feature ) { this.name=name; this.type=type; this.version_number=version_number; this.feature=feature; } public String getName() { return name; }
- 15. 15 public String getType() { return type; } public String getVersion_number() { return version_number; } public String getFeature() { return feature; } }
- 16. Create an adapter 16 public class CustomAdapter extends ArrayAdapter<DataModel> implements View.OnClickListener{ private ArrayList<DataModel> dataSet; Context mContext; // View lookup cache private static class ViewHolder { TextView txtName; TextView txtType; TextView txtVersion; ImageView info; } public CustomAdapter(ArrayList<DataModel> data, Context context) { super(context, R.layout.row_item, data); this.dataSet = data; this.mContext=context; }
- 17. 17 de c void onClick(View v) { position=(Integer) v.getTag(); ct object= getItem(position); Model dataModel=(DataModel)object; ch (v.getId()) se R.id.item_info: nackbar.make(v, "Release date " +dataModel.getFeature(), Snackbar.L .setAction("No action", null).show(); reak; te int lastPosition = -1;
- 18. 18 @Override public View getView(int position, View convertView, ViewGroup parent) { // Get the data item for this position DataModel dataModel = getItem(position); // Check if an existing view is being reused, otherwise inflate the view ViewHolder viewHolder; // view lookup cache stored in tag final View result; if (convertView == null) { viewHolder = new ViewHolder(); LayoutInflater inflater = LayoutInflater.from(getContext()); convertView = inflater.inflate(R.layout.row_item, parent, false); viewHolder.txtName = (TextView) convertView.findViewById(R.id.name); viewHolder.txtType = (TextView) convertView.findViewById(R.id.type); viewHolder.txtVersion = (TextView) convertView.findViewById(R.id.version_number); viewHolder.info = (ImageView) convertView.findViewById(R.id.item_info); result=convertView; convertView.setTag(viewHolder); } else { viewHolder = (ViewHolder) convertView.getTag(); result=convertView; }
- 19. 19 Animation animation = AnimationUtils.loadAnimation(mContext, (position > lastPosition) ? R.anim.up_from_bottom : R.anim.down_from_top); result.startAnimation(animation); lastPosition = position; viewHolder.txtName.setText(dataModel.getName()); viewHolder.txtType.setText(dataModel.getType()); viewHolder.txtVersion.setText(dataModel.getVersion_number()); viewHolder.info.setOnClickListener(this); viewHolder.info.setTag(position); // Return the completed view to render on screen return convertView; } }
- 20. Add this to your onCreate method 20 listView=(ListView)findViewById(R.id.list); dataModels= new ArrayList<>(); dataModels.add(new DataModel("Apple Pie", "Android 1.0", "1","September 23, 2008")); dataModels.add(new DataModel("Banana Bread", "Android 1.1", "2","February 9, 2009")); dataModels.add(new DataModel("Cupcake", "Android 1.5", "3","April 27, 2009")); dataModels.add(new DataModel("Donut","Android 1.6","4","September 15, 2009")); dataModels.add(new DataModel("Eclair", "Android 2.0", "5","October 26, 2009")); dataModels.add(new DataModel("Froyo", "Android 2.2", "8","May 20, 2010")); dataModels.add(new DataModel("Gingerbread", "Android 2.3", "9","December 6, 2010")); dataModels.add(new DataModel("Honeycomb","Android 3.0","11","February 22, 2011")); dataModels.add(new DataModel("Ice Cream Sandwich", "Android 4.0", "14","October 18, 2011")); dataModels.add(new DataModel("Jelly Bean", "Android 4.2", "16","July 9, 2012")); dataModels.add(new DataModel("Kitkat", "Android 4.4", "19","October 31, 2013")); dataModels.add(new DataModel("Lollipop","Android 5.0","21","November 12, 2014")); dataModels.add(new DataModel("Marshmallow", "Android 6.0", "23","October 5, 2015")); adapter= new CustomAdapter(dataModels,getApplicationContext());
- 21. listView.setAdapter(adapter); listView.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { DataModel dataModel= dataModels.get(position); Snackbar.make(view, dataModel.getName() +"n"+dataModel.getType()+" API: "+dataModel.getVersion_number(), Snackbar.LENGTH_LONG) .setAction("No action", null).show(); } }); } 21
- 22. 22